HTML（HyperText Markup Language）
是超文本标记语言。"超文本"就是表示页面内可以包含非文字元素，如：图片、链接、音乐等等。
HTML 网页文件可以使用记事本、写字板、HBuilder、Sublime 等编辑工具来编写，以 .htm 或 .html为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息.
基础语法
<!--
标记语言中的注释:
-->
<!--
1.html 超文本标记语言
2.<!DOCTYPE html> html文件的版本类型声明
<!DOCTYPE html> ->html5的版本声明
一个html页面中必须在首行存在版本声明
3.<meta charset="UTF-8"> 告诉浏览器使用哪一种字符编码格式来解析我页面中的内容
保证一个文件的编码与解码格式保证统一不会出现乱码
4.html标签的分类:
单标签 |自闭和标签 : 在开始标签的最后结束 <meta charset="UTF-8"/>
双标签 |闭合标签 : 有开始有结束 <title>基础语法</title>
5.标签上可以添加属性
开始标签上空格添加属性
属性名 = '属性值'|"属性值"
作用: 更完善的展示标签的作用
6.标签的嵌套关系:
父标签可以嵌套子标签
-->
标签
HTML 标记是由"<“和”>“所括住的指令标记，用于向浏览器发送标记指令。
主要分为：单标记指令、双标记指令（由”<起始标记>“＋内容＋”“构成）。
HTML语言使用标志对的方法编写文件，既简单又方便。它通常使用”<标志名>内容"来表示标志的开始和结束，因此在HTML文档中这样的标志对都必须是成对使用的。
为了便于理解，将HTML标记语言大致分为：基本标记、格式标记、文本标记、图像标记、表格标
记、链接标记、表单标记和帧标记等。
单标签
单标签,不设置属性值。
如：
<br/>、<hr/>
单标签属性
单标签(也叫空元素)，设置属性值。如：
<hr width="800" />
双标签
双标签，不设置属性值。如：
<title>…</title>
双标签属性
双标签，设置属性值。如：
<body bgcolor="red">…</body>
<font size="7">…</font>
<!--
常用的标签:
1.<head> 页面的头部设置
给浏览器看的一些设置信息
2.<body> 定义一些给用户看的内容
属性:
bgcolor 背景颜色
background 背景图片
颜色的设置:
1)颜色的英文单词
2)颜色的十六进制值 #+6个字符
3)rgb颜色三原色 rgb(0~255,0~255,0~255)
3.<title> 标题标签
用户能够看到
为与搜索引擎优化有好处
用户收藏为书签的时候,title的内容作为书签名
在一个html必须存在的标签
4.p 标签
段落标签
语义化作用
上下存在一块外边距(css样式),浏览器默认提供
前后换行
5.a标签
超链接标签
属性:
href : 定义连接地址
相对地址
绝对地址 http://www.baidu.com
必填属性
title 当鼠标悬停在内容上时候,显示的提示字
target 打开方式
_self : 原页面打开
_blank : 新页面打开
特点:
存在下划线
连接未访问: 蓝色
连接已访问: 紫色
行内元素
标签的分类:
元素: 标签+内容
行内元素 : 可以和其他元素同行展示
块元素 : 前后换行,独占一行
-->
整体结构
HTML的内容都是由一对一对的标签组成，标签不能混乱，页面有页面的整体架构和规则，标签和标签之间有需要正确嵌套。
通常一个HTML网页文件包含3个部分：标记头区…、内容区和网页区…。
<html>
<head></head>
<body></body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML文档的基本结构</title>
<script></script>
<link rel="stylesheet" type="text/css" href=""/>
</head>
<body>
</body>
</html>
html
标志用于HTML文档的最前边，用来标识HTML文档的开始。而标志放在HTML文档的最后边，用来标识HTML文档的结束，两个标志必须一块使用。
head
和构成HTML文档的开头部分。和标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。
在此标志对之间可以使用、、、等标签。
：用来提供关于文档的信息，起始属性为：charset=“utf8”。表示告诉浏览器页面采用的什么编码，
一般来说我们就用 utf8。当然，文件保存的时候也是utf8，而浏览器也设置 utf8 即可正确显示中文。
：用来引入css文件
：用来引入js文件或编写js代码。
<!--
img 图像标签
属性:
src 图片的路径
相对路径
绝对路径
alt 当图片无法正常显示的时候,显示的提示字
title 当鼠标悬停在内容上时候,显示的提示字
span 帮助更方便的为元素添加样式
div 块
块元素
前后换行
内容正常显示
可以前任任意标签元素(行内|块)
路径:
进入到某个路径下 /
回到上一层路径 ../
h1~h6标题标签
根据权重不同,大小依次减小
语义化
所有的块元素都存在一个属性:
align 水平对齐 方式
left
right
center
justify 两端对齐
列表标签:
无序列表
ul
li 列表项
修改列表项标记 在ul标签上 type="square"实心方块 circle空心圆圈 默认desc实心圆圈
有序列表
ol
li 列表项
修改列表项标记 在ol标签上 type-> 1 a A i I
列表可以嵌套:
有序嵌套无序
无序嵌套有序
无序嵌套无序
有序嵌套有序
注意:
所有的内容在列表中必须定义在列表项中
ul|ol标签中直接子元素只能包含li,li中可以包含任意内容
块元素中可以包含任意内容(普通文本,其他块元素,其他行内元素)
行内元素中可以包含任意内容(普通文本,其他行内元素)
span标签：帮助更方便的为元素添加样式
div块
h1~h6标题标签，默认根据权重不同，大小依次减小
所有的块元素都存在一个属性
align水平对齐方式 left,right,center,justify
列表标签：
-
无序列表 ul
li 列表项
-
有序列表ol
li 列表项
列表可以嵌套，所有的内容在列表中必须定义在列表项目中、
ul|ol标签中只能包含li,li列表项中可以包含任意元素
表格：table表格标签(跨列，跨行)
tr行 th表格头单元格 td表格体单元格
<!--
表格:
table 表格标签
tr 行
th 表格头单元格 居中加粗
td 表格体单元格
属性样式:
border边框
bordercolor 边框颜色
style="border-collapse: collapse" 双线变单线
colspan跨列 ****
rowspan 跨行 ****
height 高度
width 宽度
align 对齐方式
注意:
先有行再有列
内容需要放在单元格中
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" align="center" style="border-color: crimson;width: 500px;height: 350px;border-collapse: collapse" bgcolor="aqua"
>
<tr>
<th colspan="6">课程表</th>
</tr>
<tr bgcolor="#dc143c">
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan="3">上午</td>
<td>体育课</td>
<td bgcolor="#7fff00">体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td rowspan="2">下午</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
<tr align="center">
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
<td>体育课</td>
</tr>
</table>
</body>
</html>
注：先有行再有列，内容放在单元格中
form表单
收集用户输入的数据
属性：action提交位置
name 表单名称
method提交方式
get(默认，不安全，大小有限制效率高)
post数据在请求体中
enctype: 当表单中存在文件上传，需要做修改
<!–
input type : hidden 隐藏框
textarea 多行文本域
select 下拉框
option 下拉列表选项
fieldset 分组
legend 分组标题
label 添加标注
是文本内容与表单标签进行绑定
默认选中:
单选框|多选框 : checked
下拉列表: selected
readonly 只读 不能修改可以提交
disabled 禁用 显示为灰色,不能修改不能提交
placeholder 提示字
required 必填属性
maxlength 最大长度 (字符个数)
-->
大部分的表单元素都是通过input标签定义
CSS
添加语法：
选择器{
样式–>样式名：样式值；
属性名：属性值；
}
添加CSS
-
行内样式表
-
内部样式表
-
外部样式表
行内样式表: 在元素行的内部为元素添加样式
优先级最高,但是如果想要我多个元素添加相同样式的时候麻烦,不便于后期维护
内部样式表 : 在html的内部为html中的元素添加样式
在head中添加一对标签style标签,在标签对中添加样式
外部样式表 : 在html的外部为html中的元素添加样式样式表的优先级: 行内的优先级最高,谁离元素最近谁的优先级最高
CSS选择器
在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。
选择器:
基础选择器
组合选择器
伪类选择器
微元素选择器
基础选择器 :
id选择器 : # id属性唯一的,不可重复
根据元素的id属性选择1个元素
类选择器 : . class属性值可以重复的,可以在值列表中添加多个属性值
根据与元素的class属性值选择1个或者1组元素
元素选择器 : 标签名
根据元素 标签名选中一个 或者一组元素
通配符 : *
优先级 : id>类>元素>通配符
注意: css中样式存在继承
字体样式,颜色样式,背景样式等等都会默认继承
边框,内外边距等样式不会继承
1、组合选择器:
后代选择器
父级选择器 子级选择器
选中所有的子元素包括孙子元素
2、子元素选择器
用于选择指定标签元素的所有第一代子元素，以大于号分隔
3、相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔
4、普通兄弟选择器
选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔
群组选择器
选择器1,选择器2…{
样式;
}
伪类选择器 :
a:link a标签未访问
a:visited a标签已访问
:hover 当鼠标悬停在元素上时候,作用的样式
:active 当鼠标按下时候显,作用的样式
:first-child 当元素作为父级的第一个子元素时候被选中
:last-child 当元素作为父级的最后一个元素时候被选中
:nth-child(num) 当元素作为父级的第n个子元素的时候选择
标签:
行内元素
宽度有内容撑起
可以与其他元素同行展示
不能设置宽高
可以包含行内,普通文本
不能设置上下内外边距
块元素
独占一行
可以设置宽高
可以包含行内,块,文本
可以设置元素的内外边距
display :
none 元素消失
block 块元素
inline 行内元素
inline-block 行内块
行内元素与块元素的特点都存在
/去除浏览器的默认样式/
*{
padding: 0;
margin: 0;
}
其他选择器
群组选择器
定位position
relative相对定位（配合方向值一起使用）
absolute绝对定位
fixed固定定位
2842
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
