半小时学会HTML5-阿里云开发者社区

一、了解几个概念

1、HTML定义

HTML是（Hyper Text Markup Language）超文本标记语言，超文本包含：文字、图片、音频、视频、动画等。

2、W3C 是什么？

W3C 即（World Wide Web Consortium）万维网联盟。W3C标准包括：结构化标准语言、表现标准语言

行为标准。

二、HTML结构和语法

1、HTML基本结构

由头部和主体部分组成，即head 和 body 成对的标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>

2、HTML的基本信息

<title>标签
<meta> 标签

（1）、title标签

TITLE标签主要的作用有两点，一是告诉访客该篇文章的主题是什么，二就是给搜索引擎索引，告诉搜索引擎蜘蛛该篇文章是以什么内容为主题。

（2）、META标签

META标签是HTML标记HEAD区的一个关键标签，它位于HTML文档的head和title之间（有些也不是在head和title之间）。它提供的信息虽然用户不可见，但却是文档的最基本的元信息。 meta除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。

例如：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

必需属性content

meta的必需属性是content，当然并不是说meta标签里一定要有content，而是当有http-equiv或name属性的时候，一定要有content属性对其进行说明。

例如：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

可选属性

对于meta的可选属性说到了三个，分别是http-equiv、name和scheme。

http-equiv

http-equiv属性是添加http头部内容，对一些自定义的，或者需要额外添加的http头部内容，需要发送到浏览器中，我们就可以是使用这个属性。例如我们不想使用js来重定向，用http头部内容控制，那么就可以这样控制：

<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />

在页面中加入这个后，5秒钟后就会跳转到指定页面啦，

name

第二个可选属性是name，这个属性是供浏览器进行解析，对于一些浏览器兼容性问题，name属性是最常用的，当然有个前提就是浏览器能够解析你写进去的name属性才可以，不然就是没有意义的。

<meta name="renderer" content="webkit">

charset

charset是声明文档使用的字符编码，解决乱码问题主要用的就是它，值得一提的是，这个charset一定要写第一行，不然就可能会产生乱码了。

charset有两种写法

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

禁止百度转码

百度会自动对网页进行转码，这个标签是禁止百度的自动转码

<meta http-equiv="Cache-Control" content="no-siteapp" />

SEO 优化部分

<!-- 页面标题<title>标签(head 头部必须) -->
<title>your title</title>
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">

viewport

viewport主要是影响移动端页面布局的，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)

3、标题（H1-H6）标签

标题（H1-H6）标签是指网页html 中对文本标题所进行的着重强调的一种标签，以标签h1、h2、h3到h6依次显示重要性的递减，制作标签的主要意义是告诉搜索引擎这个是一段文字的标题，起强调作用。
标题标签数字越大，字体越小

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

4、段落标签

段落标签间隔相对换行标签要大一些

<p>段落标签</p>
<p>段落标签</p>

5、换行标签

换行标签是单标签
换行标签相对段落标签的间隔要小的多，更加的紧凑

这是换行标签，单标签<br/>
这是换行标签，单标签<br/>

6、水平线标签

<!--水平线标签-->
<hr/>

7、字体样式标签

<strong>粗体</strong>
<em>斜体</em>

8、注释和特殊符号

<!--注释--> 快捷键（ Ctrl + /）
&nbsp;&nbsp;&nbsp;&nbsp;  <!--空格-->
&gt;   <!-- > -->
&lt;    <!- < -->
&copy;  <!-- © -->

9、图像

<!--img标签 src：图片地址，相对地址（推荐使用）和绝对地址 ../ 表示上一级目录
-->
<img src="../resources/image/2.jpg" alt="text" title="这是一张图" width="200" height="200">
</body>
</html>

10、链接标签

<a href="" target=""></a>

11、无序列表标签

<ul>
    <li>3</li>
    <li>2</li>
    <li>5</li>
    <li>4</li>
    <li>1</li>
</ul>

12、有序列表标签

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

13、定义列表标签

<dl>
    <dt>姓名</dt>
    <dd>年龄</dd>
    <dd>昵称</dd>
</dl>

14、表格标签

<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>

15、视频元素 video标签

<video src="../resources/video/1234.mp4" controls></video>

16、音频元素 audio标签

<video src="../resources/video/1234.mp3" controls></video>

17、页面结构

head： 标题头部区域的内容（用于页面或页面中的一块区域）

<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
</head>

footer： 标记脚部区域的内容（用于整个页面或页面的一块区域）

<footer>
    <h2>网页脚部</h2>
</footer>

section： Web页面中的一块独立区域

<section>
    <h2>网页主体</h2>
</section>

article： 独立的文章内容

aside：相关内容或应用（常用于侧边栏）

nav ：导航类辅助内容

18、iframe 内联框架

<iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe>

三、表单及表单标签的应用

1、form 表单标签

<!--  action ：表单提交的位置 可以是网站也可以是一个请求处理的地址
       method：post-get 提交方式
               get 方式不安全可以在url看到提交的信息 不安全但是高效 不能传输大文件
               post 比较安全 可以传输大文件
-->
<form action="1.html" method="post">
<!--    文本输入框 input type="text"-->
    <p>名字：<input type="text" name="username"></p>
<!--    密码框 input type="password"-->
    <p>密码：<input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>

2、下拉框

<p>下拉框：
        <select name="列表名称">
            <option value="ZH">中国</option>
            <option value="JA">日本</option>
            <option value="AM">美国</option>
            <option value="RS" selected>瑞士</option>
        </select>
   </p>

3、多行文本输入框

<p>多行文本输入框：
        <textarea name="textarea" id="" cols="30" rows="10">文本内容</textarea>
 </p>

4、文件

<p>
        <input type="file" name="files">
        <input type="button" name="update" value="上传">
 </p>

5、邮箱

<p>邮箱：
       <input type="email" name="email">
</p>

6、url

<p>url：
    <input type="url" name="url">
</p>

7、number 数字输入

<p>商品数量：
    <input type="number" name="number" max="100" min="0" step="10">
</p>

8、range 滑块

<p>音量
    <input type="range" name="voice" max="100" min="0" step="1">
</p>

9、搜索框

<p>搜索框：
    <input type="search" name="search">
</p>

10、隐藏域，存在仅仅是隐藏

<input type="text" value="" name="" hidden>

11、只读

<input type="text" value="" name="" readonly>

12、禁用

<input type="text" value="" name="" disabled>

13、表单验证

为什么要进行表单验证？

减轻服务器的压力
保证数据的安全性

常用方式：

placeholder 文本框添加提示信息

required 非空判断

pattern 正则表达式

<!--   文本框添加提示信息 + 非空判断-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>

<!--  邮箱正则表达式 -->
<p>邮箱：
        <input type="email" name="email" pattern="[1-9]\d{7,10}@qq\.com">
</p>

半小时学会HTML5