HTML标签---学习笔记

第一章

HTML标准结构学习：

　　顶层标签：html

　　　　投标签：head

　　　　主题标签：boby

<html>

    <head>

        <meta charset="utf-8" />

        <title>HTML结构学习</title>

    </head>

    <body>

        hello world！

    </body>

</html>

第二章

<html>

    <head>

        <meta http-equiv="content-type" content="text/html;charset=utf-8" />    <!--告诉网页使用指定的编码格式-->

        <title>HTML结构学习</title>

        <meta name="keywords" content="HTML,JSDX,DZY,555" /> 　　<!--网页关键字-->

        <meta name="description" content="本篇博客是关于HTML标签的学习哟，超级棒！！！" />　　 <!--网页描述-->

        <meta name="author" content="DZY" />　　 <!--网页作者-->

        <meta http-equiv="refresh" content="5;url=http://www.baidu.com" /> 　　<!--网页5秒后自动跳转到百度-->

    </head>

    <body>

        hello world！

    </body>

</html>

第三章

标题标签：

　　h1到h6：会将其中的数据加粗加黑显示，并且显示依次减弱，标题标签自带换行功能（块级标签）

　　　　属性：

　　　　　　align：center、left、right

水平线标签：

　　hr：会在页面中显示一条水平线

　　　　属性：

　　　　　　width=“宽度”　　设置水平线的宽度

　　　　　　size=“高度”　　设置水平线的高度

　　　　　　color=“颜色”　　设置水平线的颜色

段落标签：

　　p：会将一段数据作为整体进行显示，主要进行css和js操作时比较方便，会自动换行（块级标签）

　　　　特点：段间距比较大

换行符：

　　br：告诉浏览器需要在此位置换行

空格符：

　　&nbsp；：告诉浏览器在此位置增加空格

权重标签：

　　b：会将内容加黑显示

　　i：会将内容斜体显示

　　u：会将内容增加下划线

　　del：会将内容增加中划线　　　

　　以上这些不会换行，并却可以嵌套使用。

注意：

　　1 标签的属性是对标签功能进一步的补充，可以由开发人员自由指定标签的属性值，来达到想要的显示效果。

　　2 像素单位占据的是电脑屏幕的大小，百分比占据的浏览器窗口的大小。　

第四章

列表标签：

　　无序列表：

　　　　ul：

　　　　　　li：在该标签中书写列表内容，一个li标签代表列表中的一行数据

　　　　　　特点：默认数据前有一个黑圆圈符号

　　有序列表：

　　　　ol：

　　　　　　li：在该标签中书写列表内容，一个li标签代表列表中的一行数据

　　　　　　特点：会自动给列表进行顺序编码，格式从小到大并且时连续的

　　　　　　属性：

　　　　　　　　type：可以改变顺序编码的值，可以时1 a A等，默认使用阿拉伯数字进行顺序编码

　　自定义列表：

　　　　dl：

　　　　　　dt：数据的标题

　　　　　　dd：数据的具体内容，一个dd表示一条数据

第五章

图片标签：

　　img：

　　　　src：图片路径

　　　　　　本地资源路径：一般本地资源使用相对路径即可

　　　　width：设置图片的宽度，如果时单独设置，则再对图片保证不失真的情况下自动缩小或者放大

　　　　　　单位可以时px也可以时百分比

　　　　height：设置图片的宽度，如果时单独设置，则再对图片保证不失真的情况下自动缩小或者放大

　　　　　　单位可以时px也可以时百分比

　　　　title：图片标题，鼠标放在图片上面的时候会显示

　　　　alt：图片加载失败后的提示语

　　　　注意：图片是不会自动换行的（行内元素）

注意：

　　相对路径：从当前文件出发查找另一个文件所经过的路径

　　绝对路径：从跟盘符出发所查找文件的路径

第六章

超链接标签：

　　a：

　　　　href：要跳转的网页资源路径

　　　　　　本地资源：相对路径

　　　　　　网络资源：网络资源（网页）的URL

　　　　target：指明要跳转的网页资源的显示位置

　　　　　　_self　　在当前页中刷新显示

　　　　　　_blank　　在新的标签页中显示

　　　　　　_top　　在顶层页中显示

　　　　　　_parent　在父级页面中显示

　　注意：

　　　　超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片

　　锚点：

　　　　作用：在一张网页中进行资源跳转

　　　　使用：

　　　　　　先使用超链接标签在指定的网页位置增加锚点，格式：

　　　　　　使用a标签可以跳转指定的锚点，达到网页内部资源跳转的目的，格式：

第七章

表格标签：

　　table：声明一个表格

　　　　tr：声明一行，设置行高及行所有单元格的高度

