HTML | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第1天

一、HTML是什么

HTML是一种超文本标记语言,它是网页的框架结构。很多人都知道前端有三个主要组成部分：HTML，CSS，和JavaScript。HTML相当于是一个人的骨骼，CSS是一个人的肌肤，JavaScript就是人的灵魂。所以我们让一个人活动起来，首先要建立他的骨骼，然后才能弄出肌肤和灵魂。

二、HTML的代码构成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

它是由html head title body 标签构成

三、HTML的主要元素

标题标签 <h1></h1><h2></h2>...<h6></h6>
段落标签 <p></p>
换行标签 <br/>
水平线标签 <hr/>
图片标签 <img/>
超链接 <a></a>
文本格式化标签 <b></b> <em></em> <i></i>
列表标签 <ul></ul> <li></li>
表格标签 <tr></tr> <td></td>
div标签<div></div>
span标签<span></span>

四、块级元素和行内元素的区别

块级元素能够自动换行开启新的一行，能够设置宽高，margin和padding对上下左右四个方向设置均有效，其中最具有代表性的就是div标签，其余的有p、h1~h6、table、ul、li、ol标签等等。
行内元素的特点：相邻的行内元素不换行，设置宽高无效，margin设置仅左右方向有效，上下无效，padding设置上右下左都有效。水平方向上padding-left，padding-right，margin-left，margin-right都有边距效果，但是垂直方向上padding-top、padding-bottom、margin-top、margin-bottom都不会产生边距效果。

五、HTML的表单元素

1）作用

提交数据，使页面具有交互性

2）标签

<form name="表单名称" action="提交的地址" method="提交的方式get（默认值）/post"> 表单元素</form>

3）表单元素

单行文本框 <input type="text"/>
密码框 <input type="password"/>
单选按钮 <input type="radio"/>
多选按钮 <input type="checkbox"/>
提交按钮 <input type="submit"/>
重置按钮 <input type="reset"/>
提交按钮 <button></button>
重置按钮 <button type="reset"></button>

六、HTML5新增元素

邮箱 input type="email"
网址 url 要有协议协议后要有内容、
搜索 search
颜色 color
数字 number
范围（滑块） range
电话 tel
日期 date
周 week
月 month

七、总结

HTML将网页的架构已经搭建好，只需往框架里填写内容即可，真正的重点还需要后面继续学习。

HTML ｜ 青训营笔记