一.html的框架结构
1.文档声明
*声明是为了让浏览器知道当前的页面是html5页面,需要用html5的标准去识别页面的内容。
**声明的样式:
2.html元素
- html文档的顶级元素(根),一个html文档里只有一个html元素。
3.head元素
- head是网页的头部,基本上对网页的设置都在head中实现。
head有两个主要属性:title属性和meat属性
title属性是用来设置网页的标题,
如:
- meat属性是用来设置网页的字符编码,可以让浏览器更加准确的显示是每一个文字,如果不设置或者设置错误的话,会导致网页出现乱码。一般情况下都是使用utf-8,utf-8几乎包含了世界上所有的文字。
utf-8样式:
4.body元素
- body元素中的内容是我们在浏览器窗口看到的内容,就是网页展现出来的具体内容。
5.快捷键
要快速打出网页的框架,可以使用快捷键英文!+ente(回车键)即可快速实现。
如:
二.标签
1.常见的标签
+标题标签:
标题标签通常用来做标题,有1-6级标题,重要性逐渐递减,其中h1最高,h6最低。标题标签的特点有:文字都加粗;文字都会变大,从h1-h6文字会逐渐变小;所有文字会独占一行。
如:
注意点
h1标签对网页非常重要,在开发中有着特定的使用场景,如:标题,万网页的logo部分。
+段落标签:
段落标签主要用于在文章的页面中分段显示。特点是段落之间有间隙并且独占一行。
如:
换行标签:
主要是让文字强制换行限制,是一个单标签。
水平线标签:
主要是分割不同主题内容的水平线,同样也是一个标签。
图片标签(多媒体标签):![]()
主要是在网页中显示图片,但
是个人妖标签,
内含src、alt和title属性。
src属性包含了你想嵌入的图片的文件路径;
alt属性主要是用来替换文本,当图片加载失败时,才显示alt的文本;
title属性是提示文本,当鼠标悬停时,才显示的文本,同时title属性不仅仅可以用于图片标签,还可以用于其他标签。 如:
超链接标签:
主要是实现点击之后,从一个页面跳转到另一个页面,是双标签,内含href属性、target属性(target属性不常用)和#属性。
href属性是Hypertext Reference的简称,指定要打开的URL地址,外部链接,也可以是一个本地地址,内部链接。
targer属性是该属性指定在何处显示链接的资源。_self:默认覆盖原来的窗口 _blank:打开一个新的窗口。
#属性:不会调转页面,但是会刷新页面。
如:
注释:编辑器使用Ctrl+/快捷键
如:
列表元素
在网页中有很多数据是以列表的形式存在的。
列表有无序列表、有序列表和自定义列表。
无序标签(ol)
无序标签在网页中表示一组无顺序之分的列表,并且列表的每一项前默认显示圆点标识。无序列表有ul标签和li标签两种。
ul标签表示无序列表的整体,ul标签中只允许包含li标签;
li标签:表示无序列表的每一项,li标签可以包含任意内容。
如:
有序列表(ol)
有序列表在网页中表示一组有顺序之分的列表,并且列表的每一项前默认显示序号标识。 有序列表有ol标签和li标签。
ol标签表示有序列表的整体,ol标签表中只允许包含li标签。
li标签:表示有序列表的每一项,li标签可以包含任意内容。
自定义列表(dl)
自定义列表在网页的底部导航中通常会使用自定义列表实现,dl标签中只允许包含dt和dd标签。列表中每一项的具体描述,是对 dt 的描述、解释、补充,而且一个dt后面一般紧跟着1个或者多个dd。
如:
表格元素
应用场景:在网页中以行+列的单元格的方式整齐展示和数据,如:学生成绩表,课程表等等。
表格中有以下元素:
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→文本框
具体使用情况如下图:
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:下拉菜单的默认选中
如图:
textarea文本域元素:
1.场景:在网页中提供可输入多行文本的表单控件
2.cols:规定了文本域内可见宽度
3.rows:规定了文本域内可见行数
4.右下角可以拖拽改变大小
5.禁止缩放:resize: none;
6.水平缩放:resize: horizontal;
7.垂直缩放:resize: vertical;
8.水平垂直缩放:resize: both;
如图:
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)