标签
标签的分类
按结构分，html标签可以分为单标签和双标签。
单标签
由一个标签组成。例如：
<br/>
<hr/>
<img/>双标签
由开始标签和结束标签两部分构成，例如：
<a></a>
<h></h>
<p></p>
<div></div>
按照属性分，标签还可以分为块级标签和行内标签，行内标签又叫做内联标签。
块级标签和行内标签的区别
块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。
标签的两个重要属性
id值
相当于是人的身份证，一个文档中，id值不能够重复，必须唯一。
class值
是可以有多个的，一个标签可以有多个class值，一个class值也可以被多个标签拥有。
标签的嵌套
- 标签之间是可以互相嵌套的，标签套标签；
- 块儿级元素是可以嵌套所有的标签的；
- p标签不能够嵌套块儿级元素，但是它可以嵌套行内元素；
- 行内元素只能嵌套行内元素，不能够嵌套块儿级元素，非写了嵌套，也不报错，只不过是没有效果。
html常用标签
div标签与span标签
div标签用来定义一个块级元素，一般用在占位置布局；span标签用来定义内联(行内)元素，一般用在占文本布局。它们并无实际的意义，主要通过CSS样式为其赋予不同的表现。
img标签
img标签的写法：
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">说明：src中可以写内部的图片地址，也可以写外链的地址 。
a标签
a标签的功能
a标签指的是超链接标签，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
a标签的写法
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>a标签的href属性
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
a标签的target属性
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
列表标签
列表分为无序列表、有序列表和标题列表。
无序列表
无序列表的写法
<ul type="disc">
<li>第一项</li>
<li>第二项</li>
</ul>无序列表的type属性
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式
有序列表
<ol type="1" start="2">
<li>第一项</li>
<li>第二项</li>
</ol>有序列表的type属性:
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题列表
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>表格标签
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。
表格的基本结构
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>jason</td>
<td>杠娘</td>
</tr>
<tr>
<td>2</td>
<td>Yuan</td>
<td>日天</td>
</tr>
</tbody>
</table>表格的属性
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格
form表单
表单用于向服务器传输数据，从而实现用户与Web服务器的交互，表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等，表单还可以包含textarea、select、fieldset和 label标签。
表单属性
| 属性 |
描述 |
| accept-charset |
规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action |
规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete |
规定浏览器应该自动完成表单（默认：开启）。 |
| enctype |
规定被提交数据的编码（默认：url-encoded）。 |
| method |
规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name |
规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate |
规定浏览器不验证表单。 |
| target |
规定 action 属性中地址的目标（默认：_self）。 |
表单元素
基本概念
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。
所以表单一般用来收集用户的输入信息。
表单工作原理
访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
css及选择器
css介绍
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。
css注释
/*这是注释*/css的引入方式
行内样式
行内式是在标记的style属性中设定CSS样式。
<p style="color: red">Hello world.</p>内部样式
行内式是在标记的style属性中设定CSS样式。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>外部样式
将css写在一个单独的文件中，然后在页面进行引入。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>基本选择器
id选择器
#i1 {
background-color: red;
}类选择器
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}元素选择器
p {color: "red";}通用选择器
* {
color: white;
}组合选择器
后代选择器
li内部的a标签设置字体颜色
li a {
color: green;
}儿子选择器
div>p {
font-family: "Arial Black", arial-black, cursive;
}毗邻选择器
div+p {
margin: 5px;
}弟弟选择器
#i1~p {
border: 2px solid royalblue;
}属性选择器
用于选取带有指定属性的元素文章来源：https://www.toymoban.com/news/detail-732705.html
p[title] {
color: red;
}用于选取带有指定属性和值的元素文章来源地址https://www.toymoban.com/news/detail-732705.html
p[title="213"] {
color: green;
}到了这里，关于第45天：标签的分类和重要属性及常用标签、css介绍及选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
