06-09 html总结经验

198 阅读7分钟

一.html的框架结构

1.文档声明

*声明是为了让浏览器知道当前的页面是html5页面,需要用html5的标准去识别页面的内容。
**声明的样式:Snipaste_2022-06-09_14-25-09.png

2.html元素

  • html文档的顶级元素(根),一个html文档里只有一个html元素。

3.head元素

  • head是网页的头部,基本上对网页的设置都在head中实现。
    head有两个主要属性:title属性和meat属性
    title属性是用来设置网页的标题,
    如:

Snipaste_2022-06-09_14-31-40.png

  • meat属性是用来设置网页的字符编码,可以让浏览器更加准确的显示是每一个文字,如果不设置或者设置错误的话,会导致网页出现乱码。一般情况下都是使用utf-8,utf-8几乎包含了世界上所有的文字。
    utf-8样式:

Snipaste_2022-06-09_14-36-51.png

4.body元素

  • body元素中的内容是我们在浏览器窗口看到的内容,就是网页展现出来的具体内容。

5.快捷键

要快速打出网页的框架,可以使用快捷键英文!+ente(回车键)即可快速实现。
如:

Snipaste_2022-06-09_14-51-49.png

二.标签

1.常见的标签

+标题标签:

标题标签通常用来做标题,有1-6级标题,重要性逐渐递减,其中h1最高,h6最低。标题标签的特点有:文字都加粗;文字都会变大,从h1-h6文字会逐渐变小;所有文字会独占一行。
如:
Snipaste_2022-06-09_15-20-44.png 注意点
h1标签对网页非常重要,在开发中有着特定的使用场景,如:标题,万网页的logo部分。

+段落标签:

段落标签主要用于在文章的页面中分段显示。特点是段落之间有间隙并且独占一行。
如:

Snipaste_2022-06-09_15-26-12.png

换行标签:


主要是让文字强制换行限制,是一个单标签。

水平线标签:

主要是分割不同主题内容的水平线,同样也是一个标签。
图片标签(多媒体标签):

主要是在网页中显示图片,但是个人妖标签,内含src、alt和title属性。

src属性包含了你想嵌入的图片的文件路径;

alt属性主要是用来替换文本,当图片加载失败时,才显示alt的文本;

title属性是提示文本,当鼠标悬停时,才显示的文本,同时title属性不仅仅可以用于图片标签,还可以用于其他标签。 如:

Snipaste_2022-06-09_15-52-09.png

超链接标签:

主要是实现点击之后,从一个页面跳转到另一个页面,是双标签,内含href属性、target属性(target属性不常用)和#属性。

href属性是Hypertext Reference的简称,指定要打开的URL地址,外部链接,也可以是一个本地地址,内部链接。

targer属性是该属性指定在何处显示链接的资源。_self:默认覆盖原来的窗口 _blank:打开一个新的窗口。

#属性:不会调转页面,但是会刷新页面。

如:

Snipaste_2022-06-09_16-12-39.png

注释:编辑器使用Ctrl+/快捷键

如:

Snipaste_2022-06-09_17-39-32.png

列表元素

在网页中有很多数据是以列表的形式存在的。
列表有无序列表、有序列表和自定义列表。

无序标签(ol)

无序标签在网页中表示一组无顺序之分的列表,并且列表的每一项前默认显示圆点标识。无序列表有ul标签和li标签两种。

ul标签表示无序列表的整体,ul标签中只允许包含li标签;

li标签:表示无序列表的每一项,li标签可以包含任意内容。

如:

Snipaste_2022-06-09_16-23-07.png

有序列表(ol)

有序列表在网页中表示一组有顺序之分的列表,并且列表的每一项前默认显示序号标识。 有序列表有ol标签和li标签。

ol标签表示有序列表的整体,ol标签表中只允许包含li标签。

li标签:表示有序列表的每一项,li标签可以包含任意内容。

自定义列表(dl)

自定义列表在网页的底部导航中通常会使用自定义列表实现,dl标签中只允许包含dt和dd标签。列表中每一项的具体描述,是对 dt 的描述、解释、补充,而且一个dt后面一般紧跟着1个或者多个dd。

如:

Snipaste_2022-06-09_16-34-27.png