　　　　　　th：声明一个单元格，表头格，默认居中加黑显示

　　　　　　td：声明一个单元格，默认居左原始数据

　　　　注意：

　　　　　　行高即改行所有单元格的宽度

　　　　　　单元格的宽度即列宽

　　　　属性：

　　　　　　border：给表格添加边框

　　　　　　width：设置表格的宽度

　　　　　　height：设置表格的高度

　　　　　　cellpadding：设置内容居边框的距离

　　　　　　cellspacing：设置边框的大小

　　　　特点：

　　　　　　默认根据数据的多少进行表格的大小显示

　　单元格合并：

　　　　第一步：

　　　　　　首先确保表格是一个规整的表格

　　　　第二步：

　　　　　　根据要合并的单元格，找到其所在的源码位置

　　　　第三步：

　　　　　　行合并：在要合并的单元格的第一个单元格上使用属性rowspan=:"要合并单元格的个数“，并删除其他要合并的单元格完成合并

　　　　　　列合并：在要合并的单元格上使用属性colspan="要合并单元格的个数"，并删除合并的其他单元格

第八章：

内嵌标签：

　　iframe：

　　　　src：要显示的网页资源路径

　　　　　　可以是本地（相对路径）也可以是网络资源（URL）

　　　　　　注意：

　　　　　　　　默认当前页面打开及加载src指向的资源

　　　　width：设置显示区域的宽度

　　　　height：设置显示区域的高度

　　　　name：设置内嵌区域的名字，结合超链接标签的target属性使用

　　作用：

　　　　在当前网页中加载其他网页的资源，达到不同网页资源之间不互相干扰，并能在同一个页面中展现给用户的目的

框架标签：

　　注意：

　　　　第一步一定要删除boby标签

　　frameset：

　　　　属性：

　　　　　　rows：按照行进行切分页面

　　　　　　cols：按照列进行切分页面

　　　　子标签：

　　　　　　frame：进行切分区域的占位，一个frame可以单独加载网页资源

　　　　　　　　src：资源路径（本地或者网络）

　　　　　　　　name：区域名，结合超链接使用

第九章：

表单标签：

　　form：

　　　　作用：收集并提交用户数据给指定服务器

　　　　属性：

　　　　　　action：收集的数据提交地址也就是URL

　　　　　　method：收集的数据的提交方式

　　　　　　　　get：适合小量数据，表单数据以？隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全

　　　　　　　　post：适合大量数据，安全，隐式提交

　　　　　　注意1：

　　　　　　　　form标签会收集其标签内部的数据

　　　　　　注意2：

　　　　　　　　表单数据提交，要提交的表单项必须拥有name属性值，否则不会提交。

　　　　　　　　提交的表单项数据为键值对，键位name属性的值，值位用户书写的数据。

　　　　　　注意3：

　　　　　　　　form表单标签的数据提交需要依赖于submit提交按钮。

表单域标签：

　　作用：给用户提供可以进行数据书写或者选择的标签

　　使用：

　　　　文本框：

　　　　　　input：

　　　　　　　　type：

　　　　　　　　　　text：收集少量的文本数据，用户可见

　　　　　　　　　　password：收集用户密码数据

　　　　　　　　name：数据提交的键，也会被js使用

　　　　　　　　value：默认值

　　　　单选框：

　　　　　　imput：

　　　　　　　　type：

　　　　　　　　　　radio

　　　　　　　　name：name属性相同的单选框之恶能选择一项数据

　　　　　　　　value：要提交的数据

　　　　　　　　checked：checked使用此属性的单选默认是选择状态

　　　　多选框：

　　　　　　input：

　　　　　　　　type：

　　　　　　　　　　checkbox

　　　　　　　　name：一个多选组需要使用相同的name属性值

　　　　　　　　value：要提交的数据

　　　　　　　　checked：checked使用此属性的单选默认是选择状态

　　　　单选下拉框：　

　　　　　　select：

　　　　　　　　name　　数据提交的键名，必须声明

　　　　　　　　子标签：

　　　　　　　　　　option：一个option标签表示一个下拉选项

　　　　　　　　　　　　value：要提交的数据

　　　　文本域：

　　　　　　textarea：声明一个可以书写大量文字的文本区域

　　　　　　　　name：数据提交的键名，js和css也会使用

　　　　　　　　rows：声明文本域的行数

　　　　　　　　cols：声明文本域的列数

　　　　普通按钮：

　　　　　　input：

　　　　　　　　type：

　　　　　　　　　　hidden

　　　　　　　　value：按钮的名字

　　　　注意：表单数据提交提交的是表单域标签的value值

　　在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式提交给action属性所指明的提交地址。