HTML基础-阿里云大学
image
工作多年，你的基础还剩下多少呢？
浏览器内核
分为 ( 渲染引擎、 JS引擎)
- Trident(IE内核)
- Gecko(Firefox)
- webkit(Safari)
- Chromium/Blink (chrome)
- Presto (Opera)
移动端的浏览器内核是系统内置浏览器的内核
目前移动设备浏览器上常用的内核有 webkit、Blink、Trident、Gecko等。
其中Iphone和Ipad等苹果IOS平台，主要是 webkit，Android 4.4 之前的系统浏览器内核是 webkit，Andorid4.4 系统浏览器切换到了 chromium,内核是webkit的分支 Blink.
Windows Phone8 系统浏览器内核是 Trident.
web标准
由W3C决定。
由 html/css/JS组成
HTML
- 结构：
<html>
<head>
<title></title> 标题标签。作用：让页面拥有自己的名称。会显示在浏览器的 “选项卡” 上面。
</head>
<body>
</body>
</html>
-
文档类型
<!DOCTYPE html> 是告诉我们和浏览器使用哪个版本的 html。这是说明，使用的是 HTML5
-
字符集
UTF-8是目前最常用字符集编码方式。其它常用的编码方式还有 GBK和GB2312
GB2312 简体中文，包括6763个汉字
BIG5 繁体中文 港澳台使用
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持。兼容GB2312
UTF-8 则包含 全世界所有国家需要用到的字符。
记住一点，以后统统使用UTF-8字符集，这样就避免出现字符集不统一而引起乱码的情况了。
<head>
<meta charset='utf-8'></meta>
<title>我是标题</tilte>
</head
THML 标签
排版标签
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
<h1> 标签都是Logo才会使用的
段落 、 水平线 标签
<p> 文本内容 </p> 段落标签
文字会自动换行
<hr /> 水平线 标签
换行标签
<br />
div span 标签
div span 是没有语义的 是我们网页布局主要的2个盒子
div 就是 division 的缩写，分区的意思，其实有很多 div 来组合网页
span ，跨度，跨距，范围
语法格式：
<div> 这是盒子 </div>
<span> 我是范围 </span>
文本格式化 标签
| 标签 | 显示效果 |
|---|---|
<b></b><strong></stong> |
文字以 |
<i></i> 和 <em></em> |
文字以 |
<s></s> 和 <del></del> |
文字以 |
<u></u> 和 <ins></ins> |
文字以 |
<br />
标签属性
<html>    </html> 使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。基本语法格式如下：
<标签名 属性1=“属性值1” 属性2=“属性值2” ... > 内容 </标签名>
在上面的语法中：
- 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面
- 属性之前不分先后顺序，标签名与属性，属性与属性之间均以空格分开
- 任何标签的属性都有默认值，省略该属性则取默认值。
- 采取键值对的格式 key = "value" 的格式。
图像标签：
<img src="图像URL" />
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素（XHTML 不支持%页面百分比） | 设置图像的宽度 |
| height | 像素（XHTML 不支持%页面百分比） | 设置图像的高度 |
| border | 数字 |
链接标签
单词缩写： anchor 的缩写。
创建超链接非常简单，语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式" > 文本或图像 </a>
href：用于指定连接目标的url地址，当为标签应用 href 属性时，它就具有了超链接的功能。
target : 用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值， _blank 是在新窗口中打开.
注意:
- 外部链接，需要添加 http://
- 内部链接 直接链接内部也没名称即可。 比如
<a href="index.html">首页</a> - 如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为 “#” （即href="#"）,表示该链接暂时为一个空链接。
- 不仅可以很创建文本超链接，在网页中各种网页元素，比如 图像、表格、音频、视频等都可以添加超链接。
<br />
锚点定位
通过锚点链接，可以快速定位到目标内容
语法：
分两步
1、将要跳转的地方，用 <a> 标签包裹起来。
<a href="#目标ID名">链接文本</a>
2、在目标 标签 上，加上 ID名字。
比如 <div id="live">个人生活</div>
完整的示例:
<a href="#live"> 我要去 个人生活 段落</a>
...
...
<div id="live"></div>
<br />
base 标签
它是单标签.
强大之处，在于 可以设置整体链接的打开状态。即 统一设置当前网页的 <a> 标签的 target属性值。
使用前:
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="http://www.sina.com" target="_blank">新浪</a>
<a href="http://www.163.com" target="_blank">163</a>
....
...
如果，这个网页有 1000个 需要新打开页面的 <a> 标签的话，这个 target 需要写 1000遍。
使用后:
<head>
<base target="_blank"/>
</head>
<body>
<a href="http://www.baidu.com" >百度</a>
<a href="http://www.sina.com" >新浪</a>
<a href="http://www.163.com" >163</a>
....
...
</body>
使用前后，可以达到相同的效果。
这两种方式，可以在一个页面同时混合使用。
例如:
<head>
<base target="_blank"/>
</head>
<body>
<a href="http://www.baidu.com" >百度</a>
<a href="http://www.sina.com" target="_self">新浪</a>
<a href="http://www.163.com" >163</a>
</body>
这时，百度 和 163 会新开页面打开。而 新浪 会在当前页面打开。
特殊字符 标签
HTML为 特殊字符 准备了 专门的替代 代码
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
|
空格符 | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2(上标2) | ² |
| ³ | 立方3（上标3） | ³ |
<br />
注释标签
<!-- 我是注释 -->
列表 标签
- 无序列表 ul
- 有序列表 ol
- 自定义列表
无序列表
各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下:
<ul>
<li>我是列表第一行</li>
<li>我是列表第二行</li>
<li>我是列表第三行</li>
...
</ul>
示例:
<html>
<ul>
<li>我是列表第一行</li>
<li>我是列表第二行</li>
<li>我是列表第三行</li>
...
</ul>
</html>
无序列表，各个列表项的前面有一些黑色的 点 。如果想去掉的话，是CSS 的活儿。 HTML只负责结构。
1. <ul></ul>中只能嵌套 <li></li> ，直接在 <ul></ul>标签中输入 其它标签 或者 文字 都是不被允许的。
比如
<ul>
<li> 列表1<li>
<li> 列表2<li>
<p> 我是段落 </p> <!-- 这是不被允许的，不要这样做. <ul></ul>之间只能是<li></li> -->
<li> 列表3<li>
<li> 列表4<li>
</ul>
可以添加 其它 标签的地方:
<ul>
<li> 列表1<li>
<li> 列表2<li>
<li>
<h4> 我是一个小标题呢 </h4>
<p> 我是段落 </p> <!-- <li></li> 之间是独立的容器，是被允许使用其它标签的 -->
</li>
<li> 列表3<li>
<li> 列表4<li>
</ul>
2. <li> 与 </li> 之间相当于一个容器，可以容纳所有元素
3. 无序列表会带有自己的样式属性。如果要更改，需要CSS的介入。
有序列表
<ol>
<li>美国</li>
<li>英国</li>
<li>中国</li>
<li>俄罗斯</li>
</ol>
示例:
<html>
<ol>
<li>美国</li>
<li>英国</li>
<li>中国</li>
<li>俄罗斯</li>
</ol>
</html>
它会在 列表项的 前面加上 1. 2. 3. 4. 这样的顺序字母。
注意事项与 <ul></ul> 标签是一样的。<ol></ol>之间，只能是 <li></li> ，不能使用其它标签。<li></li>标签中间，可以使用其它标签。
自定义列表
自定义列表常用于，对术语或者名词进行解释和描述。自定义列表项前，没有任何项目符号。
基本语法如下:
<dl>
<dt>名词1</dt>
<dd>名词1 解释1</dd>
<dd>名词1 解释2</dd>
<dd>名词1 解释3</dd>
...
<dt>名词2</dt>
<dd>名词2 解释1</dd>
<dd>名词2 解释2</dd>
<dd>名词2 解释3</dd>
...
</dl>
示例:
<html>
<dl>
<dt>北京</dt>
<dd>昌平</dd>
<dd>通州</dd>
<dd>海淀</dd>
<dt>雍正</dt>
<dd>甄嬛</dd>
<dd>皇后</dd>
<dd>年妃</dd>
</dl>
</html>
一般情况下，我们的网站底部的说明部分，或者帮助中心，是用 <dl><dt><dd></dd></dt></dl> 这种，自定义列表 来做的。
例如 小米官网的底部就是用 自定义列表 来做的
image.png
image.png
注意事项
<dl></dl> 自定义列表项中，一个 <dt></dt> 之间，可以嵌套多个 <dd></dd>。但是千万不要出现多个 <dt></dt><dt></dt> 同时紧挨着使用。
例如:
<dl>
<dt> 标题1 </dt>
<dt> 标题1 </dt> <!-- 这种，是不被允许的。一般情况下，不要这样使用 -->
<dd> 解释1 </dd>
<dd> 解释2 </dd>
<dd> 解释3 </dd>
</dl>
上面的代码，最终效果如下:
<html>
<dl>
<dt> 标题1 </dt>
<dt> 标题1 </dt>
<dd> 解释1 </dd>
<dd> 解释2 </dd>
<dd> 解释3 </dd>
</html>
<hr />
