前端学习、HTML

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，就能实现类似的效果。