HTML基础&结构

什么是HTML

HTML版本以及历史

HTML5

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas svg webgl标记。 HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：

支持Html5的浏览器包括Firefox，IE9及其更高版本，Chrome，Safari，Opera等；搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力

HTML5声明标签

<!DOCTYPE> 声明是文档中的第一个成分，位于标签之前该标签告知浏览器文档所使用的 HTML 规范

<!DOCTYPE HTML>

注释：<!DOCTYPE> 标签没有结束标签！提示：<!DOCTYPE> 对大小写不敏感。在所有 HTML 文档中规定文档类型很重要，这样浏览器才能了解所预期的文档类型。

HTML基本结构

<!DOCTYPE HTML>
<html>

    <head>
        <title>我的第一个网页</title>
    </head>
    <body>
        Hello world~
    </body>
</html>

HTML基本元素

<br />

属性	说明
align	对齐方式（left，right， center）

<p>这是一个段落<p/>

<h1>标题1<h1/>

<h2>标题2<h2/>

<h3>标题3<h3/>

<h4>标题4<h4/>

<h5>标题5<h5/>

<h6>标题6<h6/>

属性	说明
size	指定线的粗细(px)
width	指定线的长度(px或%)

<hr size="5" width="50%" align="center" />

<b>定义粗体文本</b>

<i> 定义斜体文本 </i>

<s>定义删除文本</s> <del></del>

<u>定义下划线文本</u>

<sup>定义上标字</sup>

<sub>定义下标字</sub>

<pre>标签可以保留文字在源代码中的格式,使得页面中显示的内容和源代码中的格式一致</pre>

<font>这是一段文字</font>

属性	说明
href	定义链接地址
title	链接提示信息
target	链接打开方式(_blank 新的空白页,_self 当前页,_top)

<a href="URL"> ~ </a>

(1). 区分内部外部链接

外部链接：<a href="http://www.163.com"> 网易 </a>
内部链接：<a href="about.html"> 公司简介 </a>

(2). 锚点

锚点(锚点标签用于使用户"跳"到文档的某个部分)
<a name="位置名"> ~ </a>
<a href="#位置名"> ~ </a>

(3). 其他应用链接

<a href="mailto:邮箱地址">邮件链接</a>
<a href="tel:电话号码">一键拨打</a>
<a href="sms:139xxxxxxx">一键发送短信</a>

<img src="URL" width="100" height="100" alt="替代文字" />

属性	说明
shape	热区形状(rect,circle,poly)
coords	形状的坐标值

<img src="URL" usemap="# map 名称" />
<map name="map 名称">
    <area shape="形状" coords="坐标值" href="URL" />
</map>

HTML的特殊字符