HTML基本标签总结
HTML作用：
超文本标记语言，是一种标识性的语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接成为一个逻辑整体。一、标签语法结构
单标签：<标签名/>
双标签：<标签名>内容</标签名>
二、标签属性
<标签名 属性名="属性值" 属性名="属性值"></标签名>
三、标签分类
- 块级标签
标签包裹的内容在页面上独自占一行
- 内联标签
标签包裹的内容会跟在其他元素之后
- 文本标签
标题标签：<h1></h1> ~ <h6></h6>
段落标签：<p></p>
换行标签：<br>
- 注释标签
<!-- 注释内容 -->
- 无语义标签
<div></div> <span></span>
- 语义标签
<header></header> 头部
<nav></nav> 导航区
<article></article> 文章
<section></section> 章节
<aside></aside> 侧栏
<footer></footer> 底部四、转义符
空格
& &
" "
< <
> >
© 版权
® 注册商标
™ 商标五、超链接
实现页面的跳转
- 语法
<a href="目标地址">内容</a>
- 属性
target用来设置在哪个窗口中打开目标页面
- 相对路径
当前目录：目标文件名
上级目录：../目标文件名
下级目录：下级目录名/目标文件名
- 绝对路径
盘符:\路径\文件名
协议://主机地址/路径/文件
- 锚记链接
起跳位置：<a href="#终点位置名称">内容</a>
终点位置：<a name="终点位置名称">内容</a>
六、列表
- 无序列表
<ul>
<li>内容</li>
<li>内容</li>
</ul>
- 有序列表
<ol>
<li>内容</li>
<li>内容</li>
</ol>
- 定义列表
<dl>
<dt>标题</dt>
<dd>描述</dd>
</dl>七、图片的插入
<img src="图片路径" width="" height=""/>八、视频插入
<video controls autoplay width="" height="">
<source src="视频路径" type="video/视频格式"/>
</video>
网页中的表格总结
使用的标签：
<table border="1">
<caption>标题</caption>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>单元格合并：
不管是垂直方向合并还是水平方向合并
都是在td单元格标签中添加rowspan或
colspan属性，跟tr标签没关系
找到合并的最开始的那个单元格，在其
td标签上添加属性，向下或向右总共合并
几个单元格，属性值就是多少，相应的
要把下面或后面的几个单元格删掉
跨行合并：
<td rowspan="单元格个数"></td>
跨列合并：
<td colspan="单元格个数"></td>
网页中的表单总结
表单的作用：
实现用户与网站后台之间的的信息交互。
将用户在网页上输入的数据打包提交给网站服务后台，
后台接受到用户提交的数据后，对数据进行处理，
将结果再返回给用户。
表单的组成：
- 表单标签
<form></form>
- 提示信息
- 表单控件
表单标签语法：
<form method="提交方式" action="url地址" enctype="">
账号：<input type="text"/><br>
密码：<input type="password"/>
<input type="submit" value="登录"/>
</form>
method：指明表单数据的提交方式。get|post
get:提交时会将用户数据拼接到url后面，不安全，有大小限制
post：提交数据时，数据不会拼接到url后面，安全，理论上
没有大小限制。
action: 指明表单数据要提交给网站后台的哪个程序进行处理，默认
提交给当前页面。
enctype: 指明表单数据编码格式，默认格式：
application/x-www-form-urlencoded
如果上传文件，则需要将该属性设置为：
mutipart/form-data
表单控件：
常用控件：
输入型：<input type=""/>
单行文本框：type="text"
密码框：type="password"
单选按钮：type="radio"
复选框：type="checkbox"
文件域：type="file"
隐藏域：type="hidden"
提交按钮：type="submit"
重置按钮：type="reset"
普通按钮：type="button"
邮箱：type="email"
网址：type="url"
数字：type="number"
日期：type="datetime-local"
滑块：type="range"
下拉选择框：
<select>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
</select>
文本域：
<textarea></textarea>
常用控件属性：
maxlength：设置文本框的最大输入字符数
required：设置控件必须填写内容才能提交
autofocus：设置控件自动获取焦点
multiple：设置上传文件或下拉选择时可以选择多个
disabled：设置控件不可用，数据不会被提交
checked: 设置单选按钮或复选框默认选中
selected: 设置下拉选择列表默认选中
lable标签：
作用：点击提示信息时让控件获取焦点。
<lable for="uname">用户名：</lable>
<input id="uaname" type="text"/>CSS的概念：
Casecading Style Sheet,层叠样式表或级联样式表。css作用：
对网页内容进行样式风格设计，比如字体，颜色，字体大小，网页排版等如何在Html页面中使用CSS：
- 行内样式:直接在标签内部添加style属性，来添加样式
<h1 style="color:red"></h1>
- 内部样式:在html页面中的<head></head>标签内部添加
<style></style>，并在其内部添加样式
<head>
<style type="text/css">
h1{
属性名1=属性值1;
属性名2=属性值2
}
</style>
</head>
- 外部样式，css与html内容进行分离，css在单独的.css文件中编写
然后再将css文件引入到html页面中
style.css文件的内容:
h1{
属性1 = 属性值1;
}
<head>
<link href="style.css" ref="stylesheet" type="text/css"/>
</head>CSS语法：
选择器{
属性名1=属性值1;
}CSS选择器：
选择器是用来筛选当前网页中的标签，选出来之后给相应的标签内容添加样式。分类：
元素选择器：
标签选择器：筛选出当前页面中所有指定的标签
标签名{
}通用选择器：将页面中的所有标签都选出来
*{
}ID选择器：在页面中进行标签的精准筛选，id名称在页面中是独一无二的
#id名称{
}类选择器：给某些标签添加相应的class属性，将他们筛选出来
.类名{
}属性选择器：
元素选择器[属性]：筛选指定元素中带有指定属性的标签内容，添加样式
p[class]{
}元素选择器[属性=属性值]：筛选指定元素中带有指定属性，且属性值为指定的标签内容，添加样式
p[class=cls]{
}元素选择器[属性^=属性值]：筛选属性以指定属性值开头的标签
p[class^=属性值]{
}元素选择器[属性$=属性值]：筛选属性以指定属性值结尾的标签
p[class$=属性值]{
}层次选择器：
后代选择器：选择某元素下指定的元素，不管是子元素还是孙子元素还是孙子孙子的元素，都会被选出来
ul a{
}子选择器：选择某元素下指定的子元素，只选出子元素
ul>a{
}相邻选择器：选择相邻元素中的第二个元素
li+li{
}伪类选择器：
a:link{} //超链接未被访问时显示的样式
a:visited{} //超链接被访问过时显示的样式
a:hover{} //鼠标放到超链接上时显示的样式
a:active{} //鼠标按住超链接时超链接显示的样式
:focus{} //控件获取焦点时显示的样式
:first-child{}//页面中第一个指定元素显示的样式伪元素选择器：
:first-letter{} //给元素的第一个字符添加样式，只能用在块元素上
:first-line{} //给元素的第一行内容添加样式，只能用在块元素上
:first-before{} //需要跟content一块使用,在指定元素之前添加内容
:first-after{} //需要跟content一块使用,在指定元素之后添加内容分组选择器：
h1,p{
}样式的优先级：
引入方式：看哪种样式离标签最近，哪种样式就起作用
选择器分类：
id选择器 > 类选择器 > 标签选择器 > 通用选择器