html盒子模型元素占位高度,认识HTML标签、CSS样式、盒模型

HTML标签

HTML代码注释 < !--注释文字 -->

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

标签

属性

根标签

头标签

在标签之间的文字内容是网页的标题信息

填写javascript相关代码

填写css相关代码

标签将css样式文件链接到HTML文件内

meta标签被称为可视区域meta标签，

内容标签

标题标签(因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：

腾讯网

)

段落标签

在浏览器中 默认用斜体表示

用粗体表示

作用就是为了设置单独的样式用的

标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了)，而是它的语义：引用别人的话。

作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。浏览器对

标签的解析是缩进样式。

需要加回车换行的地方加入
，
标签作用相当于word文档中的回车。与以前我们学过的标签不一样，
标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有
、

---

和

为你的网页中添加一些空格

---

添加水平横线,

---

标签和
标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。

可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份,在浏览器上显示的样式为斜体;

当代码为一行代码时，你就可以使用标签了.注：如果是多行代码，可以使用

标签。

为你的网页加入大段代码

链接显示的文本; 1.只要为文本加入a标签后，文字的颜色就会自动变为蓝色；2.标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开则使用click here!;3.标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件,如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔;对此影评有何感想，发送邮件给我、cc：抄送，bcc：密文抄送；

标签来插入图片1、src：标识图像的位置；2、alt：指定图像的描述性文本，当图像不可见时(下载不成功时)，可看到该属性指定的文本；3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；4、图像可以是GIF，PNG，JPEG格式的图像文件。

• 我的第一个列表信息

新闻信息列表，ul-li是没有前后顺序的信息列表。

1. 我的第一个列表信息。
2. 我的第一个列表信息。

标签来制作有序列表来展示。

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个

标签中，这个

标签的作用就相当于一个容器。

…

增加id属性；

创建表格的四个元素：table、tbody、tr、th、td；1、

：整个表格以标记结束。2、…：如果不加 , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。(通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。)3、…：表格的一行，所以有几对tr 表格就有几行。4、…：表格的一个单元格，一行中包含几对...，说明一行中就有几列。5、…：表格的头部的一个单元格，表格表头。6、表格中列的个数，取决于一行中数据单元格的个数。总结：1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的；2、表头，也就是th标签中的文本默认为粗体并且居中显示。。。。为它添加边框。。。

，注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。

target 常见的4个值

1、-blank 在新窗口中打开；

2、-self 在当前窗口打开(默认值)；

3、-parent 在父窗口打开；

4、-top 在当前浏览器中打开，且框架会消失。

用户名:

密码:

在这里输入内容,支持多行文本展示

男

女

跑步

打球

登山

注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。

爱好:

看书

旅游

运动

购物

爱好:

看书

旅游

运动

购物

注意：下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击)

CSS样式

CSS的基本知识

1、CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

css 样式由选择符和声明组成，而声明又由属性和值组成如：

p{

font-size:12px;

color:red;

}

2、就像在Html的注释一样，在CSS中也有注释语句：用/注释语句/来标明(Html中使用 < !--注释语句-->)

CSS的三种样式

*三种样式

1、内联式css样式，直接写在现有的HTML标签中：

这里文字是红色。

2、嵌入式css样式，写在当前的文件中，嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在

之间。如下代码：

span{

color:red;

}

3、外部式css样式，写在单独的一个文件中，这个css样式文件以“.css”为扩展名，在

内(不是在