html是由一些标签构成的,标签之间可以嵌套,每个标签都有开始标签和结束标签,也有部分标签只有开始标签,没有结束标签。html的标签也可以成为元素。(树形结构)
html文件的最顶层标签就是html。
head用来放属性信息,body放页面上显示的内容。
输入!tab直接生成html的初始模板。
语义化标签
语义化标签代表着一个特定的功能和用途
一、标题标签
<h> </h>
2.段落标签
<p> </p>
3.换行标签
在编辑中换行符、制表符、多个连续的空格,都是无效的,如果要换行,应该使用br标签
br标签是一个单标签,不需要结束标签
4.格式化标签
独占一行的标签,也叫做块级元素,例如标题标签。
不独占一行的标签,也叫行内元素。
块级和行内其实可以转换。
5.图片标签
img,单标签
img必须带有一个src属性,通过这个属性来指定要显示的图片的路径。
alt是 如果图片挂了,就会显示alt的文字。
绝对路径和相对路径都可以,也可以是网络路径。其中,相对路径的基准目录就是当前html所在的目录。
6.a标签,超链接
二、表格标签
border是表格标签
三、列表标签
列表标签包括有序列表(ol)、无序列表(ul)、列表项(li)
四、表单标签
表单标签是与用户交互的重要途径。
form标签:进行前后端交互,功能是构造一个HTTP请求。
input标签:有很多形态,这些形态表示不同的元素效果。
使用单选框时,需要设置相同的name属性,此时才会有互斥效果。默认情况下,点到圆点才会选择到,我们对其进行label标签处理。label标签的for里对应着元素的id。
id是一个特殊的属性,是每个元素的身份标识,每个html元素都有id,要求一个页面上的id必须唯一
加check会默认选中
file类型可以用在上传头像、上传图片等
下拉菜单
select
里面的每个选项,是一个option标签,加selected来默认选中选项
cols表示一行能写多少字符,rows是多少列。内容会自动添加滑动条。
无语义化标签
还有两个特殊的标签,无语义标签。div和span。也就是这两个没有什么特殊的用途,如果我们不知道某个东西使用什么标签,就可以用它两。
div默认是独占一行的块级元素。
span默认是不独占一行的行内元素。
这两个标签,搭配css和js,就可以实现语义化标签的大部分功能,也就是一个页面基本光使用div,就能实现类似的效果。