一 Index解析
1. 注释
// 单行注释 js
/* 注释内容 */ css
注释内容快捷键： Ctrl+/？ 可空行注释，选中某行注释，多行注释
注释：是代码的解析文本，被注释的内容或者代码将不被进行
注释的作用：
1.为了便于阅读代码，更好理解代码
2.将代码注释起来后，代码就不会执行，可以方便删除，或者还原代码
3.注释可以作为初学者的笔记使用
2.快捷键
html:5 生成基本代码块
标签名+ Teb/Enter 快速生成标签
Ctrl+s 保存
Ctrl+c 复制
Ctrl+v 粘贴
Ctrl+x 剪切
Ctrl+z 撤回
Ctrl+y 反撤回
Ctrl+b 打开/关闭编辑器资源管理器
Ctrl+f 查找
Ctrl+h 替换
Ctrl+“+” 增大字体
Ctrl+“—” 减小字体
Alt+z 自动换行
Alt+鼠标左键 多行输入
Alt+b 快捷打开浏览器
3.标准代码块介绍
DOCTYPE：版本标记，在HTML文件中，第一行都是DOCTYPE；
声明文档类型，浏览器用标准模式解析文件
html：html技术告诉浏览器这是一个html5文件
根标签，是整个html页面的第一个标签，文档的所有内容都在这个标签中
标签嵌套： 形成父子关系 外层为父元素，内层为子元素
标签属性：在开始标签内添加的，一般都以属性名="属性值"的形式存在，属性都是给标签添加一些解释说明的
lang：longuage，语言，说明文档的语言类型
head：头标签，设置网页的头部信息。在标签内添加说明标签，不会显示在网页中
meta：说明标签
charset：会在head标签第一行，防止页面中出现乱码
UTF-8：一种编码格式，解决中文乱码问题
title：标题。显示在页面标题的标题栏上
style：内部设置css样式，需要配合选择器使用
body：设置网页的主体内容
script：添加js内容（在body的下面添加或者放置在body标签内的最下方）
4.html文档字符编码&语言设置
1.编码的重要性：编码可以导致浏览器通过IE时候网页乱码，也可以导致css的兼容性Hack。
2.编码的位置:(一般这段网页编码放在html文件的head标签内的第一行)。
3.编码的样式:通过charset="UTF-8"中的UTF-8就可以改变网页编码。
4.编码的种类:国内常用的流行编码格式有UTF-8，gb2312这两种，一般这两种类型就可以满足国内所有的网页编码需求。程序和数据库中也会用到这两种编码类型处理网页和储存数据类型。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<!-- 文本内容 -->
第一个网页
<!-- 双标签 -->
<div> </div>
</body>
<script>
</script>
</html>二 HTML标签
html标签按照标签的构成可以分为单标签和双标签
1.单标签： <xxx> 在html5之前，单标签需要写闭合斜杠，但在html5之后就不这样写了
<xxx/>
2.双标签：
<xxx>YYY</xxx>
3.开始标签 标签内容 结束标签
<标签名 标签属性 标签属性>标签内容<闭合斜杠标签名>
不能自定义标签
html标签的开始标签可以添加标签属性，就是在标签名后面添加一个空格然后开始添加属性，一个标签可以添加多个属性，多个属性之间需要使用空格隔开，属性值最好使用双引号包裹起来。属性可以没有属性值，例如p3.
三 标签解析
1.html标题：
标题 heading
是通过<h1>~<h6>标签定义的
<h1>为最大标题，用于显示主标签<h6>为最小标题
默认样式：
标题标签带有上下外间距,撑出元素之间的间距
2.html水平分割线：
hr:创建水平线，用于分割内容
默认样式：1px的边框线，8px的上下外间距
3.html段落：
p:段落标签，块元素
注意：在文本p标签内标签属于特殊的文本标签，文本标签都是行内元素除了p
默认样式：文本大小16px，根据文本大小调整上下外边距
注意：浏览器会自动添加的，在段前段后添加空行
4.html换行标签：
br：换行标签，空元素
5.html图片插入标签：
img：砸死网页插入图片
html属性：
src：来源，图片的路径（网络图片，本地图片）
图片路径查找：相对路径（相对于当前文件的路径）
图片与文件同级：1，直接写图片名
2，./ 会关联出同级的所有文件
图片与文件上级兄弟：../ 会关联出上一级所有文件
绝对路径（包括盘符的路径，叫做绝对路径） 可以直接在网络上复制图片地址
alt：图片加载失败时的替换文字
title：图片标题（鼠标移入图片的提示文字）
6.html超链接标签：
a:超链接标签
作用：实现页面的跳转，点击标签内的内容，跳转到指定链接地址
注意：当a标签没有添加href属性时是链接占位符（标签内容为普通文本）
href：超文本的指向，设置跳转的网页的链接地址
target：目标，设置网页的打开方式，默认值是当前页面打开
_blank：作用是在新窗口打开
7.html块
div：标准的块标签
块元素在没有设置宽高的情况下，宽度默认是父元素的100%，高度靠内容撑开
（如果没有内容，则高度为0）
8.html文本
span：普通文本标签，文本默认大小为16px，靠文本内容撑出大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html常用标签</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr/>
<span>普通文本</span>
<p>
张万森，下初雪了吗？ <br/>暗恋天花板
</p>
<img src="../img/1.jpg" alt="图片加载失败" title="向往自由与和平">
<img src="../img/2.jpg" alt="图片加载失败">
<img src="../img/3.jpg" alt="图片加载失败">
<img src="../img/4.jpg" alt="图片加载失败">
<br>
<a href="http://www.baidu.com" target="_blank" title="链接标题">百度一下，就知道了</a>
<div>你好呀 世界</div>
</body>
</html>四 格式化标签
b: 加粗文本，没有特殊意义
strong： 加粗文本，具有很强的强调意义，用于表达文本的重要性
i: 斜体文本，没有特殊意义
em： 斜体文本，具有很强的强调意义，用于表达文本的重要性
sup： 定义上标
sub： 定义下标
s: 删除线文本，没有特殊意义
del： 删除线文本，具有很强的删除意义，用于表达被遗弃的内容
u： 下划线文本，没有特殊意义
ins： 添加，插入文本，具有很强的添加意义，用于表达新增的内容
small： 定义小号文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>格式化标签</title>
</head>
<body>
<b>加粗文本</b>
<strong>加粗文本</strong>
<br>
<i>斜体文本</i>
<em>斜体文本</em>
<br>
<p>这是<sup>上标</sup>和<sub>下标</sub></p>
<s>删除线文本</s>
<del>删除线文本</del>
<br>
<u>下划线文本</u>
<ins>下划线文本</ins>
<br>
<small>小号文本</small>
<!-- <big>大号文本</big> -->
</body>
</html>五 语义化标签
1.html语义化标签：
根据内容的结构（内容语义化），选择合适的标签（代码语义化）
便于开发者阅读和写出更好的代码
让浏览器的爬虫和机器更好的解析
2.html语义化好处：
1，为了在没有css的情况下，页面也能呈现出更好的内容结构，代码结构
2，代码结构清晰，方便阅读，有利于团队开发
3，方便搜索引擎识别页面，有利于搜索引擎优化（SEO）
4，方便其他页面解析（屏幕浏览器，盲人浏览器，移动设备等），以语义化的方式渲染页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签</title>
</head>
<body>
<!-- 页面结构语义化标签 -->
<nav>标记导航，仅对页面中重要的链接群使用</nav>
<header>页眉，通过包括页面的logo，主导航，全站链接以及搜索框</header>
<main>页面的主要内容，一个页面只能使用一次，如果是一个web应用，则包括其主要功能</main>
<section>定义文档的节点（section区段），比如：章节，页眉或文档中的其他部分</section>
<footer>页脚，只有当父元素为body的时候，整个页面的页脚</footer>
<aside>定义所有内容之外的部分，如侧边栏，广告等</aside>
</body>
</html>六 转义字符
在html中，如果需要显示<或>等其他字符时，不要直接使用，否则会被误认为是一个标签，需要使用转义字符进行转义
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 人民币/日元 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>转义字符</title>
</head>
<body>
<p>在html中，使用<hr>表示水平分割线</P>
<p>在html中，使用&表示和</P>
<p>在html中，使用 表示中文空格</P>
<p>在html中，使用 表示英文空格</P>
<p>在html中，使用©表示版权</P>
<p>在html中，使用®表示注册商标</P>
<p>在html中，使用¥表示人民币</P>
<p>在html中，使用°表示度°</P>
</body>
</html>
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
