第一部分----HTML的基本结构与基本标签
PART-1 HTML的基本结构以及Header的部分
一、什么是HTML？
HTML是超文本标签语言，即网页的源码。而浏览器就是翻译解释HTML源码的工具。
二、HTML文档的结构：
三、详细注释：
<!DOCTYPE html>
<!--↑ HTML的文档类型声明：声明这个文件是HTML5文件，让浏览器按照HTML5的标准对代码进行解释执行。
文档声明在HTML文件中，必须要有，而且必须写在文件最上方。
如果不写文档类型声明，浏览器会默认按照兼容模式运行，可能会出现不明BUG。
-->
<!--注释：写给程序员看的，网页中不会显示。
html中的注释快捷键：Ctrl+/（快速注释选中的文字）
Ctrl+Shift+/（添加注释）-->
<html>
<head>
<!-- head 头部 作用：
用于描述网页的一些关键信息。比如网页的配置、设置、关键字等等。。。
这些信息，大多在浏览器看不到，但是对网页的解析至关重要！
-->
<meta charset="utf-8" />
<!-- meta标签，用于描述网页的各种信息。
其中<meta charset="utf-8" /> 设置网页的字符集编码格式为UTF-8格式。
常见的中文编码格式：
GB2312:国标码，简体中文的编码格式；
GBK：扩展的国标码，比国标码多了更多的编码格式，简体中文；
UTF-8:万国码，可以兼容绝大多数语言的编码。常用！！！！
HTML4.01之前，声明字符集编码的格式：<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-->
<meta name="keywords" content="杰瑞教育,HTML5,网页开发" />
<!--
设置网页的关键字，有助于搜索引擎的搜索。
name="keywords" 表示这个meta标签用于设置网页的关键字；
content="" 表示关键字的详细信息，多个关键字之间用英文逗号分隔。
-->
<meta name="description" content="这是我在杰瑞教育开发的第一个网页！" />
<!--
设置网页的描述信息（搜索引擎搜索时，标题下面的一段文字！非常重要！！！）：
name="description" 表示这个meta标签用于设置网页的描述信息；
content="" 表示描述信息的详细内容。
-->
<title>这是我的第一个网页</title>
<!--
title：网页的标题，显示在浏览器选项卡上面的文字！
-->
<link rel="icon" href="img/书.jpg"/>
<!--
链接网页的小图标： 网页选项卡上的小图片。
rel="icon" 表示连接的文件，将作为网页的icon图标；
href="img/书.jpg" href表示图标图片所在的路径位置。
-->
</head>
<body>
<!-- body中的内容会显示在浏览器的展示区域。 -->
内容区域
</body>
</html>
【注】：所有的Html标签必须是闭合标签。可以是成对的，比如<title> </title>；也可以是自闭合标签，比如：<img />; 也就是说/表示这一个或者一对标签的闭合。
PART-2 HTML的基本块级标签
一、带你了解 Html 标签的 基本分类：
>>> 从功能上，HTML标签分为“块级标签”和“行级标签”
【块级标签和行级标签的区别】<重点>
1、块级标签自动换行，前后隔一行；行级标签不会自动换行，从左往右依次显示。
2、块级标签的宽度默认是100%；行级标签的宽度由文字内容撑开。
3、块级标签可以设置宽度、高度、边距等属性；行级标签不能设置上述属性。
>>> 从写法上，HTML标签分为“成对标签”和“自闭和标签（空标签）”。
1、成对标签：成对出现，有开始标签必须有结束标签，内容包裹在两个标签内。例如<h1></h1>、<p></p>、<title></title>等
2、自闭和标签（空标签）：只有一个标签，用/表示标签的自动闭合（/可以省略）。例如<hr/>、<link/>、<meta/>
二、 HTML中常见的块级标签：
1、h标签：标题标签，默认加粗，h1最大，h6最小。
2、hr标签：表示一条水平线标签
3、P标签：表示段落标签。表示网页中的一段文字。
4、br标签：表示换行符号，在代码中敲回车，在网页中并没有作用，必须使用br标签换行。
5、blockquote：块引用标签。表明一段话是从其他网站引用的。
有一个重要属性：cite=""表示这段话的引用来源，常写一个网站地址。浏览器默认显示效果整段向后缩进。
6、 pre标签：预格式标签，与p标签不同的是pre标签会保留代码中的空格与回车，在网页中直接显示。 最常用的作用：是在网页中显示代码段，保留代码段格式。
三、那些基于布局的块级标签：
列表:无序列表、有序列表、定义列表（图文结合）。
a.有序列表
<ol> （order list缩写）
<li>...</li> 列表项可以有n多个
<li>...</li>
<li>...</li>
</ol>
b.无序列表
<ul> (unorder list)
<li>...</li> n多个
<li>...</li>
<li>...</li>
</ul>
c.定义描述列表
<dl>
<dt>一般只有一项</dt> （列表标题）（标题顶格显示）
<dd>可以有很多项</dd> （列表描述项）（描述项相对标题缩进显示）
<dd>。。。。。</dd>
<dd>。。。。。</dd>
</dl>
d.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。
<figure>
<img/> 图片
<figcaption></figcaption> 图片的标题。
</figure>
e.分区标签
<div></div> 可以包裹任何标签，也可以被包裹进任何标签。 div分区标签，用于配合CSS使用，将网页划分为区块。
、
PART-3 HTML的基本行级标签
一、常用的行级标签：
1、 span标签：用于包裹行内的文字，常配合CSS使用，修改文字样式； <span style=" ">/span>
2、 <em>em标签 ，倾斜+强调</em>
3、 <strong>strong标签 ，加粗+强调</strong>
4、 <i>i标签，倾斜</i>
5、 <b>b标签，加粗</b>
6、 <u>u标签，下划线</u>
7、 <s>s标签，删除线</s>-->
注：
[em/strong/i/b的区别]
1、em和i都能倾斜，strong和b都能加粗。但是，em和strong多了一层强调的含义（强调的作用：让搜索引擎快速抓取网页的重点部分，实现
代码的语义化。）
2、em和strong都有强调的作用，但是em是倾斜，strong是加粗，而且strong的强调程度要比em更高。
3、强调标签可以多层的嵌套。
二、常见引用标签
常见的引用标签有：blockquote、q、cite，其区别在于:
1、显示效果上：blockquote整段缩进、q加引号、cite倾斜
2、从功能上：blockquote用于引用一整段内容，是块级标签；q用于引用一句话，是行级标签；cite常用于引用作品名、书画名等。
<blockquote cite="www.baidu.com">块引用</blockquote>
<q cite="www.baidu.com">q标签，段引用</q>
<cite cite="www.baidu.com">cite引用</cite>
三、字号调整标签
字体大一号和小一号，但是已经被淘汰，修改字体统一使用CSS。
<small>小一号字体</small>
<big>大一号字体</big>
四、图片标签：
【img图片标签】
1、src属性：表示图片所在的路径。
[路径的表示方式]
（1）、网络上的图片地址可以直接使用，并不建议使用。
（2）、可以使用图片的绝对路径 。但是严禁使用绝对路径，因为绝对路径使用file：//协议，网页使用http：//协议打开无法访问
file：//协议的文件
file：///C：/新建文件夹/书.jpg 绝对路径写法：file：///盘符：/文件路径
（3）、使用相对路径，推荐使用的唯一方式。
① 图片在当前文件的下一层，“文件夹名/图片名”。
② 图片在当前文件的同一层，直接写图片名就可以了。
③ 图片在当前文件的上一层，”../图片名“。
注意：图片必须包含在项目里面，不能退出项目根目录
2、width height 宽度、高度属性。
3、title：鼠标指上时显示的文字。
4、alt：图片加载不出来的时候显示的内容，省略alt将默认显示title中的内容。
5、align：图片周围的文字，相对于图片的排列方式，有以下几个可选值:
top文字居上、center文字居中、bottom文字居下。
<img src="img/书.jpg" width="100" height="100" title="鼠标" alt="111" align="center" />
五、 链接标签
【a标签 超链接】
1、href属性：超链接跳转的地址，可以是网络连接，也可以是本地html文件的相对路径。
2、target属性：超链接新页面打开的位置。-self在当前页面打开（默认）、-blank在新页面打开
3、title属性：鼠标指在超链接上显示的文字。
【功能性超链接】
1、mailto：给指定邮箱发送邮件
<a href="mailto://liudapeng0311@163.com">点击给刘大鹏发邮件</a>
2、tencent：与制定qq聊天
<a href="tencent://message/?uin=807911788">点击和刘大鹏一对一聊天哦</a>
3、锚链接：点击超链接，可以跳转到页面的制定位置（锚点）
①在页面的指定位置定义一个锚点：
<a name="top"></a>
②将超链接的href属性改为“#锚点名称”
<a href="#top">点击返回顶部</a>
③跳转到其它页面指定锚点的方式
<a href="其它页面地址.html#锚点名称">点击跳转其它页面指定位置</a>
<div style="width: 100%;height: 800px; "></div>
<a href="01-HTML基本标签-Head部分.html" target="_blank" title="文字">这是一个超链接</a>
<a href="mailto://liudapeng0311@163.com">点击给刘大鹏发邮件</a>
<a href="tencent://message/?uin=807911788">点击和刘大鹏一对一聊天哦</a>
<a href="#top">点击返回顶部</a>
六、 其他的行级标签（了解即可）
1、<u>u标签带下划线</u>
<span style="text-decoration: underline;">css实现下划线</span>
2、 <s>s标签带删除线</s>
<span style="text-decoration: line-through;">css实现删除线</span>
3、 <!--定义专业术语 -->
dfn 定义专业术语 abbr 专业术语缩写词
我们正在学习<dfn>HTML5</dfn>，简称为<abbr>H5</abbr>。
4、 <pre> <code> </code></pre>
<!--
code标签：提示搜索引擎，当前为一段计算机代码。
但是code不会保留代码格式，需要配合pre标签共同使用。
-->
<pre>
<code>
jsLoader({
name : 'iplookup',
url : 'http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js'
});
</code>
</pre>
5、 <var> </var> 表示变量
<var>x</var>+<var>y</var>=1
6、 <bdo dir="rtl"> </bdo>
bdo：定义文本的显示方向
有一个重要属性dir： ltr 从左往右显示 、 rtl 从右往左显示
7、<kbd>Esc</kbd>
表示需要用户输入的文字
请输入“<kbd>Esc</kbd>”退出系统。
8、 H<sub>2</sub>O X<sup>2</sup>
sub 下标 sup 上标
9、<time>16:10</time> 表示时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常见的行级标签</title>
</head>
<body>
<a name="top"></a>
<!--span（文本）-->
<span style="color: red;font-size: 36px;background-color: yellow;">这是span中的文字（作用：无实际意义，对于某些<span style="color: blueviolet;">特别的文字</span>进行样式修改时用此标签包裹）</span> <br />
<!--em（强调）-->
这是一句话，<em>重点</em>在这里
<!--两者都是斜体，但前者拥有更着重的语气，而后者不具备这一点--> <br />
<!--i（倾斜）-->
这是一句话，<i>重点</i>在这里 <br />
<!--strong（强调）-->
这是一句话，<strong>重点</strong>在这里
<!--两者的区别同上--> <br />
<!--b（加粗）-->
这是一句话，<b>重点</b>在这里
<!--[注意] 1.强调程度来说： strong>em；
2.HTML5语言，要求标签尽可能的
实现语义化。（strong与em所包含的b与i不具备的强调含义）
--> <br />
<!--q（短引用）显示为文字用引号包括-->
<q cite="">知识短引用中的文字</q> <br/>
<!--small（缩小字体）big（放大字体） 【两者可以多重嵌套,但不常用】-->
<small>这个<small>比上面的<small>小</small></small></small>
<br/>
<big>这个<big>比上面的<big>大</big></big></big> <br />
<!--img（图片）
1.src: 表示引用图片的地址
路径地址的写法：a.★相对路径：以当前文件为准去寻找图片地址。
与当前文件处于同一层的图片直接写图片及其后缀名；
图片在当前文件下一层：文件夹名/图片名
图片在当前文件上一层：../图片名
b.绝对路径：严禁使用！！例如file:///D:/111.gif
c.网络地址：网络上的图片链接。但是，一般不使用。
2.height width ： 图片的高度和宽度，可以用css样式(style="height: ;width: ;")所代替
3.title ：图片的标题，当鼠标之上后显示的文字。
4.alt:当图片无法加载的时候显示的文字。
*5.Align：图片两边文字所对应图片的位置。（top center bottom）
-->
<img src="此处为网络地址"/>
<!--以上为网络地址写法-->
<img src="此处为路径"/>
<!--以上为绝对路径写法-->
<img src="../img/ivicon.png"/>
<img src="ivicon.png" />
<img src="练习用图/ivicon.png" />
<!--以上为相对路径写法-->
<a name="weixin"><img src="练习用图/ivicon.png" style="height:100px ;width:100px ;"title="哈啊哈" alt="这里没显示"/></a>
<br />
<img src="QQ图片20170223092045.jpg"/ align="center">12333333333
<br />
<!--a（超链接）
1.href:超链接的路径(网络连接或者本地文件)，路径确定同img。
2.target:blank 新页面打开 self 自身跳转
3.title:同上
4.rel（了解）：指定当前文档与被连接文档的关系
prev（前一片）
next（后一篇）
★icon (被链接图片是当前文档的图标)
★stylesheet（被链接文档是当前文档的样式表）
prefetch（预加载，当你在当前文档加载完成，利用空余时间，预加载即将链接文档）
5.锚链接：
a.本页面锚链接 s1.设置锚点<a name="name"></a>
s2.在超链接上使用 #name 跳转到对应锚点
b.页面间锚链接
在即将跳转的页面某位置设定锚点<a name="name"></a>
在超链接的href属性中使用"页面地址.html#name"
6.功能性链接：
mailto：邮箱地址 用于给指定邮箱发送文件
tencen://message/?uin=qq号码 给指定qq发送消息 -->
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#weixin" target="_self">这是一个超链接，去看微信的</a>
<a href="练习1.html#qq" target="_self" title="aaaaa">这个是练习一，自身跳转的</a>
<a href="mailto:xxxxxxx@qq.com">这里发邮件</a>
<a href="tencen://message/?uin=xxxxxxx">这里发信息</a>
<a href="ivicon.png" target="_blank">picture</a>
</body>
</html>
【W3C倡导的web结构】
1、内容与表现分离。html与css分离
2、内容与行为分离。html与javascript分离
3、html代码，必须要实现语义化。
【W3C的规范】
1、标签名和属性名必须小写
2、html标签必须关闭
3、属性值必须用引号括起来
4、标签必须正确嵌套
（1）、嵌套的标签不能发生交叉
（2）、块级标签可以包裹行级标签，行级标签不能包裹块级标签；p标签不能包裹p标签等。
PART-4 HTML表格
【表格table】
表格中的每一行用tr表示，一行中的每一单元格用td表示；
th表示的是表头，表头中的文字默认加粗居中，是用来替换td。
【table的常用属性】
1、border：给表格加边框。默认给所有的td加边框，并且给整个表格加外边框。当增大border值时，td上的边框
不变化，只有最外层边框变宽。
2、cellspacing:表示单元格间距。cellspacing="0"表示单元格间距为零，但线仍为两条线宽。
[注意]表格边框合并的CSS写法：
style="border-collapse: collapse;"
这条CSS与cellspacing="0"的区别
cellspacing="0"仅将单元格间距变为零，实际边框线仍为两条线宽
border-collapse: collapse;是将相邻的两条边框线进行合并，只存在一条线（一旦合并，cellspacing将失效）
3、cellpadding：单元格中文字与单元格边框的距离。（单元格内边距）
4、height：表格的高度；width：表格的宽度。
举例：<table height="400" width="500"></table>
CSS写法<table style="height:400px; width:500px"></table>
5、align：设置表格在浏览器中的位置，（不建议使用），其可选值仅有左中右三种（left、center，right）。 【注意事项：相当于让表格浮动，会影响其后的元素的原有排列方式】
6、bgcolor：背景色； bordercolor：边框颜色
7、background：背景图，背景色与背景图同时存在时，背景图会覆盖背景色。
【tr与td常用属性】
1、height：单元格的高度；width：单元格的宽度
2、bgcolor：背景色，当表格的属性与行列的属性发生冲突时，谁进就用谁。即table<tr<td。
3、align：设置单元格中的文字水平对其方式（其可选值为左中右 right、center、left）。
4、valign：设置单元格中的文字垂直对其方式（其可选值上中下top、middle（center）、bottom）
5、nowrap：当单元格文字过多时，设置单元格文字不断行显示，但会把表格的宽度撑大。
【表格的跨行与跨列】
1、跨列：在td上使用属性colspan="n"进行跨列，如果一个单元格跨n列，则其右侧n-1个单元格需要去掉。
2、跨行：在td上使用属性rowspan="n"，进行跨行，如果一个单元格跨n行，则其下边n-1个单元格需要去掉。
【注意】
当表格属性与行列属性相冲突时，以行列属性为准 （近者优先！！！）
table中的align控制表格在整个浏览器中的显示位置！
单元格中的align控制其中文字在单元格中的对齐方式！
表格的align属性并不影响单元格内文字的水平对齐方式！
tr的align属性可以控制一行中所有单元格的水平对齐方式
【表格的结构化】
完整的表格结构，包括以下几个部分：
caption：表格的标题，无论caption标签放在表格的第几行，表格的标题都在表格的正上方居中
thead：表格的头部部分，永远在表格的最上部
tbody：表格的身体部分，在thead之下，tfoot之上
tfoot：表格的尾部，永远在表格的最下部
表格的直列化
表格有几列，就可以在表格的最上方写几个<col />标签，每个<col />就对应着第几列，可以对<col />标签修改样式、添加name等
属性，表示这一列所有的td同步修改。
如果需要对多列修改共同样式，可以使用<colgroup></colgroup>包裹多个<col />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table width="500" height="200" border="5" style="border-collapse:collapse" cellpadding="20" align="center" bgcolor="aqua" bordercolor="red">
<caption>我是表格的标题</caption>
<tr>
<th width="150" bgcolor="bisque"align="left"valign="top"nowrap="nowrap">表头1</th>
<th colspan="3">表头2</th>
</tr>
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
</body>
</html>
PART-5 HTML表单（form)
1、 form表单的两个重要属性
action：表示表单提交的服务器地址
method：表单提交数据的方式，可选值有get、post两种。
2、get、post的区别
get通过URL传递数据，所有内容在URL（地址栏）可以看到不安全，而post无法看见，比较安全。
get传递的数据量是有限的且只能传递文本信息，而post可以传递大量数据并且可以传递图片、视频等其他文件类型。
get传输速度比post快（这是get的唯一一个优点）
3、get使用URL传递数据的格式
http：//URL地址.html？name1=value1&name2=value2从： “？”表示参数传递的开始，多个参数之间用and符号间隔，同一个参数
用name来标识value。
http://127.0.0.1:8020/025454.html?username=123&password=123
所以使用表单时，input输入框的name属性一定不能省略， 如果省略input的name属性，则这个input的数据不会往后台传递
4、input的常用属性
（1） type：声明input输入框是什么类型。
（2） name：给input输入框起名字，传递数据时使用name=value的形式传递。
（3） value：给input输入框提供的默认值
（4） placeholder：输入框的提示文本，默认当输入框为空时显示，当输入文字时消失。（本身存在value时不显示）
（5） checked=“checked”设置单选框或者复选框的默认选中
（6） disabled=“disabled”禁用，一旦使用disabled禁用的输入框，在传递数据时，将不再往后台传递。
hidden=“hidden”将输入框隐藏，但是隐藏的内容依然可以向后台传递。（后期经常用到）
相当于<input type="hidden" name="username" value="刘大鹏" />
注意：像以上这种属性名等于属性值的写法，可以省略属性值。
5、input属性中type的类型
text：表示为文本输入框，输入的内容正常显示
password：表示为密码输入框。输入的内容显示为小黑点
radio：表示为单选按钮
注意：其中的value属性不能省略，往后台传递值时传递的是value中的值
radio标签凭借name属性判断是否是同一组标签name相同为同一组标签，同一组当中只能选一个。
使用checked=“checked”，可以设置默认选中项，这种属性名等于属性值的写法，可以省略属性值。
例如：checked=“checked”相当于只写checked
checkbox：表示多选框，其它与单选按钮radio相同
file：表示文件上传框，点击可以选择文件上传。
accept属性可以限制上传何种类型的文件，“*”表示可以接收所有文件，"image/*"只能接收图片文件。
multiple="multiple"：设置可以上传多个文件。
submit：表示为提交按钮，点击可以提交整张表单
reset：表示重置按钮，点击将表单恢复到初始状态。
image：图形提交按钮。使用src属性导入一张图片，与submit按钮都具有提交表单的功能。
button：只是按钮形状，没有任何作用。
6、select下拉选择区块
（1） select标签中的多个选项，用option表示。
（2）一个select组合只能有一个name，所以使用时需要给select标签起name，而不是给option标签起name。
（3） option标签如果有value属性，则传递数据时将传递value的属性值，如果没有value属性，则传递时将传递option标签中间
的文字。
（4）option标签的title属性，表示鼠标指上之后显示的文字
（5）给option标签加上selected=“selected”表示默认选中项。
（6）给select标签加multiple="multiple"表示这个下拉框可以多选，但是这个属性几乎不用
（7）<optgroup label="组名"></optgroup>用于将所有的option标签进行分组，使用label属性表示组名。具体用法如下：
<select name="city">
<optgroup label="沿海">
<option>青岛</option>
<option>烟台</option>
</optgroup>
<optgroup label="内陆">
<option>潍坊</option>
<option>济南</option>
</optgroup>
7、textarea文本域
（1）文本域可以使用cols（宽）和rows（高）设定宽高，但是我们几乎不用，我们使用CSS样式：
style="height: 50px; width: 50px;"来设定大小。
（2）使用CSS样式style="resize: none;"设定文本域的大小不允许拖动缩放
（3）使用属性readonly="readonly"设置文本域为只读，不允许修改
（4）CSS样式overflow用于设置超出区域的文字如何显示； 其可选值有三个
hidden：超出区域的文字直接隐藏，无法看到
scroll：无论文字多少，都会显示水平和垂直方向的滚动条
auto：默认效果，文字少时无滚动条，文字多时，自动显示垂直滚动条。也可以使用overflow-x和overflow-y单独设置水平
和垂直方向的滚动条是否显示.
8、HTML5智能表单
（1）H5为我们提供了input与form的关联的新方式，并不需要input必须包含在form里面。
如果input在form外面，只要给form标签起一个id，让input标签通过form属性关联这个id，即可实现input与form的关联
例如<form id=“ff”></form>,则<input form="ff"/>
（2）H5给我们提供了一些新的input的type类型：如date、number、url、email、range等。
（3）H5给我们提供的input新属性
placeholder：输入框的默认提示内容
form：让表单外面的input关联表单id，实现input与form表单关联
required="required"：设置input为必填
pattern：验证input的模式（后面将讲）
autofocus="autofocus"：设置input自动获得焦点
autocomplete="off"：关闭自动提示完成功能，此功能浏览器会默认开启，设置为off会关闭，设置为on会打开。
以下举例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<input type="color" name="1" form="1">
<form action="" method="get" id="1">
<table >
<tr>
<td>用户名</td>
<td><input type="text" name="username" placeholder="请输入用户名" hidden="hidden"disabled="disabled"value="11111"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password" placeholder="请输入密码"/></td>
</tr>
<tr>
<td><input type="submit" value="注册"/></td>
</tr>
<tr>
<td><input type="reset" value="清空"/></td>
<td><input type="file" name="value"/></td>
</tr>
<tr>
<td><input type="button" value="这个按钮没啥用！"/></td>
</tr>
<tr>
<td>头像</td>
<td><input type="image" src="练习用图/ivicon.png"/></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sex" value="man" checked="checked"/>男
<input type="radio" name="sex" value="women" />女</td>
</tr>
<tr>
<td>爱好</td>
<td><input type="checkbox" name="hobby" value="sleep" />睡觉
<input type="checkbox" name="hobby" value="eat" />吃饭
<input type="checkbox" name="hobby" value="play" />打豆豆</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<option value="1" title="11111111111">青岛</option>
<option value="2" title="11111111111">烟台</option>
<option value="3" title="11111111111">济南</option>
<option value="4" title="11111111111">潍坊</option>
</select>
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<optgroup label="山东省">
<option value="1" title="11111111111">青岛</option>
<option value="2" title="11111111111">烟台</option>
<option value="3" title="11111111111">济南</option>
<option value="4" title="11111111111">潍坊</option>
</optgroup>
<optgroup label="还是山东省">
<option value="1" title="11111111111">青岛</option>
<option value="2" title="11111111111">烟台</option>
<option value="3" title="11111111111">济南</option>
<option value="4" title="11111111111">潍坊</option>
</optgroup> </select>
</td>
</tr>
<tr>
<td colspan="2">
<textarea style="width: 100px;height: 150px;resize: none;" readonly="readonly">
这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！这里是服务协议！
</textarea>
</td>
</tr>
</table>
</form>
</body>
</html>
PART-5 HTML语义化标签
HTML5语义化标签（用于一个网站整体布局的划分）
1、header：表示网站或者文章的头部
2、footer：表示网站或者文章的底部
3、section：表示网站或者文章的一个章节，也就是文章的一大块区域
4、acticle：表示一篇文章
5、aside：表示与文章相关但是又不属于文章的一部分，比如热门推荐等
6、hggroup：用于包裹一组标题标签h1-h6
7、nav：表示一个导航栏
上述标签仅仅表示语义化，实际上作用与div相同。
第一部分----HTML的基本结构与基本标签的更多相关文章
- 今天我们要说的画一个三角形，恩，画一个三角形，第一种呢是利用我们的html标签结合css来实现；而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕，那么顾名思义就是在网页里建造一个画板，用来画画，好，那接下来就和我一起去看看吧！
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- Ionic-wechat项目边开发边学（二）：目录结构，header标签与路由
之前一直跟Linux驱动打交道,上层应用几乎为零,业余时间也不是很多,所以博客也不会写的非常详细,大家有问题尽管评论哦, 我有空会及时回复! 摘要 上一篇文章主要介绍了ionic的开发环境配置, 以及 ...
- Golang通过反射获取结构体的标签
Golang通过反射获取结构体的标签 例子: package main import ( "fmt" "reflect" ) type resume struc ...
- Ionic学习记录（一）：ionic及cordova安装、创建第一个应用、项目结构
目录: 一.ionic的安装 二.创建第一个应用程序 三.浏览器中预览应用 四.项目结构 五.添加页面 一.ionic的安装 使用Ionic创建和开发应用程序主要通过Ionic命令行实用程序(“CLI ...
- 读《深入理解Java虚拟机》有感——第一部分:Class文件的结构
1.产生 源码(.java文件)——>编译器(如:javac)——>字节码(.class文件)——>虚拟机(如:HotSpot)执行 2.Class文件 1)构成: ...
- HTML5的文档结构和新增标签
一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
- HTML介绍、文档基本结构、meta标签、HTML标记的语法
一.HTML的介绍 Hyper Text Mark-up Language 超文本标记语言,是一种描述性标记语言(不是编程语言),主要用于描述网页(可以有图像,文字,声音,等..)但没有交互性 HTM ...
- 小K的H5之旅-HTML的基本结构与基本标签
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...
- HTML的正确入门姿势——基本结构与基本标签
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...
随机推荐
- Obj-C 实现 QFileDialog函数
Obj-C 实现 QFileDialog函数(getOpenFileName/getOpenFileNames/getExistingDirectory/getSaveFileName) 1.getO ...
- Scikit-Learn框架
1. Dataset scikit-learn提供了一些标准数据集(datasets),比如用于分类学习的iris 和 digits 数据集,还有用于归约的boston house prices 数据 ...
- 实现多条件模糊查询SQL语句
很多网友问到如何写模糊查询语句和多条件查询,这里我整理了一下,假设以姓名.性别.电话号...作为数据库中的字段名. 通常写一个简单的模糊查询的SQL语句格式可以如下例: sql="selec ...
- JSP 页面传值方法总结（转）
原文地址:http://www.cnblogs.com/java-class/p/6358964.html 阅读目录 1. URL 链接后追加参数 2. Form 3. 设置 Cookie 4. 设置 ...
- MySQL 网络访问连接
查看 /etc/hosts配置文件 [hotspot@bogon ~]$ cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localh ...
- 如何理解 Python 的赋值逻辑
摘要: 如果你学过 C 语言,那么当你初见 Python 时可能会觉得 Python 的赋值方式略有诡异:好像差不多,但又好像哪里有点不太对劲. 本文比较并解释了这种赋值逻辑上的差异.回答了为什么需要 ...
- CSS 常用样式 提高网页编写速度
*{margin:0px;padding:0px;}/*内外边距初始化*/html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, t ...
- Java中"==" 和 equals 的区别
"=="比较的是地址值 equals 比较的是内容 看例子能够更加清晰的理解 eg: String s1="java",s2="java"; ...
- 调试大叔V1.0.1(2017.09.01)|http/s接口调试、数据分析程序员辅助开发神器
2017.09.01 - 调试大叔 V1.0.1*支持http/https协议的get/post调试与反馈:*可保存请求协议的记录:*内置一批动态参数,可应用于URL.页头.参数:*可自由管理cook ...
- JAVA奇技淫巧简化代码之lombok
背景 最近在做一个小功能,又不想在原有体态臃肿的项目中追加,为了调试方便并且可以快速开发就采用了springboot.由于使用了JPA,建了几个类,然后通过IDE去生成其属性的构造器.getter.s ...