前端学习笔记 HTML5 基础
关于HTML与HTML5
HTML是一种标记语言，而不是编程语言。
HTML出现于1991年。
HTML5出现于2012年。
XHTML5出现于2013年。
元素，标签和属性
元素：元素指的是从开始标签到结束标签的所有代码。
标签：承载HTML的主要内容，形如<标签>。
属性：从属于标签，为可选参数，形如<标签 属性 = "值">。
块元素与内联元素
块元素：通常以新行开始，如<h1>，<p>，<ul>，<div>。
内联元素：通常不以新行开始，如<a>，<b>，<img>，<span>。
HTML5空文档
HTML5空文档如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
是HTML5的声明方式。
不同的HTML和XHTML版本有不同的声明方式。
<html lang="en">
html标签，定义这是一个html文档。
属性lang指定语言，如"ch"，"en"等。
</html>
闭标签，大多数标签需要使用</标签名>的方式来闭合。多数IDE提供自动补全（闭合）。
<head></head><body></body>
head表示头部，body表示内容。
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<meta>标签定义关于 HTML 文档的元信息。charset属性用来定义字符集。<title>标签包含的内容就是HTML文档的标题。
标签简介
h1~h6：标题
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
代码结果：
大小不同的6个标题。从1到6是从大到小。
p：段落
采用p标签：
<p>段落一</p>
<p>段落二</p>
代码结果：
不采用p标签：
段落一
段落二
代码结果：
a：锚
<a href="index.html">文字内容</a>
可以用来定义超链接。
使用a标签做页内跳转
<a name="one">内容1</a>
<a href="#one">跳转到内容1</a>
用第一个标签指定name，第二个a标签href连接到#name。
内容跨篇幅很大时可用性很高，直接在一个页面内点击跳转。
img：图片
<img src="myjpg1.jpg" width="100px" height="100px " alt="text">
src指定来源，宽高属性指定大小，alt替换文本（图片显示失误时有效）。
可以用来引入图片。
需要注意的是<img>标签不需要闭合。
验证替换文本，代码结果：
a和img的嵌套使用
为图片加超链接
<a href="index.html">文字内容</a>
<img src="myjpg.jpg" width="100px" height="100px>
</a>
br：换行
<br>
<br/>
都是换行操作。
第二种是推荐用法。更适用于当前的操作和代码环境。
span：内嵌文字
<p>文字区域1 <span>文字区域2 </span> </p>
可以通过更改样式，显示出span独立于其他标签的样式结果。
div：划分
<!--定义样式-->
<style type="text/css">
#mydiv{
color: blueviolet;
}
</style>
<div id="mydiv">
<p>内容</p>
</div>
<div>的主要作用是代码块的划分。
顺带一提，css文件中，默认标签直接用，来自属性id就要加#。
属性简介
body标签的bgcolor属性：背景颜色
<body bgcolor="#f0f8ff">
</body>
颜色可以自选。
a标签的target属性：指定打开方式
<a href="index.html" target="_blank">
</a>
取值有多种：
对应当前页面打开（直接覆盖），新窗口打开，父级页面打开等。
align：对齐
p标签，a标签，h1~h6标签，div标签，img标签。
可选centor等取值，指定对齐方式。
p标签的align属性已被弃用，HTML 4.01 Strict和XHTML 1.0 Strict DTD均不支持此属性。
请用CSS作为替代。
CSS语法：<p style="text-align:right">
class：类名
大多数标签拥有此属性，表示类名。
<a class="hidden">
</a>
id：标识符
大多数标签拥有此属性，人工指定identification，后续添加css样式等。
<a id="xxx">
</a>
style：样式
大多数标签拥有此属性，用来定义内联css样式。
<a style="target: above">
</a>
title：额外信息
大多数标签拥有此属性，用来定义额外信息。
<a title="xxx">
</a>
文字格式化
<b>粗体字</b>
<big>大号字</big>
<em>着重字</em>
<strong>强调字</strong>
<i>斜体字</i>
<small>小号字</small>
<sub>下标字</sub>
<sup>上标字</sup>
<ins>插入字</ins>
<del>删除字</del>
其中big标签被标记为弃用。
代码结果：
引入CSS样式
外部引入：link，rel、type、href
方便测试，新建一个css文件使用
创建css文件，New一个File
命名为mycss.css
随便加一点颜色设置进来：
h1{
color: #b3d4fc;
}
外部引入过程：
<link rel="stylesheet" type="text/css" href="mycss.css">
其中rel属性为"stylesheet"，type为"text/css"，href属性指定css文件位置。
测试代码：
<!--测试-->
<h1>标题h1</h1>
代码结果：
内部引入：style，type
内部引入过程：
<style type="text/css">
h2{
color: aqua;
}
</style>
测试：
<!--测试-->
<h2>标题h2</h2>
代码结果：
内联引入：style属性
内联引入过程：
<h3 style="color: blueviolet">
标题h3
</h3>
代码结果：
表格
代码：
<table border="10" cellspacing="2">
<caption>表格</caption>
<tr>
<th>line1</th>
<th>line2</th>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
</table>
表格需要用到<table>标签。border属性定义边界长度，cellspacing属性定义单元格间隔。
此外还有bgcolor可以定义填充色，background可以定义填充图片。（没有展示）<caption>定义了标题。<tr>是行，<td>是列。<th>表头。
代码结果：
列表
无序列表ul
列表：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<li>定义列表元素
代码结果：
更改图标：
<ul type="disc">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
列举type的可选属性（此处无法用补全）：disc为实心原点，circle为空心圆，square为实心方块。
有序列表ol
列表：
<ol type="A" start="10">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
start属性指定起始值。type属性同样为指定列表标号的类型，可选值有：A、a、I、i。
代码结果：
嵌套列表
<li>标签的内容同样可以是一个新的列表。
<ul type="circle">
<li>1</li>
<li>2</li>
<li>
<ol type="I" start="18">
<li>31</li>
<li>32</li>
</ol>
</li>
</ul>
代码结果：
自定义列表：dl、dt、dd
代码：
<dl>
<dt>1</dt>
<dd>1d</dd>
<dt>2</dt>
<dd>2d</dd>
</dl>
代码结果：