1、什么是html?
hypertext markup language,即超文本标记语言。
由浏览器解释执行,用于生成一个显示页面。
html文件的后缀是.html /.htm
2、html的基本结构
html文件由标记和标记内容构成。
标记有两种:单标记 双标记
根标记是html
head标记:
当中内容与显示无关
如:
title:标题
script:插入脚本(javascript)
style:插入样式(css)
link:引入样式(css文件)
meta:模拟http响应头(服务器向浏览器发送的一些指令,比如服务器可以要求浏览器按指定的编码显示页面)
body标记:
与显示有关
<a>:链接
<table>:表格
<ul>:列表
<form>:表单
<img>:图像
3、重点标记
(1)链接
A.基本语法
<a href="html02.html">html02</a>
<a href="#">html02</a><br>
<a href="html02" target="_blank">html02</a>
target:链接中的内容在哪儿打开
_blank:在新的窗口中打开
_self:在当前窗口打开(默认)
B.使用图像作为链接地址
<a href="html02.html"><img src="images/cp.gif" border="0"></a>
C.发邮件
<a href="mailto:chengzh@tarena.com.cn">mail to me</a>
D.锚点(一个页面内容的跳转)
命名一个锚点
<a name="top">top</a>
跳转到锚点
<a href="#top">to top</a>
E.使用热点
将一个图片划分成多个区域,每一个区域表示一个链接。
<img src="index04.jpg" width="500" height="500" border="0" usemap="#m1" />
<map name="m1" id="m1">
<area shape="rect" coords="…" href="#" />
<area shape="circle" coords="…" href="#" />
<area shape="poly" coords="…" href="#" />
</map>
当shape="rect"(矩形)时,coords的值为左上角和右下角的坐标值; 当shape="poly"(多边形)时,
为各顶点值; 当shape="circle"(圆形)时,为圆心坐 标值和半径值。 coords值依照图片大小的不同
和所希望链接区域的不同而有所不同
</map>
F、链接中的伪样式
(2) 表格
A.基本语法
<table>
<tr>
<td></td>
</tr>
</table>
重要属性:
width: 60% 表示占父标记宽度的60%
cellpadding:内边距,单元格的内容与单元格之间的距离
cellspacing:外边距,单元格之间的距离
一般情况下,都设置为0。
B.不规则的表格
colspan:合并列
rowspan:合并行
C.表格的嵌套
D.表格的其它形式
caption:标题
thead:表头
tfoot:表脚
tbody:表体
一个表格,只能有一个表头和表脚,表体可以有多个。
E.表格内容的居中
水平居中:align:left/center/right
垂直居中:valign:top/middle/bottom
(3)列表
A.无序列表
<ul>
<li></li>
</ul>
B.有序列表
<ol>
<li></li>
</ol>
C.列表嵌套
(4)表单
A.什么是表单
用于收集用户信息(用户通过表单向服务器提交数据)。
B.表单的基本结构
<form action="abc.do" method="">
input标记
非input标记
</form>
action属性:表单提交的内容由哪个程序来处理
method属性:表单提交的方式
C.input标记
<input type="text"/ "password" / "button" / "checkbox" /"radi/"hidden"/ "file"/>
D.非input标记
select既可用于下拉列表,也可以用于多选框(multiple)
textarea(用于显示一个文本区域),button(按钮) ,img(图片)
4、框架
(1)什么是框架
将一个窗口划分成多个子窗口,每一个子窗口都可以放置一个页面。
frameset与iframe的区别:
frameset页面中不能出现body,而iframe可以用在body标记里。
5.xhtml与html的关系
xhtml:可扩展的超文本标记语言
html是一种语法宽松的语言,大小写不敏感,一些错误会忽略,w3c对html语法做了进一步的要求,即按照xml语法的要求重新定义了html标记。
按照以下方式来写html第一行,写文档类型声明(可以省略)
XHTML 过渡型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 严格型:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML严格型 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML松散型:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
接下来,按照以下规则写html:
(1)标记有开始,也有结束,对于单标记 <br/> <hr/>
(2)标记层层嵌套
(3)全部用小写
(4)属性值要用双引号引起来
在页面当中,如果有'空格'( )' 引号'("),'&' (&) '>' (>) '<'(<),
要使用相应的实体来代替,主要的目的是避免浏览器解析出错。
6、css
(1)什么是css?
级联样式表 cascading stylesheet,为页面提供展现的方式(即数据以何种方式来显示)
(2)w3c推荐页面设计的标准
数据与结构:html
样式(外观):css
行为:javascript
(3)css的基本语法
选择器{
属性名:属性值;
...
}
(4)选择器
A.标签选择器(选择器的名称是一个标签的名字)
标记的名称{
}
B. class选择器
.任意的名称{
}
或者
标记名称.任意的名称{
}
C.id选择器
#任意的名称{
}
(5)样式的继承
子标记会继承父标记的样式
分享到:
相关推荐
在Windows Forms(WinForms)应用开发中,有时候我们需要在应用程序中展示富文本或者实现复杂的用户交互,这时可以采用嵌入HTML的方式。本文将详细介绍如何在WinForms中嵌入HTML,并与HTML进行交互,同时通过提供的...
Html2Image html2Image = Html2Image.fromHtml(sb.toString(),null); // 这边如果设置false,图片不会自动根据内容设置长宽默认长1024 ,宽768 //html2Image.getImageRenderer().setAutoHeight(false); ...
针对JS(JavaScript)和HTML(超文本标记语言)这两种广泛使用的前端开发语言,有多种代码格式化工具可以帮助开发者实现这一目标。下面将详细介绍这些工具及其特点。 1. **JS Beautify**: JS Beautify是一款开源...
HTML,全称HyperText Markup Language,是用于创建网页的标准标记语言。这个“HTML期末大作业”显然涵盖了HTML的基础知识和应用技巧,对于学习者来说,无论是完成作业还是自我提升,都是一个宝贵的资源。 HTML的...
HTML个人网站源码是构建网页或简单网站的基础框架,它包含HTML、CSS和可能的JavaScript文件,这些元素共同构成了一个动态、交互式的网络界面。在这个压缩包中,我们看到的是一个名为“经典三列布局整套模板”的项目...
HTML(HyperText Markup Language)是用于创建网页的标准标记语言,它是互联网上应用最广泛的语言,也是构建网页的基础。在这个“html期末大作业”中,我们可以推测这是一个学生或学习者为了完成课程要求,练习并...
在IT行业中,HTML to PDF转换是一项常见的需求,特别是在网页内容需要离线阅读或者打印时。`html2pdf`是一个PHP库,它允许开发者将HTML页面转换为PDF文档,从而实现这个功能。`html2pdf`库特别强调了对中文的支持,...
HTML静态网页模板是网页设计中常见的一种资源,它是由HTML、CSS和JavaScript等技术构建的预设布局和设计。这些模板通常包含多个页面,如首页、关于我们、联系我们、产品展示等,为创建网站提供了一个快速而高效的...
在本文中,我们将深入探讨如何使用SpringBoot框架访问和处理HTML页面。SpringBoot以其便捷的配置和快速的应用开发而闻名,使得构建Web应用程序变得更加简单。本实例将展示一个清晰、简洁且注释丰富的代码示例,帮助...
50余款手机页面模版源码html5 1.1【32赞HTM5响应式系列之右侧多级滑动式】仿Slideby触屏版html5响应式手机wap网站模板 2【32赞HTML5响应式系列之订餐模板】微官网美食订餐html5触屏响应式手机wap网站订餐模板 5【32...
HTML,全称HyperText Markup Language,即超文本标记语言,是构建互联网页面的基础。它是一种标记语言,通过一系列标签来描述网页的结构和内容。"纯HTML网页源码"指的是只包含HTML代码,不依赖其他如JavaScript、CSS...
FreshHTML是一款广受欢迎的HTML编辑器,其3.32.0.0汉化版为中文用户提供了极大的便利。这款编辑器的最大特点是它的所见即所得(WYSIWYG)功能,这意味着用户在编辑HTML代码时,可以直接看到页面的实际显示效果,极大...
HTML界面的引入意味着开发者可能使用了诸如WebBrowser组件或其他第三方控件,将HTML页面嵌入到Delphi应用中,使得用户可以直接在Delphi应用内浏览和交互HTML内容。这样的设计允许开发者利用HTML和CSS的灵活性来设计...
HTML(HyperText Markup Language)是一种标记语言,用于创建网页内容并定义其结构。在这个"html静态页面源代码"的压缩包中,包含了四个HTML源文件,它们是构建静态网站的基础。静态网站指的是不包含服务器端动态...
HTML5是一种先进的网页标准,它在图形和交互性方面提供了许多增强功能,使得开发者能够创建出更加生动和富有表现力的网页应用。本资源包含了一系列使用HTML5和JavaScript技术实现的图表,包括饼图、柱状图和折线图,...
《html2canvas.js:网页截屏的利器》 在当今的Web开发中,用户界面的交互性和可分享性越来越重要,而html2canvas.js正是实现这些功能的关键工具。这个JavaScript库允许开发者将网页的HTML结构及其CSS样式转换为...
标题 "mht 转换成html文件" 描述的是一个工具的功能,该工具能够将.mht文件转换为.html文件。这种转换过程对于处理Web内容和跨浏览器兼容性问题至关重要。下面我们将深入探讨.mht和.html文件格式的区别以及转换过程...
本示例将探讨如何使用Java生成HTML文件,这是构建动态网站或自动化报告等任务时常见的需求。通过Java生成HTML,我们可以将数据结构转化为用户友好的网页格式,便于在浏览器中查看。 标题 "java代码生成html文件" 指...
临近期末, 你是否还在为HTML网页设计期末作业而发愁,是否为还在为老师的网页制作作业要求感到头大?是否觉得HTML网页作业无从下手?,网页要求的总数量太多?是否找不到合适的模板?等等一系列问题。本资源就可以为...
《深入解析itext5.4.2与html2pdf:打造中文支持的PDF转换利器》 在数字化的时代,HTML和PDF两种格式在信息传递中占据了重要地位。HTML用于网页展示,而PDF则常用于文档保存和打印。然而,将HTML转换为PDF的需求时常...