半小时学会HTML5
一、了解几个概念
1、HTML定义
HTML是（Hyper Text Markup Language）超文本标记语言，超文本包含：文字、图片、音频、视频、动画等。
2、W3C 是什么？
W3C 即（World Wide Web Consortium） 万维网联盟。W3C标准包括：结构化标准语言、表现标准语言
行为标准。
二、HTML结构和 语法
1、HTML基本结构
由头部和主体部分组成，即head 和 body 成对的标签。
Title
2、HTML的基本信息
标签
<meta> 标签
</code></pre>
<p><strong>（1）、title标签</strong></p>
<p>TITLE标签主要的作用有两点，一是告诉访客该篇文章的主题是什么， 二就是给搜索引擎索引，告诉搜索引擎蜘蛛该篇文章是以什么内容为主题。</p>
<p><strong>（2）、META标签</strong></p>
<p>META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的head和title之间（有些也不是在head和title之间）。 它提供的信息虽然用户不可见，但却是文档的最基本的元信息。 meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。</p>
<p>例如：</p>
<pre><code><meta name="keywords" content="HTML,ASP,PHP,SQL">
</code></pre>
<h3>必需属性content</h3>
<p>meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有<code>http-equiv</code>或<code>name</code>属性的时候，一定要有content属性对其进行说明。</p>
<p>例如：</p>
<pre><code><meta name="keywords" content="HTML,ASP,PHP,SQL">
</code></pre>
<h2>可选属性</h2>
<p>对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。</p>
<h3>http-equiv</h3>
<p><code>http-equiv</code>属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：</p>
<pre><code class="prism language-ini"><meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
</code></pre>
<p>在页面中加入这个后，5秒钟后就会跳转到指定页面啦，</p>
<h3>name</h3>
<p>第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。</p>
<pre><code class="prism language-ini"><meta name="renderer" content="webkit">
</code></pre>
<h3>charset</h3>
<p>charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个<strong>charset一定要写第一行</strong>，不然就可能会产生乱码了。</p>
<p>charset有两种写法</p>
<pre><code class="prism language-ini"><meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</code></pre>
<h3>禁止百度转码</h3>
<p>百度会自动对网页进行转码，这个标签是禁止百度的自动转码</p>
<pre><code><meta http-equiv="Cache-Control" content="no-siteapp" />
</code></pre>
<h3>SEO 优化部分</h3>
<pre><code class="prism language-xml"><span class="token comment"><!-- 页面标题<title>标签(head 头部必须) --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>your title<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 页面关键词 keywords --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>keywords<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your keywords<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 页面描述内容 description --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>description<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>your description<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 定义网页作者 author --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>author,email address<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>robots<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>index,follow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<h3>viewport</h3>
<p>viewport主要是影响移动端页面布局的，例如：</p>
<pre><code class="prism language-ini"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</code></pre>
<p>content 参数：</p>
<ul>
<li>width viewport 宽度(数值/device-width)</li>
<li>height viewport 高度(数值/device-height)</li>
<li>initial-scale 初始缩放比例</li>
<li>maximum-scale 最大缩放比例</li>
<li>minimum-scale 最小缩放比例</li>
<li>user-scalable 是否允许用户缩放(yes/no)</li>
</ul>
<h4>3、标题（H1-H6）标签</h4>
<ul>
<li> <p>标题（H1-H6）标签是指网页html 中对文本标题所进行的着重强调的一种标签，以标签h1、h2、h3到h6依次显示重要性的递减，制作标签的主要意义是告诉搜索引擎这个是一段文字的标题，起强调作用。</p> </li>
<li> <p>标题标签数字越大，字体越小</p> </li>
</ul>
<pre><code><h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
</code></pre>
<h4>4、段落标签</h4>
<ul>
<li>段落标签间隔相对换行标签要大一些</li>
</ul>
<pre><code><p>段落标签</p>
<p>段落标签</p>
</code></pre>
<h4>5、换行标签</h4>
<ul>
<li> <p>换行标签是单标签</p> </li>
<li> <p>换行标签相对段落标签的间隔要小的多，更加的紧凑</p> <pre><code>这是换行标签，单标签<br/>
这是换行标签，单标签<br/>
</code></pre> </li>
</ul>
<p>6、<strong>水平线标签</strong></p>
<pre><code><!--水平线标签-->
<hr/>
</code></pre>
<h4>7、字体样式标签</h4>
<pre><code><strong>粗体</strong>
<em>斜体</em>
</code></pre>
<h4>8、注释和特殊符号</h4>
<pre><code><!--注释--> 快捷键（ Ctrl + /）
<!--空格-->
> <!-- > -->
< <!- < -->
© <!-- © -->
</code></pre>
<h4>9、图像</h4>
<pre><code><!--img标签 src：图片地址，相对地址（推荐使用）和绝对地址 ../ 表示上一级目录
-->
<img src="../resources/image/2.jpg" alt="text" title="这是一张图" width="200" height="200">
</body>
</html>
</code></pre>
<h4>10、链接标签</h4>
<pre><code><a href="" target=""></a>
</code></pre>
<p><strong>11、无序列表标签</strong></p>
<pre><code><ul>
<li>3</li>
<li>2</li>
<li>5</li>
<li>4</li>
<li>1</li>
</ul>
</code></pre>
<p><strong>12、有序列表标签</strong></p>
<pre><code><ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</code></pre>
<p><strong>13、定义列表标签</strong></p>
<pre><code><dl>
<dt>姓名</dt>
<dd>年龄</dd>
<dd>昵称</dd>
</dl>
</code></pre>
<h4>14、表格标签</h4>
<pre><code><table border="1px">
<tr>
<td colspan="5" align="center">成绩</td>
</tr>
<tr>
<td rowspan="3">统计</td>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>小明</td>
<td>20</td>
<td>10</td>
<td>30</td>
</tr>
<tr>
<td>小红</td>
<td>80</td>
<td>90</td>
<td>96</td>
</tr>
</table>
</code></pre>
<p><strong>15、视频元素 video标签</strong></p>
<pre><code><video src="../resources/video/1234.mp4" controls></video>
</code></pre>
<p><strong>16、音频元素 audio标签</strong></p>
<pre><code><video src="../resources/video/1234.mp3" controls></video>
</code></pre>
<p><strong>17、页面结构</strong></p>
<p><strong>head：</strong> 标题头部区域的内容（用于页面或页面中的一块区域）</p>
<pre><code><head>
<meta charset="UTF-8">
<title>页面结构
footer： 标记脚部区域的内容（用于整个页面或页面的一块区域）
section： Web页面中的一块独立区域
网页主体
article： 独立的文章内容
aside： 相关内容或应用（常用于侧边栏）
nav ：导航类辅助内容
18、iframe 内联框架
三、表单及表单标签的应用
1、form 表单标签
2、下拉框
下拉框：
3、多行文本输入框
多行文本输入框：
4、文件
5、邮箱
邮箱：
6、url
url：
7、number 数字输入
商品数量：
8、range 滑块
音量
9、搜索框
搜索框：
10、隐藏域 ，存在仅仅是隐藏
11、只读
12、禁用
13、表单验证
为什么要进行表单验证？
-
减轻服务器的压力
-
保证数据的安全性
常用方式：
placeholder 文本框添加提示信息
required 非空判断
pattern 正则表达式
名字：
邮箱：