基础标签

当我们在学习web前端的时候页面的标签是一定要掌握的，它的作用就好像是一块砖，单独拿着它，好像没啥用，但是一堆砖在一起，合理的去运用它，就可以得到一个房子，我们的页面就是通过各种标签来搭建起来的，基础是最重要的，接下来我给大家简单介绍一下我们常用的一些标签。

段落标签：
存放文本，自己独占着一行——p
图片标签 ：
存放图片——img

a 标签 ：超链接

  			href: 跳转的地址
  			target : 在哪里打开新页面 
	           			_blank : 在新窗口打开
	           			_self :  在当前窗口打开，默认值

a href=“文档结构.html” target="_self">文档/a>

最常用的标签，没有之一：独占一行，我们在今后的学习中将会经常性的用到这个标签
div>/div>

接下来给大家介绍一下我们的列表标签

首先是有序列表，用来展示一个列表项目（文本前会有序号）
ol>
li>
男装区
ol>
li>小男人区
li>大男人区
/ol>
/li>
li>女装区
li>不男不女区
/ol>

然后是无序列表，也是用来展示一个列表项目（文本没有序号，是一个圆点）
ul>
li>我是One
li>我是Two
/ul>

**最后是自定义列表 ** 他是一个特殊的列表
1.将标题和内容成对显示，作为一个子项
2.子项的数量不限一个dl中可以包含 1~n个子项

<dl>
	<!-- 第一个子项开始 -->
	<!--dt： 标题 -->
	<dt>标题</dt>
	<!--dd:  内容 -->
	<dd>我是对应的内容</dd>
	<!-- 第一个子项结束 -->

	<!-- 第二个子项开始 -->
	<dt>标题二</dt>
	<dd>我是内容二</dd>
	<!-- 第二个子项结束 -->
</dl>

文本修饰标签

在制作页面时，如果只有一个页面的话，那么内容可能会很枯燥，就好像你的房子建好了，但是是毛坯房，需要你去装修他一下，随意我们会用到一些文本修饰标签，接下来我给大家介绍一下。

内容加粗显示：b>/b>

换行标签：br />

内容斜体显示：i>/i>

内容添加一条删除线：s>/s>

内容添加一条下划线：u>/u>

内容已上标的形式显示：sup>/sup>

内容已下标的形式显示：sub>/sub>

内容加粗显示，具有语义化，表强调作用：strong>/strong>

比周围的字体大一号：big>/big>

比周边的字体小一号：small>/small>

font: 这个标签可以用来控制更多的字体外观
通过属性：
1.face: 字体
2.size: 大小
3.color: 颜色
font face=“楷体” size=“20” color=“pink”>/font>

文档结构

在制作页面时，如果没有一个文档分类结构的用户在浏览时会非常的不方便，接下来我给大家介绍几种文档结构的标题类以及表格表单类

h家族 用来做标题的
h1 ~ h6 从大到小
h1>我是老大/h1>
h2>我是老二/h2>
h3>我是老三/h3>
h4>我是老四/h4>
h5>我是老五/h5>
h6>我最小的/h6>

表格的整体框架：table border=“1px” align=“center” cellspacing=“0px” cellpadding=“0px”>/table>

表格的标题：caption>/caption>
单元行：tr>/tr>
表头： th>/th>
单元格：td>/td>

**form>**标签中通常会有很多子元素（文本字段、复选框、单选框、提交按钮等等），比如< input>、< button>、< select>、< textarea>等标签。

说明：表单内容可以是< input>、< textarea>、< button>、< select>、< option>、< optgroup>、< fieldset>、< label>等标签

CSS选择器

通常我们在构建页面时，标签起的的作用就好像是一个人体，但是一个人光秃秃的总是有点不雅观，所以我们这里会运用到一些CSS选择器以及CSS属性，用这个来创造一件衣服，看起来会舒适很多。

通用选择器：
它的优先级是最低的。
慎用，因为它会修改整个页面中，所有标签的样式。包括body,html在大型网站中，这个选择器是被禁止使用的，样式容易混乱。
作用：修改整个页面中，所有标签的样式
示例：*{
border: 2px solid black;
background-color: green;
}

标签选择器：
用标签名来定义的。
作用：当前页面中，所有叫这个名字的标签，全部都绑定上样式。
示例：div{
width: 200px;
height: 200px;
background-color: yellow;
}

class选择器 用 . 来标示自身
自定义名称(名字符合见名知意即可)
命名时：可以包含字母数字下划线，但是不能以数字开头

      特点： 具有重用性，可以给多个标签使用

      使用给对应的标签进行绑定 例如 <div class=".box"></div> 	

      class 的优先级 高于 标签选择器

示例：.box{
width: 500px;
color: red;
}

id选择器 用#来标示
自定义名称(名字符合见名知意即可)
命名时：可以包含字母数字下划线，但是不能以数字开头

	特点： id选择器不具有重用性， 具有唯一性。如果多个标签同时使用
	会造成不可预知的错误
	 id选择器要比class选择器的高

示例：#box{
width: 500px;
color: red;
}

群组选择器
只能用于大批量的样式，如果需要给个别标签去写样式，使用Class或id
示例：p,span,div,li{
color: blue;
}

子代选择器
在选中的标签的子级里边寻找
示例：.list2>li{
color: red;
}

后代选择器
在选中的标签下的所有标签，包括子级、子级的子级
示例：.list2 li{
color: red;
}

复合属性

background
url: 地址(本地地址，网络地址);

		  repeat : 默认值   水平和垂直都铺满;
		  repeat-x：只铺满水平方向(左右)
		  repeat-y: 只铺满垂直方向(上下);
		  no-repeat:  不平铺 (图片放不满，留出空白);
	
		background: url(../../../img/1.jpg) no-repeat;
		background-size: 50% 50%;
		border: 2px solid black;

background-position: 背景图的移动
background-position: 值1 值2;
值1：水平方向移动的距离
值2：垂直方向移动的距离

  		  值的形式：
  		  1. left center right   top center bottom
  		  2. px（像素）
  		  3. %（百分比）

  备注： 背景大小的百分比是参考标签自身的大小
  		 背景移动的百分比市参考图片自身的大小

复合属性 border
边框：宽度样式颜色
样式：实线 solid
虚线 dashed
点线 dotted

列表属性
清除列表的默认的项目符号：list-style: none;

可以设置标签自带的项目符号：list-style-type: 值;

将自带的项目符号，变成图标：list-style-image: url(…/…/1.jpg);

调整位置
inside: 项目图标的左侧和下一行文字对齐;
outside: 当前列表内容和下一行列表内容对齐，并不在图标位置(默认值);
list-style-position: inside;
list-style-position: outside;
文本属性
文字装饰
text-decoration：
none;正常显示
underline;加下线
line-through;删除线
overline;加顶线
capitalize:首字母大写
uppercase:全部大写
lowercase:全部小写

来源：CSDN

作者：CS_DGD

链接：https://blog.csdn.net/CS_DGD/article/details/103992406

标签

科普

web前端基础

基础标签

文本修饰标签

文档结构

CSS选择器