表格元素

应用场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表,课程表等等。
表格中有以下元素:
1.table: 表格
2.tr(table row): 表格中的行
3.td(table data) :行中的单元格
4.thead :表格的表头
5.tbody :表格的主体
6.tfoot :表格的页脚
7.caption :表格的标题
8.th :表格的表头单元格

元素中又有以下几种属性:border, width, height,border-collapse CSS,table { border-collapse: collapse; }.

其中border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的,
table { border-collapse: collapse; } 合并单元格的边框

表单元素

表单元素在网页中显示收集用户信息的表单效果,如:登录页、注册页。

常见的表单元素和表单项元素:\

1.form 表单 一般情况下,其他表单相关元素都是它的后代元素
2.input 单行文本输入框、单选框、复选框、按钮等元素
3.textarea 多行文本框
4.select、option 下拉选择框
5.button 按钮
6.label 表单元素的标题

input元素中的type属性:
1.text:文本输入框(明文输入) 场景:在网页中显示输入单行文本的表单控件, 可以使用placeholder,提示用户输入内容。
2.password:文本输入框(密文输入) 场景:在网页中显示输入密码的表单控件, 可以使用placeholder,提示用户输入内容。
3.radio:单选框 场景:在网页中显示多选一的单选表单控件,可以使用name实现多选一,可以使用checked表示默认选中。
4.checkbox:复选框 场景:在网页中显示多选多的多选表单控件,可以使用checked表示默认选中。
5.button:普通按钮 场景:在网页中显示不同功能的按钮表单控件。
6.reset:重置按钮 场景:点击之后,恢复表单默认值。
7.submit:提交表单数据给服务器 场景:提交按钮,点击后之后提交数据给后端服务器。
8.file:文件上传 场景:在网页中显示文件选择的表单控件,可以使用multiple表示多文件选择。
9.注意点:type属性值不要拼错或者多加空格,否则相当于设置了默认值状态:text→文本框

具体使用情况如下图:

Snipaste_2022-06-09_18-01-24.png

10.readonly:只读
11.disabled:禁用
12.checked:默认被选中,只有当type为radio或checkbox时可用
13.autofocus:当页面加载时,自动聚焦
14.name:名字,在提交数据给服务器时,可用于区分数据类型,当前控件的含义,   提交之后可以告诉后端发送过去的数据是什么含义   后端接收到数据的格式是:name的属性值 = value的属性值 15.value:取值 用户输入的内容,提交之后会发送给后端服务器\

button元素的使用:
1.场景:在网页中显示用户点击的按钮
2.button的type的取值,可以是button,submit,reset
3.谷歌浏览器中button默认是提交按钮
3.button标签是双标签,更便于包裹其他内容:文字、图片等

select下拉菜单元素:
1.场景:在网页中提供多个选择项的下拉菜单表单控件
2.select标签:下拉菜单的整体, option标签:下拉菜单的每一项
3.selected:下拉菜单的默认选中 如图:

Snipaste_2022-06-09_18-12-28.png

Snipaste_2022-06-09_18-12-43.png

textarea文本域元素:
1.场景:在网页中提供可输入多行文本的表单控件
2.cols:规定了文本域内可见宽度
3.rows:规定了文本域内可见行数
4.右下角可以拖拽改变大小
5.禁止缩放:resize: none;
6.水平缩放:resize: horizontal;
7.垂直缩放:resize: vertical;
8.水平垂直缩放:resize: both;
如图:

Snipaste_2022-06-09_18-15-44.png

Snipaste_2022-06-09_18-15-59.png

label元素:
1.场景:常用于绑定内容与表单标签的关系
2.使用方式一:label for id
3.使用方式二:label包裹整个元素\

布尔属性(boolean attributes) :
1.常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
2.布尔属性可以没有属性值,写上属性名就代表使用这个属性
3.如果要给布尔属性设值,值就是属性名本身

form常见的属性:
1.form通常作为表单元素的父元素,将整个表单作为一个整体来进行操作
2.对整个表单进行重置 或 对整个表单的数据进行提交
3.action属性:用于提交表单数据的请求URL
4.method属性:请求方法(get和post),默认是get
5.target属性:在什么地方打开URL(参考a元素的target)