HTML5：简介与常用标签
html 文档结构
html（hyper text markup language 超文本标记语言）基本文档结构是指组成一个基本的html页面所必须的元素标签。它的根节点是由一个文档声明 “<!doctype html>” 和一个“<html>”标签组成的，而<html>标签下级（又称“子节点”）又包含“<head>”和“<body>”两个主要的标签，具体编写格式如下：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
</body>
</html>
html 标签
html标签是由标签名、属性名、属性值和内容组成。
html 元素类别
html 元素分为 块级元素、行内元素以及行内块元素。
块级元素：单独占一行（换行），具备大小尺寸；
行内元素：不单独占一行（不换行），不具备大小尺寸；
行内块元素：不单独占一行（不换行），具备大小尺寸；
html 常用标签
文本标签
标题：h1~h6 （块级标签）
文本：span （行内标签）
段落：p （块级标签）
强调：em （行内标签）
粗体：b （行内标签）
斜体：i （行内标签）
语义化标签
头部：header
尾部：footer
导航：nav
文章：article
章节：section
侧栏：aside
地址：address
时间：time
标记：mark
布局：p
引用：blockquote
文档主要内容：main （块级标签）
格式化标签
换行：br
水平分割线：hr
html 常用转义字符
"："
&：&
<：&at;
>：>
©：©
®：reg;
￥：¥
空格：
html 超链接 ‘a’
a 标签是一个行内块标签
常用属性
href：指定链接地址
target：规定“href”属性中指定的网页或文件以何种方式行进跳转或打开，其值包括：_blank、_self、_parent、_top以及iframe的name属性的值
利用超链接跳转到本页锚点
将标签的“href”属性设置为“#”+“指定元素的id值”后，该超链接不再是进行页面间的跳转或是文件的打开了，而是将页面滚动到本页面中id属性值和“href”属性值“#”后的值所对应的值的地方，页面滚动的目标元素的上边缘将和内容窗口上边缘重合。
<p id="anchor"></p> <a href="#anchor">点击跳转到锚点</a>
利用超链接下载指定文件
加上“download”属性，并指定一个文件下载后的名称即可。
超链接的回到顶部按钮
将href属性值设置为‘#top’即可。
嵌入式框架 iframe
常用属性
name：设置iframe的名称
width：设置iframe的宽度，值可以为像素（不用添加“px”单位）和百分数
height：设置iframe的高度，值可以为像素（不用添加“px”单位）和百分数
src：设置iframe元素内需要显示页面或文件的url地址，该属性的值可以由与之关联的a标签点击设置（通过将a标签的“target”属性的值设置为该iframe的“name”属性的值进行关联）
frameborder：设置是否显示边框（0 表示不显示边框/ 1 表示要显示边框）
scrolling：设置是否允许滚动（quto/yes/no）
列表
html 列表包括无序列表、有序列表以及定义列表，其显示类型为块级元素。
无序列表 ul
常用属性
type：列表项目符号类型（disc（默认）/circle/square）使用示例
<ul>
<li>无序列表01</li>
<li>无序列表02</li>
<li>无序列表03</li>
</ul>
有序列表 ol
常用属性
type：列表项目符号类型（1（默认）/a/a/i/i）
reversed：倒序
start：起始值
使用示例
<ol>
<li>有序列表01</li>
<li>有序列表02</li>
<li>有序列表03</li>
</ol>
定义列表 dl
定义列表分为两层：第一层为定义的列表dl；第二层分为两个部分，即dt和dd，dt用于定义列表中的项目，dd用于描述定义的项目，它们的显示类型都为“块级元素（block）”。相对于“无序列表”和“有序列表”，这种列表由于其自身的结构原因，对需要进行名词性描述的列表更为适用。
使用示例
<dl>
<dd>html</dd>
<dt>创建web页面</dt>
<dd>css</dd>
<dt>设置页面样式</dt>
<dd>javascript</dd>
<dt>让页面动态起来</dt>
</dl>
列表嵌套使用
无序列表与有序列表嵌套使用方式一致，这里以无序列表为例:
<ul>
<li>web前端工程师
<ul>
<li>html</li>
<li>css
<ul>
<li>bootstrap</li>
<li>less</li>
<li>sass</li>
</ul>
</li>
<li>js
<ul>
<li>javascript</li>
<li>jquery</li>
<li>angularjs</li>
<li>...</li>
</ul>
</li>
</ul>
</li>
<li>其他开发工程师</li>
</ul>
运行效果
下一篇： Java入门每日小练04