HTML5基础阶段
一. 前端的整体构成（html,css,javascript）
- html：超文本标记语言 结构
超：超链接
文本：text
标记：又被称为 标签
语言：和计算机沟通的桥梁 - css：层叠样式表 样式
- JavaScript：脚本语言 行为
二. 文档结构
- html：这个整个文件的主体标签，所有的代码都不允许超出它范围
- head：页面头部信息。用于向浏览器提供整个页面的基本信息，但是它不包含页面主体内容，头部信息主要包括页面的标题，元信息，css样式，JavaScript脚本等。
- body：网页的正文，是用户在浏览器窗口中能够看到的信息，比如：图片，表格，视频等。需要在标签之内，但不是所有的标签都是可见的。
html，head，body是HTML文档的基本元素，三者共同构成了整体文档的骨架。
- < !DOCTYPE html> 代表“ 文档类型为html ”。
- 头部< head>< /head>间的 title 为标题。
- 若出现乱码，头部head中加< meta charset=”utf-8”>。
- body里的< h>< /h>用来作标题的，大小为 h1~h6 从大到小。
三. HTML语法
1. 标签
1）标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束。
2）结束标记一定要以" / "结束，引号必须使用 " "，标签之间不能交叉嵌套。
2. 属性
必须放在开始标签里面，属性可以为标签提供更多样化的特性。
3. 元素
开始和结束标签连同包含在他们之间内容，我们通常叫做元素。
四. css的使用（样式）
在head标签中书写 < style type=“text/css”>
- width：宽
- height：高
- background-color：背景颜色
- color：字体颜色
- font-size：字体大小（默认大小是16px）
- text-align：水平对齐方式
center 水平居中
left 水平居左
right 水平居右 - line-height：行高（可达到垂直居中）
：200px; - border-radius：切圆 单位：%
：50%
<style type="text/css">
/*标签选择器*/
div{
width: 200px;
height: 200px;
/*background-color:背景颜色
red：红色*/
background-color: red;
/*字体颜色*/
color: yellow;
/*字体大小
默认大小是：16px*/
font-size:20px;
/*水平居中*/
text-align: center;
/*垂直居中--行高*/
line-height: 200px;
/*切圆 单位：% */
border-radius: 50%
}
/*class 类名 --class选择器
表示方式：在自定义名称前加 .
语法：
.自定义名称{
样式.....
}
它的优先级 高于标签选择器 */
.box{
background-color: blue;
}
</style>
五. 常用标签
1. 标签可划分为两类
- 单标签：< 开头, />结尾，本身不包含文本或子标签
- 双标签：< xxx >开头，< /xxx >结尾
开头和结尾之间，被称为标签中，可以包含文本或子标签
2. 常用标签
1）< head >< /head> 头部标签
2）< title >< /title > 网页标题标签
3）< meta > 元信息标签
(是一个单标签，不需要设置结束标签。提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等。)
4）< p >< /p > 段落标签 (独占一行)
5）< img src="…/1.jpg" > 图片标签
6）< a href=“xx.html” target=" " title=" " > xxxxx < /a > 超链接＋跳转的地址
href：用来指定链接的地址,可以是网页文件，图片等；空链接用”#”表示
title：鼠标移上去提示的信息；
7）< div > xxxx < /div > 最常用的标签，独占一行
8）< br / > 换行标签
9）< hr > 水平线标签
< hr align = “left” > 水平线 设定对齐方式
< hr size = “9” > …设定大小
< hr width = “80%” > …设定宽度
< hr color = “#ff0000” > …设定颜色
<body>
<!-- 段落标签：自己独占着一行 -->
<p>我是一个霸道的人，我占着一整行</p>
<!-- 图片标签 -->
<img src="../1.jpg">
<!-- a 标签：超链接 href：跳转的地址-->
<a href="wendangjiegou.html">来点我啊</a>
<!-- 最常用的标签，没有之一,独占一行-->
<div>我是一个div</div>
"哈哈"
<!-- 列表元素（标签） -->
<!-- 有序列表 -->
<ol>
<!-- 用来展示一个列表项目 -->
<li>
男装区
<ol>
<li>小男人区</li>
<li>大男人区</li>
</ol>
</li>
<li>女装区</li>
<li>不男不女区</li>
</ol>
<!-- 无序列表 -->
<ul>
<li>我是One</li>
<li>我是Two</li>
</ul>
<ol>
<li>儿童乐园</li>
<li>儿童超市</li>
</ol>
<!-- 自定义列表 是一个特殊的列表
1.将标题和内容成对显示，作为一个子项
2.子项的数量不限 一个dl中可以包含1~n个子项 -->
<dl>
<!-- 标题 -->
<dt>标题</dt>
<!-- 内容 -->
<dd>我是对应的内容</dd>
<!-- 第一个子项结束 -->
<!-- 第二个子项开始 -->
<dt>标题二</dt>
<dd>我是内容二</dd>
<!-- 第二个子项结束 -->
</dl>
</body>
3. 列表标签（元素）
HTML中共有3种列表，分别是 无序列表 、有序列表 和 自定义列表。
ol 或 ul 的下一层子级只能是 li ，具体内容存放在li中。
li 的上一级只能是 ol 或 ul，不存在两个 li 之间的嵌套。
除此之外，列表中可以任意嵌套。
清除默认的列表样式：list-style: none;
1）有序列表：< ol > < li > xxx < /li > < /ol >
2）无序列表：< ul > < li > xxx < /li > < /ol >
3）自定义列表：是一个特殊的列表
① 将标题和内容成对显示，作为一个子项
② 子项的数量不限 一个dl中可以包含 1~n个子项
< dl >
< dt >标题< /dt >
< dd >内容< /dd >
< dl >
4. 文本修饰 / 文字样式标签
1）< b> 加粗 < /b>
< strong> < /strong> 表强调
2）< i> 斜体 < /i>
< em> < /em> 表强调
3）< s> 删除线 (缩写) < /s>
< strike> 删除线 < /strike>
< del> 删除线(表示删除) < /del>
4）< u> 下划线 < /u>
5）< sup> 内容以上标的形式显示 < /sup>
< sub> … …下标… … < /sub>
6）< big> 比周围的字体大一号 < /big>
< small> 比周围的字体小一号 < /small>
7）< font face=“楷体” size=“20” color=“pink”> … < /font>
font：该标签可以用来控制更多的字体外观
通过属性：1. face: 字体 2. size：大小 3. color：颜色
六. 页面注释标记
注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，在浏览器的页面中不显示。
在HTML源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外，如果将代码交给其他设计者，其他人也能很快读懂前者所编写的内容。
注释的三种长相（html，css，Js中）
-
html：<! - - 注释 - - >
快捷键：Ctrl+/ -
css： /* 注释 */
-
JavaScript(Js)：// 单行注释
/**/ 多行注释
七. 路径
-
绝对路径：从上（磁盘）到下（想找的东西）去查找
例如：
C:/Users/36055/Desktop/1906/HTML+CSS/基础阶段/常用标签.html -
相对路径：从自身出发，去寻找目标
来源：CSDN
作者：CSDN_GMC
链接：https://blog.csdn.net/CSDN_GMC/article/details/104172930