前端标签

简介: 前端标签

要注意看文档,文档比较稳妥而且会有细节提示(比如元素是否具有继承性)。

加粗

<strong></strong>或者<b></b>

font-weight:400;(正常字体)

font-weight:800(加粗)

元素选择符

在口语中,多称为元素选择器

image.png

标签选择器 E{属性}

直接以标签开头:例如,设置整个页面的背景颜色(需要给html{background-color:red;},此处不需要走自定义标签名而可以直接设置样式,即为:标签选择器)

类选择器 .E{}  ->  class="E"

类标签选择器

注意:可读性较强,不能以中文和数字开头,可以在字母后面添加数字"a~Z 数字 -连接符"都可。

类标签选择器,以点开头设置样式,在引用中则是使用class标记采用样式。

id选择器 #E{}   -> id="E"

注意:id选择器是唯一选择,和类选择的命名规范一样,只是id选择器在命名的时候采用的是#,而类选择器是以.来规范。

浏览加载网页的简化版本:

1. 浏览器载入HTML文件(比如从网络上获取)。

2. 将HTML文件转化成一个DOM(Document Object Model),DOM是文件在计算机内存中的表现形式,下一节将更加详细的解释DOM。

3. 接下来,浏览器会拉取该HTML相关的大部分资源,比如嵌入到页面的图片、视频和CSS样式。JavaScript则会稍后进行处理,简单起见,同时此节主讲CSS,所以这里对如何加载JavaScript不会展开叙述。

4. 浏览器拉取到CSS之后会进行解析,根据选择器的不同类型(比如element、class、id等等)把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器,将不同的规则(基于选择器的规则,如元素选择器、类选择器、id选择器等)应用在对应的DOM的节点中,并添加节点依赖的样式(这个中间步骤称为渲染树)。

5. 上述的规则应用于渲染树之后,渲染树会依照应该出现的结构进行布局。

6. 网页展示在屏幕上(这一步被称为着色)。

image.png

DOM补充说明:

文档对象模型DOM

DOM即文档对象模型,是W3C制定的标准接口规范,是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型,将文档作为一个树形结构,树的每个结点表示了一个HTML标签或标签内的文本项。DOM树结构精确地描述了HTML文档中标签间的相互关联性。将HTML或XML文档转化为DOM树的过程称为解(parse)。HTML文档被解析后,转化为DOM树,因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构,还定义了结点对象的行为,利用对象的方法和属性,可以方便地访问、修改、添加和删除DOM树的结点和内容。

标签的分类:

标签有三类,分别是块状标签行内标签还有衍生出来的行内块标签

第一大类:块级标签

1)例如:html、body、header、footer、div、h1~h6、p、ul、ol、li等

2)同一级的标签,从上向下依次排列,各独占一行,即【竖排】

3)标签的宽度,默认把父标签(上一级标签)横向【填满】;

4)标签的高度,默认为标签内的内容的高度,当没有内容时为0;

5)可以设置标签的宽度和高度

(6)可以设置标签的上右下左四个方向的内外间距

第二大类:行内标签

1)例如:<a><span><b><i><em>等;

2)同一级的标签,从左向右,行内依次排列,一行显示不下换行,即【行内横排】;

3)标签的宽度和高度,为标签内的内容的宽高,当没有内容时宽为0;

4)设置宽度和高度被浏览器忽略;

(5)只能设置标签左右两个方向的内外间距

第三大类:行内块标签

1)例如 :<img><input><button>等;

2)可以在一行内横着排的块,即【行内横排的块】;

3)除宽度默认由内容决定、横排外,其它跟块相同;

如何快速分辨一个标签的分类

1)标签复制一份,各占一行则是块状标签;

2)排成一行时,设置标签的高度,无效则是行内元素;

(3)否则是行内块。

标签的盒子模型知识要点

1)浏览器为了计算并排版标签,把每一个标签都看作一个长方形的【盒子】,即盒子模型;

2)一个盒子包括:

(2.1)盒子在排版时,四周要不要留空白间距呢?即盒子的【外间距】,英文margin

2.2)盒子被目视时,有多大呢?需要从盒子的四个边框算起,即【边框】,英文border;

2.3)盒子能盛放东西,需要为被盛放的东西预留多大空间,即内容区的【宽】和【高】,英文width和height;

(2.4)盒子内盛放的内容是挨着边框放,还是留点间距呢?即【内填充】,英文padding

calc()=calc(四则运算)

/*  1.利用calc()函数,把页头区内四个子模块的高度相加,

动态计算出页头区的高度;

2. calc与(之间不能有空格;

3. 运算符号+ 和 - 两边都需要留空格;

4.可以实现不同类型数值之间的运算*/

height: calc(36px + 121px + 30px + 522px);

image.png

在上图案例中该元素的宽度始终小于其父宽度的100%

相关文章
|
6月前
|
存储 JavaScript 前端开发
前端xss攻击——规避innerHtml过滤标签节点及属性
前端xss攻击——规避innerHtml过滤标签节点及属性
385 4
|
6月前
|
前端开发
前端通过input标签封装Upload组件实现文件上传
前端通过input标签封装Upload组件实现文件上传
233 0
|
11月前
|
前端开发
【前端学习从青铜到王者】—HTML常用标签(二)
【前端学习从青铜到王者】—HTML常用标签(二)
|
前端开发 JavaScript
前端基础 - JavaScript修改标签样式的属性值
前端基础 - JavaScript修改标签样式的属性值
63 0
|
前端开发
前端基础 - HTML常用标签
前端基础 - HTML常用标签
44 0
|
2月前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
2月前
|
前端开发 BI
前端基础(十)_标签分类(行级标签、块级标签、行块标签)
本文阐述了HTML标签的分类,包括行级标签、块级标签和行块标签,并展示了如何使用CSS的display属性实现标签类型之间的转换。
60 3
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
113 1
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
51 13
|
5月前
|
数据采集 移动开发 前端开发
前端基本标签,快捷键
前端基本标签,快捷键