常用标签属性

白茶与风743

已于 2022-12-11 21:14:50 修改

阅读量621

点赞数

文章标签：前端

于 2022-12-10 15:24:13 首次发布

本文链接：https://blog.csdn.net/weixin_71452134/article/details/128265444

版权

html文档

doctype html:文档声明，告诉浏览器下面的代码将以h5的格式渲染，
:html标签为html文档里的根标签，是整个代码的起始标签。
head:头标签，标签包含了html文档的基础配置，但与页面内容无关，通常有页面搜索的关键字，页面基本描述，字符集，页面标题等基础配置。
body里包含的是页面的主体部分，也就是页面的结构标签都在 body标签中书写

html的基础标签之div

div 标签属于无意义（标签本身没有具体的含义，用于补充语义标签不够用的场景）标签，是html内置的基本标签之一，相应的属性为class，表示设置类型名，同一个文档中类型名可以重复。还可以设置ID属性，表示独一无二的名称，

    <div class="cat" id="tom">
      </div>

css

常用的选择器：

标签名，例如：div
类型名，例如：.cat
ID名，例如：#tom

基本css样式有

width:宽度,单位：px（pixel）,表示占有当前的像素个数
height：高度,单位：px（pixel），表示占有当前的像素个数
background-color：背景颜色，计算机三原色为红（red）,绿（green）,蓝（blue）

div布局盒模型样式：

margin：

margin-top:上外边距
margin-right:右外边距
margin-bottom：下外边距
margin-left：左外边距：

padding

padding–top：上内边距
padding–right;右内边距
padding-bottom：下内边距
padding–left：左内边距
box-sizing属性，让标签在设置其内边距后最终渲染大小不会发生改变.其有两个属性值：content-box为默认值，是标准盒模型，又叫做 W3C盒模型。border-box：怪异盒模型，则该标签的内边距会向内绘制，width和height的值为最终熏染的高度。
border

border-width：边框宽度，以px为单位
border-style:边框样式，
常见样式：
solid 实线
dashed 虚线
dotted 点线
double 双实线
border-color：边框颜色
边框简写:宽度，样式，颜色

配合标签

font-size:：设置字体大小，
over-flow：艺术隐藏

hidden (表示超出部分隐藏)，
scroll(超出部分为滑动展示)来解决溢出问题.
vertical-align:bottom; （水平排列的对齐方式）

vertical表示纵行，
horizontal,表示水平的，即横向。
align为对齐方式。
水平排列的两个标签默认纵向的对齐方式为低端对齐，(bottpm)
top为顶端对齐，
middle表示中心对齐，
这个标签只有两个标签有高度差才会生效
margin：0 auto（当前标签在父标签的坐标系中水平居中）

auto ：根据浏览器的宽度平均分配
水平方向置为auto来让当前标签在父标签的坐标系中水平居中
垂直方向可以根据具体要求设置外边距值
display: flex; justify-content: space-between;(弹性盒模型)

display: flex;默认排列方式为横向
justify-content: space-between;–此属性设置横向排列的字标签的间隙分布，
space-between,表示平均设置字标签中间的间隙;
space-evenly表示平均设置n个标签的左右两边的间隙
space-around; 表示为每个字标签设置其左右两边的间隙，
相邻字标签间隙叠加，效果如同字标签，设置水平方向的margin，
相邻margin会叠加。
border-radius: 5px：设置图片圆角
box-shadow:20px 20px 20px 20px black inset：阴影设计

第一个值—控制水平方向的投影位置，数值增大往右,数值减小往左，。可以为负
第二个值—控制垂直方向的投影位置，数值增大往下，数值减小网上，可以为负数
第三个值—控制投影模糊度，为0px则不模糊，不能为负数。数值越大越模糊
第四个值— 控制投影的尺寸，数值越大投影尺寸越大，反之越小，0px与标签本身一样大，如果为负数，则投影尺寸小于标签本省，
第五个值— 投影颜色
第六个值—通过设置inset变为内阴影，默认为外影隐
display：block（块级元素，独占一行）
display：inline-block（行内块级元素，与其相邻的元素也要一起设置）
text-align:center(文本横向居中)
line-height（每行文字占用的高度）
height（行高）

设置line-height大小与height大小一致，就能纵向居中（释：设置line-height为50px，文字只有20px，那么浏览器就会将剩下的30px平均分设在文字的上下各15px，文字就会纵向居中。）

语义化标签

以下文本装饰类的标签可以嵌套使用，比如一段文字，加粗显示并斜体显示，可以如下：

<b><i>test</i></b>
<i><b>test</b></i>

span

不能设置width和height，大小由内容决定。
行内元素，默认display为inline，可同行排列
margin和padding有效
h1~h6标签，（标题标签，字号依次递减）
br标签，单标签，对文本进行换行。
b和strong:将其内部的文本内容加粗。
i和em:让其内部的文本内容以斜体字展示，
一般用于引用文字展示部分
s和del：文字中间有一条横线作为删除线，不再使用或者已从文本中移除。
下划线u和ins：让其内部的文本内容在渲染显示时拥有下划线。

图片标签

img
属性名|解释

src—资源文件路径URL，可以是本地图片路径，也可以是网络图片URL。
alt—图片文字说明，当图片无法正确加载时显示
title—图片名称属性，当鼠标进入图片范围是鼠标右下角显示图片名称、
width—设置图片宽度，以px为单位，所以设置时不需要加px单位，
height—设置图片的高度，以px为单位，设置时不需要加px，
border—设置图片边框宽度，默认为黑色，以px为单位，

锚点标签

a --（ anchor）锚点标签，

a标签有两个作用：
作为超链接使用。
页面内跳转指定标签。

其属性为

href|url,表示超链接，可以跳转到指定网站
href|#id,则可以快速定位到页面内对应id的标签
target|默认为_self,超链接对应页面在当前页面加载
target|_blank,表示新建页面加载，不影响当前页面。

列表标签

ol-有序列表，管理展示n个li标签，li-列表项，默认显示数字序号，从一开始。
ul-无序列表,管理展示n个li标签,默认显示圆点序号.
dl-描述列表,管理展示n个dt,dt-描述项分组,每个分组可以有N个dd来描述此分组

表格标签

table–表示表格，通过管理子项来渲染显示一个表格，
其子项有：

thead–表头标签
tbody–标体标签
tr–表示表格中的一行
th–表头中的每一项的描述，必须写在thead中
td–表格数据项，由tr管理

表格标签相关属性：

width—设置table宽度，以px为单位。
heigth—设置table高度，以px为单位
border—设置表格边框宽度，默认每一边框
cellspacing—设置单元格与单元格之间的间距，px
cellpadding—设置单元格与文本内容之间间距，px
align—设置文本对齐方式，left，center，right。如果给table设置，则影响表头对齐方式，如果给tr设置，则会影响当前的对齐方式，
rowspan—为td设置，表示从当前被设置的单元格往下合并n个单元格，
colspan—为td设置，表示从当前被设置的单元格开始往后合并n个单元格。