本文已参与「新人创作礼」活动，一起开启掘金创作之路。

HTML

这边可以用的编译软件是Visual Studio Code

只要在界面敲下html:5然后回车一下就可以构建出一段框架。

<!DOCTYPE html>     //这一行表明了是html
<html lang="en">    //表示当前网页使用的语言是English
<head>     //head里面的内容主要是一些页面的属性，和页面显示没有关系
    <meta charset="UTF-8">    //用的字符集
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>   //浏览器标签页的标题
</head>
<body>   //这里面就是浏览器显示的内容
    
</body>
</html>

页面上有很多的标签是我们之后要学习的。

HTML只是描述页面上的东西，不表达逻辑。

HTML里面的注释是能被所有人看到的。

标签里面的属性之间是没有先后顺序的

h标签

h标签从1到6，数字越大，里面的内容字体越小，这个标签用来表示标题。双标签

p标签

这个是段落标签，用来段落与段落之间的分割。p标签独占一行，双标签

br标签

用于换行的。普通的换行是会被HTML忽略的。是一个单标签，只有开始标签没有结尾标签

img标签

这个是一个图片标签，是一个单标签。里面可以写很多的属性，最重要的是src，描述图片的位置。路径可以是一个相对路径，可以是绝对路径，还可以是网络路径。alt:表示如果图片没有加载出来的话，就会用这个代替图片来显示。title:是鼠标放到图片上面的时候就会显示。

a标签

超链接标签，点击一下就会跳转页面。跳转到什么页面根据的是href属性所指向的页面。也可以用来下载文件。href = "text.zip"这样就可以下载。把图片放到a标签，就可以做到点击图片跳转。当然也可以做一个锚点连接。

表格标签

这是一组的标签。如果不加修饰的表格是比较难看的，但是我们可以通过属性还有CSS的样式让它变得好看

table标签

表示整个表格，可以用于对齐

tr标签

表示一行

td标签

表示一列

th标签

表示表头一列

列表标签

用来罗列一组并列的数据分为三种

1.无序列表
2.有序列表
3.自定义列表

列表标签里面要用li标签来显示内容，自定义标签是不一样的。

ul无序列表标签

每个序列的前面是一个小圆点

ol有序列表标签

每个序列前面是数字

dl自定义列表标签

标签里面是用dt标签表示头列dd标签是显示后面的内容

form表单标签

在form里面可以放一些和用户交互的组件

input标签

这个标签就是可以用在form里面，有很多的形态。可以通过修改type来变成其他形态

 text:单行文本框
 password:单行密码框
 radio:单选框
 checkbox:多选框
 button:按钮

HTML学习