共计 2668 个字符，预计需要花费 7 分钟才能阅读完成。
HTML 基本知识（1）
意识网页
网页是由文字 图片 音频 视频 超链接 flash 等组成
如何显示网页
程序员写好代码后，通过浏览器渲染之后而造成网页
浏览器
浏览器是网页显示 运行的平台
罕用的五大浏览器及内核
- IE 浏览器：Trident 内核
- 火狐浏览器：Gecko 内核
- safari 浏览器：webkit 内核
- 谷歌浏览器：Bink 内核（属于 webkit 的分支）
- 欧朋浏览器：Bink 内核
WEB 规范
WEB 规范不是一个规范，是 W3C 组织和其它标准化组织制订的一系列规范，能够让不同的浏览器在页面显示对立内容
WEB 规范的组成
- 构造（html）: 网页元素的分类以及整顿
- 体现（css）：网页外观的款式
- 行为（js）: 网页模型的交互及行为。
WEB 规范的益处
- 使 WEB 倒退更为广大
- 内容能被更宽泛的设施拜访
- 升高网站流量费用
- 使网站更易于保护
HTML
HTML：超文本标记语言 并不是编程语言 而是标记语言
HTML 骨架格局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
HTML 元素标签分类
html 标签：单标签 双标签
双标签
<body></body> <html></html> 等等 单标签
<img /> <br /> 等等
html 标签关系
嵌套关系
<head>
<title></title>
</head>
并列关系
<head></head>
<body></body>
在嵌套关系中 子元素间隔父元素应缩进一个 tab 键身位
代码开发工具
- DWcs6
- VScode
- Webstrom
- sublime
- HBuilder
生成 html5 骨架的形式
! 或者 html:5
骨架标签含意
- !DOCTYPE html: 文档类型，指的是 html5 的构造。
- html: 根标签
- lang: 指定 html 的语言品种
- head: 头部标签
- charset: 字符集
- title: 文档题目标签
- body: 主体标签
字符集编码
- gb2312：简略中文，包含 6723 个文字
- BIG5: 繁体中文，泛指港澳台等
- GBK: 包含简体中文与繁体字，是 GB2312 的升级版
- UTF-8：包含全世界各地所须要的字符集。
标签的语义
标签的语义：指的是标签的含意 在适合的中央放上适合的标签 让构造更清晰
排版标签
题目标签
h1~h6: 指的是 1~6 级题目 字体会顺次变小，具备换行的特点
<h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>
段落标签
p：指的是段落标签
<p> 文本 </p>
水平线标签
hr: 水平线表标签
<hr />
换行标签
br : 水平线标签
掘金 一个专属于程序员的 APP <br />
div 和 span
<div> 胡歌 </div>
<div> 霍建华 </div>
<span> 韩红 </span> <span> 古天乐 </span>
div: 分隔 分区。一行内只能放一个 div 标签
span：跨度 跨距。一行内能够放很多 span 标签
文本格式化标签
<b> 文字以加粗的形式显示 </b> <strong> 文字以加粗的形式显示 </strong> <br />
<i> 文字以歪斜的形式显示 </i> <em> 文字以歪斜的形式显示 </em> <br />
<s> 文字以删除线的形式显示 </s> <del> 文字以删除线的形式显示 </del> <br />
<u> 文字以下划线的形式显示 </u> <ins> 文字以下划线的形式显示 </ins> <br />
标签属性
让 HTML 标签领有更多的信息 便叫作标签的属性
< 标签名 属性 1 ="属性值 1" 属性 2 ="属性值 2"> 文本 </ 完结标签 >
图像属性
<img src="图像 URL" />
总结
- 标签名领有多个属性。必须写在开始标签中，且位于标签名前面。
- 属性之间不分先后顺序，标签名与属性，属性与属性之间必须以空格隔开
- 采纳键对值的模式，如 key=value 的格局。
- alt 是图片不能显示呈现的文字，title 是鼠标挪动时显示的文字
链接标签
<a herf="指标的 url 地址" target="页面的打开方式"> 文本 </a>
复制代码 <a href="http:////www.baidu.com" target="_blank"> 内部超链接 </a>
<a href="7. 图像标签.html"> 外部超链接 </a>
注意事项
- _self: 是在原网页关上链接
- _blank 是在新网页关上链接
正文标签
<!-- 正文内容 -->
正文自身是让程序人员看的，目标是为了解释这段代码的含意。程序不执行 快捷键：ctrl+/
门路
指标文件夹 —-> 根目录
相对路径
上一级门路
<img src="../ 图像 URL" />
同一级门路
<img src="./ 图像 URL" />
下一级门路
<img src="./img/ 图像 URL" />
绝对路径
个别是指残缺的网络门路
錨點定位
創建锚点链接 使用户可能疾速跳到指标地位
步骤如下
- 创立绝对应的 id 名
- 应用绝对应的 id 名标注跳往指标的地位
<a href="#Christmas">3. 圣诞树的由来 </a><br />
<h2 id="Christmas"> 圣诞树的由来 </h2>
base 标签
base 标签
base 标签是为了设置整体链接的打开方式 写在 head 与 </head> 之间
复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com/"> 百度 </a>
<a href="https://www.qq.com/"> 腾讯 </a>
<a href="https://www.sina.com.cn/"> 新浪 </a>
<a href="https://www.163.com/"> 网易 </a>
</body>
</html>
pre 标签
pre: 文本格式化标签，依照文本的本来的设置在网页中出现
<pre>
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
</pre>
特殊字符
html 标签不方便使用的中央能够应用特殊字符 它们属于符号。
HTML5 的倒退之路
html5 的倒退之路：jingyan.baidu.com/article/59a…