本文详细介绍了HTML的基础知识，包括预习概念如HTTP、FTP等，HTML的语法规范、发展历程，以及HTML5的主要组成部分如<head>、<body>标签。还讲解了文字排版、列表、超链接、表格、表单等元素的使用，以及多媒体标记和结构性标记的运用。
第一章
预习概念：
Internet
Wed(W3C)(WOW)
http
ftp
TCP
IP
octet
DNS
URI（URL）
HTML5TYPE
DTD:<!DOCTYPE html>
<abbr>
第二章、HEML基础
html文件的后缀名是html或者是htm
标签的作用：决定内容的功能
属性的作用：决定功能的特点
HTML概述：html(hyper text markup language)超文本标签语言
超文本：在网页中不仅可以嵌入一般的文本，
还可以嵌入浏览器能够加载的文件。
标签：网页的结构是以标签的方式组织的。
语法规范、
1.标签名和属性名必须小写
2.标签必须正确结束
3.标签必须正确嵌套
发展历程和当前版本
1996--html2.0
1999---html4.0(xhtml1.0)
2013---html5.0
HTML编写工具，
通用编辑工具：notepad/editplus/ue/notepad++
专用编辑工具：dreamweaver/topstyle
主要组成部分:
<html>
<head></head>
<body></body>
<footer></footer>
</html>
在网页中显示的文字默认是没有结构
（代码中的空格和换行默认一般是不会被显示出来的）
viod元素：独立元素（单标签）
文字的
排版标签( p, hr,pre,br, div,span,center)
p段落
空格(应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本)
&quto;引号
©版权号
®工商注册
’撇好
—长破折线
|竖线
br换行(viod)
hr水平线(viod)
属性： size:水平线的粗细
noshade:去掉阴影(这个属性的值和名称一样)
width:宽度
color:颜色(颜色的值可以是颜色的单词，
也可以是16进制的编号，也可以是rgb(1,2,3))
align:对齐方式（center,left,right）
pre预排版
center居中标签
字体标记 (h1-h6,strong,b,font——属性有size,color,face)
标题标签h1---h6
align:(left,center,right)
注意：常用的标题标签是h2和h3
文字的加粗strong,b
字体标签font
size:设置文字为几号字
color:设置文字的颜色
face:设置文字字体
head网页头部的作用：
1.设置网页标题
<title>我的第一个网页</title>
2.设置头标记
3.引用外部资源
body网页主体的作用：给网页设置要显示的内容的
body网页主题标签常用属性有：text,bgcolor
列表： 无序列表ul(unordered list)
type:(disc,circle,square)
作用：实现导航
有序列表ol(ordered list)
type:(1,a,A,i,I)
reversed:倒序
start：数字序列的起始值
value：数字序列的起始值，以获得非连续数字序列。
作用：实现有先后步骤的过程展示
不管是无序还是有序列表的选项都是li(list item)
自定义列表dl(defination list)
(注意自定义列表的每个选项是由两个部分组成的)
每个选项的连个部分是有一个标题(dt)和多个描述(dd)组成的
dt(defined title)定义标题
dd(defined description)定义描述
作用：产品展示（图文混排）
超链接：a
作用:超链接中的文字点击之后会发生页面的跳转
a标签的特点：
1.不定义href属性，就不能点击
2.声明了href属性，但是未赋值，点击之后会弹出当前网页
所在的位置
href:表示跳转到哪儿
target:表示跳转方式(_self,_blank,_top,_parent,new)
base 标签使页面中的所有标签在新窗口中打开:
<base target="_blank" />
超链接的作用：
1.页面跳转（路径的跳转）
2.位置的跳转（锚点链接）
1.定义锚点
<a name="sb">接撒扩大</a>
2.定义实现跳转的超链接
<a href="#sb">了的就看撒</a>
3.功能性链接(发送邮件)
<a href="mailto:348104384@qq.com">联系我们</a>
没有下划线的链接:text-decoration:none
字符集（编码）
计算机能够存储和处理的是二进制的数据
字符集：
latin1（iso8859-1）
A----65
B----66
C----67
资源路径(位置)的问题：
绝对路径：
1.在本机的某个具体的文件夹
<img src="fiel:///|C:\Users\Administrator\
Desktop\27.jpg"/>
访问本机资源一般不再用绝对路径了
2.在网络的具体位置
<img src="http://d.hiphotos.baidu.com/image/
pic/item/562c11dfa9ec8a13f075f10cf303918fa1ecc0eb.jpg"/>
访问网络资源只能用绝对路径
所谓的上一级路径（父文件夹）,和下一级路径（子文件夹）
实际上指的是文件夹的包含和被包含关系
相对路径：资源和当前网页的相对的位置关系
（是以当前网页为参照物的）
当前路径：./（可以省略）
上一级路径：../
下一级路径：没有特殊符号
表格： (table及其子标签tr（行）,主题：th、内容：td（列）,
caption,thead,tbody,tfoot及属性)
border：设置边框粗细
width:设置表格宽度
height:设置表格高度（一般不设置）
cellspacing:设置单元格的间距（单元格与单元格）
cellpadding:设置单元格的内边距（单元格与文本）
align：对齐方式
valign：垂直对齐
bgcolor：背景色
bordercolor：边框颜色
对于表格只会影响到表格最外层的边框颜色
对于行会影响到行中所有单元格
对于单元格只会影响到当前单元格
表格默认每一行的列数必须相同
不规则的表格如何实现：
单元格的合并：
1.单元格的横向合并
对其他行无影响，合并以后要保证宽度
和以前一致（在合并以后的这个单元格上设置colspan属性）
2.单元格的纵向合并
对某些行有影响，受影响行的对应列
就不需要了，合并以后要保证高度和以前一致
(在合并以后的这个单元格上设置rowspan属性)
带标题 (caption) 的表格:
<caption>表格标题</caption>
表格的作用：
1.显示表格数据
2.布局表单
表单标记及语义化：form
作用：封装数据并提交(负责用户和应用程序的交流)
action:设置数据往哪儿提交
method:设置表单的提交方式
(get,post,put,del)
value:默认值
name：
输入标签：（总共有7种，其中5种都是input）
文本框(单行文本)<input type="text"/>
密码框<input type="password"/>
单选按钮
<input type="radio"/>
<input type="radio" name="sex" checked/checked="checked"/>男
多选按钮(复选框)
<input type="checkbox"/>
单选按钮和复选框都可以设置默认被选中使用checked属性
文件域：
文件上传标签<input type="file"/>
下拉列表<select>
<option selected/selected="selected">山东</option>
<option>山西</option>
<option>河北</option>
<option>河南</option>
</select>
多行文本（文本域）
<textarea rows="8" cols="55"></textarea>
按钮：（总共4种）
表单提交按钮
<input type="submit" value="注册"/>
表单重置按钮
<input type="reset" value="重置"/>
普通按钮
<input type="button" value="普通按钮">
图片链接
<input type="image" src=""/>
textarea:多行文本域
placeholder="重庆市"：默认可覆盖为重庆市（灰体）
readonly="readonly":默认不可覆盖为重庆市
disabled="disabled":默认不可覆盖为重庆市（灰体）
带标题框的表单：
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
<label> 定义一个控制的标签
<fieldset> 定义域
<optgroup> 定义选项组
框架标记及<iframe>
frameborder 规定是否显示框架周围的边框。
scrolling 规定是否在 iframe 中显示滚动条。
width
height
longdesc 规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight 定义 iframe 的顶部和底部的边距。
marginwidth
name
(frameset,freame——属性有name,横向：rows,纵向：cols等等)
书写frameset标签时不能使用body
<frameset rows="30%,50%,*" border="1px" feameborder="no" framespace="0">
<frame src=""/>
<frame src=""/>
<frame src=""/>
</frameset>
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。
为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
<noframeset>
<body>
浏览器不支持此框架
</body>
</noframeset>
结构性标记（布局）
header:标题
nav:导航链接区域
div:结构性区域（标题、段落、列表、其他列表）块级元素
footer:页脚区域
多媒体标记(embed, bgsound——属性
有src,loop,autostart,width,height)
头标记和特殊字符
(head及其子标签title,meta,link,base)
预习概念：
Internet
Wed(W3C)(WOW)
http
ftp
TCP
IP
octet
DNS
URI（URL）
HTML5TYPE
DTD:<!DOCTYPE html>
<abbr>
第二章、HEML基础
html文件的后缀名是html或者是htm
标签的作用：决定内容的功能
属性的作用：决定功能的特点
HTML概述：html(hyper text markup language)超文本标签语言
超文本：在网页中不仅可以嵌入一般的文本，
还可以嵌入浏览器能够加载的文件。
标签：网页的结构是以标签的方式组织的。
语法规范、
1.标签名和属性名必须小写
2.标签必须正确结束
3.标签必须正确嵌套
发展历程和当前版本
1996--html2.0
1999---html4.0(xhtml1.0)
2013---html5.0
HTML编写工具，
通用编辑工具：notepad/editplus/ue/notepad++
专用编辑工具：dreamweaver/topstyle
主要组成部分:
<html>
<head></head>
<body></body>
<footer></footer>
</html>
在网页中显示的文字默认是没有结构
（代码中的空格和换行默认一般是不会被显示出来的）
viod元素：独立元素（单标签）
文字的
排版标签( p, hr,pre,br, div,span,center)
p段落
空格(应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本)
&quto;引号
©版权号
®工商注册
’撇好
—长破折线
|竖线
br换行(viod)
hr水平线(viod)
属性： size:水平线的粗细
noshade:去掉阴影(这个属性的值和名称一样)
width:宽度
color:颜色(颜色的值可以是颜色的单词，
也可以是16进制的编号，也可以是rgb(1,2,3))
align:对齐方式（center,left,right）
pre预排版
center居中标签
字体标记 (h1-h6,strong,b,font——属性有size,color,face)
标题标签h1---h6
align:(left,center,right)
注意：常用的标题标签是h2和h3
文字的加粗strong,b
字体标签font
size:设置文字为几号字
color:设置文字的颜色
face:设置文字字体
head网页头部的作用：
1.设置网页标题
<title>我的第一个网页</title>
2.设置头标记
3.引用外部资源
body网页主体的作用：给网页设置要显示的内容的
body网页主题标签常用属性有：text,bgcolor
列表： 无序列表ul(unordered list)
type:(disc,circle,square)
作用：实现导航
有序列表ol(ordered list)
type:(1,a,A,i,I)
reversed:倒序
start：数字序列的起始值
value：数字序列的起始值，以获得非连续数字序列。
作用：实现有先后步骤的过程展示
不管是无序还是有序列表的选项都是li(list item)
自定义列表dl(defination list)
(注意自定义列表的每个选项是由两个部分组成的)
每个选项的连个部分是有一个标题(dt)和多个描述(dd)组成的
dt(defined title)定义标题
dd(defined description)定义描述
作用：产品展示（图文混排）
超链接：a
作用:超链接中的文字点击之后会发生页面的跳转
a标签的特点：
1.不定义href属性，就不能点击
2.声明了href属性，但是未赋值，点击之后会弹出当前网页
所在的位置
href:表示跳转到哪儿
target:表示跳转方式(_self,_blank,_top,_parent,new)
base 标签使页面中的所有标签在新窗口中打开:
<base target="_blank" />
超链接的作用：
1.页面跳转（路径的跳转）
2.位置的跳转（锚点链接）
1.定义锚点
<a name="sb">接撒扩大</a>
2.定义实现跳转的超链接
<a href="#sb">了的就看撒</a>
3.功能性链接(发送邮件)
<a href="mailto:348104384@qq.com">联系我们</a>
没有下划线的链接:text-decoration:none
字符集（编码）
计算机能够存储和处理的是二进制的数据
字符集：
latin1（iso8859-1）
A----65
B----66
C----67
资源路径(位置)的问题：
绝对路径：
1.在本机的某个具体的文件夹
<img src="fiel:///|C:\Users\Administrator\
Desktop\27.jpg"/>
访问本机资源一般不再用绝对路径了
2.在网络的具体位置
<img src="http://d.hiphotos.baidu.com/image/
pic/item/562c11dfa9ec8a13f075f10cf303918fa1ecc0eb.jpg"/>
访问网络资源只能用绝对路径
所谓的上一级路径（父文件夹）,和下一级路径（子文件夹）
实际上指的是文件夹的包含和被包含关系
相对路径：资源和当前网页的相对的位置关系
（是以当前网页为参照物的）
当前路径：./（可以省略）
上一级路径：../
下一级路径：没有特殊符号
表格： (table及其子标签tr（行）,主题：th、内容：td（列）,
caption,thead,tbody,tfoot及属性)
border：设置边框粗细
width:设置表格宽度
height:设置表格高度（一般不设置）
cellspacing:设置单元格的间距（单元格与单元格）
cellpadding:设置单元格的内边距（单元格与文本）
align：对齐方式
valign：垂直对齐
bgcolor：背景色
bordercolor：边框颜色
对于表格只会影响到表格最外层的边框颜色
对于行会影响到行中所有单元格
对于单元格只会影响到当前单元格
表格默认每一行的列数必须相同
不规则的表格如何实现：
单元格的合并：
1.单元格的横向合并
对其他行无影响，合并以后要保证宽度
和以前一致（在合并以后的这个单元格上设置colspan属性）
2.单元格的纵向合并
对某些行有影响，受影响行的对应列
就不需要了，合并以后要保证高度和以前一致
(在合并以后的这个单元格上设置rowspan属性)
带标题 (caption) 的表格:
<caption>表格标题</caption>
表格的作用：
1.显示表格数据
2.布局表单
表单标记及语义化：form
作用：封装数据并提交(负责用户和应用程序的交流)
action:设置数据往哪儿提交
method:设置表单的提交方式
(get,post,put,del)
value:默认值
name：
输入标签：（总共有7种，其中5种都是input）
文本框(单行文本)<input type="text"/>
密码框<input type="password"/>
单选按钮
<input type="radio"/>
<input type="radio" name="sex" checked/checked="checked"/>男
多选按钮(复选框)
<input type="checkbox"/>
单选按钮和复选框都可以设置默认被选中使用checked属性
文件域：
文件上传标签<input type="file"/>
下拉列表<select>
<option selected/selected="selected">山东</option>
<option>山西</option>
<option>河北</option>
<option>河南</option>
</select>
多行文本（文本域）
<textarea rows="8" cols="55"></textarea>
按钮：（总共4种）
表单提交按钮
<input type="submit" value="注册"/>
表单重置按钮
<input type="reset" value="重置"/>
普通按钮
<input type="button" value="普通按钮">
图片链接
<input type="image" src=""/>
textarea:多行文本域
placeholder="重庆市"：默认可覆盖为重庆市（灰体）
readonly="readonly":默认不可覆盖为重庆市
disabled="disabled":默认不可覆盖为重庆市（灰体）
带标题框的表单：
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
<label> 定义一个控制的标签
<fieldset> 定义域
<optgroup> 定义选项组
框架标记及<iframe>
frameborder 规定是否显示框架周围的边框。
scrolling 规定是否在 iframe 中显示滚动条。
width
height
longdesc 规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight 定义 iframe 的顶部和底部的边距。
marginwidth
name
(frameset,freame——属性有name,横向：rows,纵向：cols等等)
书写frameset标签时不能使用body
<frameset rows="30%,50%,*" border="1px" feameborder="no" framespace="0">
<frame src=""/>
<frame src=""/>
<frame src=""/>
</frameset>
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。
为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
<noframeset>
<body>
浏览器不支持此框架
</body>
</noframeset>
结构性标记（布局）
header:标题
nav:导航链接区域
div:结构性区域（标题、段落、列表、其他列表）块级元素
footer:页脚区域
多媒体标记(embed, bgsound——属性
有src,loop,autostart,width,height)
头标记和特殊字符
(head及其子标签title,meta,link,base)
扫一扫
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
