这是我参与「第四届青训营 」笔记创作活动的的第11天。
前言
HTML作为前端的入门，简单易学，这节课带大家入门HTML，希望给大家有所帮助。
什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
- HTML 标签通常是成对出现的，比如 和
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
HTML 元素
"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.
但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:
HTML 元素:
<p>这是一个段落。</p>
HTML 编辑器推荐
可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：
- VS Code：code.visualstudio.com/
- Sublime Text：www.sublimetext.com/
你可以从以上软件的官网中下载对应的软件，按步骤安装即可。
接下来我们将为大家演示如何使用 VS Code 工具来创建 HTML 文件。
01.HTML 元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（empty content）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
02.HTML实战
1.第一个HTML:
<!--
1.HTML的注释
2.加上以下代码为HTML5,不加为HTML4
3.HTML不区分大小写，语法松散
-->
<!doctype heml>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题,显示在网页左上角-->
<title>梦阳辰，你好！</title>
</head>
<!--体-->
<body>
欢迎来到HTML!
<body>
</html>
2.基本标签
分段：
<p> 内容</p>
标题字:
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
独目标记：
换行：<!--换行-->
内容<br>内容
横线：
<hr>
<hr color='red' width='50%'>
这里单引号,双引号都可以，甚至可以不用。
预留格式：
<pre>
内容
</pre>
其他：
删除字：
<del>内容</del>
插入字：
<ins>内容</ins>
粗体字：
<b>内容</b>
斜体字：
<i>内容</i>
<!--字体标签-->:
<font color='red' size ='50'>内容</font>
数字的右上角加数：如10的平方
10<sup>2</sup>
数字的右下角加数：
10<sub>m</sub>
03.实体符号
当内容与与HMTL语法相冲突时采用实体符号。
实体符号特点：以&开始，以;结束。
b<a>c
<!--<是小于号，>是大于号-->
空格：
04.表格
1.画一个表格
<!doctype html>
<html>
<head>
<title>表格</title>
</head>
<body>
<br><br> <!--表示换行-->
<center><h2>信息表</h2></center>
<hr> <!--横线-->
<table align="center" border="1px" width="60%" height="150px"> <!--表,居中,边框为2像素宽,宽度占比，也可用像素-->
<tr align="center"> <!--行 ,对齐方式-->
<td>a</td> <!--一个小格-->
<td>a</td>
<td>a</td>
</tr>
<tr> <!--行-->
<td>b</td> <!--一个小格-->
<td>b</td>
<td>b</td>
</tr>
<tr> <!--行-->
<td align="center">c</td> <!--一个小格,内容的对齐方式-->
<td>c</td>
<td>c</td>
</tr>
</table>
</body>
<html>
2.单元格合并
上下合并：删除下面的那行，上行的格加rowspan。
左右合并:随便删除哪个，剩余的哪个加colspan.
<!doctype html>
<html>
<head>
<title>单元格合并</title>
</head>
<body>
<br><br> <!--表示换行-->
<center><h2>信息表</h2></center>
<hr> <!--横线-->
<table align="center" border="2px" width="30%" height="150px"> <!--表,居中,边框为2像素宽,宽度占比，也可用像素-->
<tr align="center"> <!--行 ,对齐方式-->
<td>a</td> <!--一个小格-->
<td>a</td>
<td>a</td>
</tr>
<tr> <!--行-->
<td>a</td> <!--一个小格-->
<td>a</td>
<td rowspan="2">aaa</td>
</tr>
<tr> <!--行-->
<td align="center">a</td> <!--一个小格,内容的对齐方式-->
<td>a</td>
<!--
<td>a</td>
-->
</tr>
</table>
</body>
<html>
3.th标签
第一行字段，比td多的是加粗和居中。
<th>内容</th>
<th>内容</th>
<th>内容</th>
4.thead,tbody,tfoot标签
这三个， 将表格分割。
thead表示头，tboby表示中间内容，tfoot表示脚。
05.背景颜色和背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor:设置背景色
background:设置背景图片
-->
<body bgcolor="red" background="image/ma.jpg">
asdfa
</body>
</html>
06.图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
<img src="ma.jpg" width="100px" title="我是梦阳辰！"/><!--值设置宽度就可以了，高度会随着改变，-->
<br><br>
<img src="ma.jpg" height="200px"/>
<!--img标签就是图片标签，
src属性为路径，
width为宽度
titel为鼠标悬停时显示的信息
alt设置图片加载失败时显示的提示信息
开始标签和结束标签没有内容时，可以省略结束标签，并在前面加一个反斜杠-->
</body>
</html>
07.超链接
通过超链接浏览器可以向服务器发送请求。
浏览器向服务器发送数据（请求：request)
服务器向浏览器发送数据（响应：response）
B/s结构的系统：每一个请求都会对应一个响应。
B–>请求—>s
s–>响应—>s
href:hot references 热引用
href属性为一个地址，可以是本地路径
超链接有一个target属性：
_blank：新窗口
_self:当前窗口（默认窗口)
_top:顶级窗口
_parent:父窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href = "http://www.baidu.com">百度一下</a><br><br><br>
<a href = "https://www.taobao.com">淘宝</a>
<!--
href:hot references 热引用
href属性为一个地址，可以是本地路径
超链接有一个target属性：
_blank：新窗口
_self:当前窗口（默认窗口)
_top:顶级窗口
_parent:父窗口
-->
<br><br><br>
<a href = "https://www.taobao.com" target="_blank">淘宝</a>
<!--
图片超链接
-->
<br><br><br>
<a href="https://www.taobao.com/">
<img src="image/ma.jpg" width="30px"/>
淘宝
</a>
</body>
</html>
08.列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>国</li>
<li>省</li>
<li>市
<ol type="I">
<li>县</li>
<li>镇</li>
</ol>
</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>梦阳辰
<ul type="disc">
<li>深圳</li>
<li>北京</li>
<li>上海</li>
</ul>
</li>
<li>星空</li>
<ul type="square">
<li>杭州</li>
<li>西安</li>
</ul>
<li>轻松玩编程</li>
</ul>
</body>
</html>
09.表单
例如一下就是一个表单：
表单用于接收用户的信息
表单展现之后，用户填写表单，点击提交后数据传入到服务器。
1.怎么画表单呢?
使用from标签画表单。
一个网页当中可以有多个表单。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--action属性用来指定数据提交给哪个服务器。
action属性和超链接的href一样，都可以向服务器发送请求(request)
-->
<from action="http://192.168.112.34:2341/adf">
<!-- 画一个提交按钮，这个按钮可以提交表单-->
<input type="submit" value="登录"/><br>
<!-- 普通按钮不具有提交表单的功能-->
<input type="button" value="按钮上的文本"/>
</from><br>
<!--表单可以向服务器发送请求，只不过表单发送请求的同时可以携带数据-->
<from action="http://www.baidu.com">
<input type="text"/>
<input type="submit" value="百度"/>
</from>
<br>
<from action="http://localhost:8032/kj">
用户名<input type = "text"/><br>
密码<input type="password"/><br>
<input type="submit" value="登录"/>
</from>
<from action="http://localhost:8080/jd/login">
<table>
<tr>
<td> 用户名</td>
<td><input type = "text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name ="usercode"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</from>
</body>
</html>
2.用户注册表单
form表单method属性：
get:采用get方式提交的时候，用户提交的信息会显示在浏览器的地址栏上。
post：采用post方式提交的时候，用户提交的信息不会显示在浏览器的地址栏上。post更安全
method不指定，为get.
超链接也可以提交数据给服务器，但是提交的内容是不变的。默认为get。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
用户注册
用户名
姓名
密码
确认密码
性别
兴趣爱好
学历
简介-->
<from action="http://localhost:8080/jd/register" mothod="post">
用户名
<input type="text" name="username"/>
<br>
密码
<input type="password" name="usercode"/>
<br>
确认密码
<input type="passcode"/>
<br>
性别
<input type="radio" name="gender" value="1" checked/>男<!--默认选中-->
<input type="radio" name ="gender" value="0"/>女<!--单选按钮必须手动指定-->
<br>
兴趣爱好
<input type="checkbox" name="hobby" value="basketball" checked/>篮球
<input type="checkbox" name="hobby" value="study"/>学习
<input type="checkbox" name="hobby" value="game"/>游戏
<br>
学历
<select name="grade">
<option value="HighSchool">高中</option>
<option value="Bachelor'sDegree" selected>本科</option>
<option value="Master'sDegree">硕士</option>
<option value="DoctoralDegree">博士</option>
</select>
<br>
简介
<br> <textarea rows="10" cols="66" name="introduce"></textarea>
<br>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
</from>
</body>
</html>
3.下拉列表支持多选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--muultiple属性支持多选，size显示条目数-->
<select multiple="multiple" size="2">
<option>浙江</option>
<option>湖北</option>
<option>江西</option>
</select>
</body>
</html>
4.file控件
可以用于选择文件，上传
<input type="file"/>
5.隐藏域hidden控件
用于将数据提交给服务器，但不想让用户看见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from action="http://localhost:8080/asdf" method="post">
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
</from>
</body>
</html>
5.readonly和disabled
都表示只读。
但是readonly可以提交给服务器，disabled数据不会提交（即使有name属性也不会）
<input type="text" name ="usercode" value="112" readonly/>
<input type="text" name ="usercode" value="112" disabled/>
6.input控件的maxlength属性
表示最多输入的字符数量。
7.HTML中元素的id属性
1.在HTML文档中，任何元素（节点）都有id属性，id属性是唯一标识。所以在同一个HTML文档当中id值不能重复。
2.提交表单只和name有关
3.id的作用
为了让我们更好的获取元素。
javascript语言：可以对HTML文档当中的任意节点进行增删改操作！那么我们应该先通过id拿到节点对象。
4.HTML文档是一棵树，树上有很多节点，每个节点都有唯一的id.
DOM（Document)树。
<from id="myform">
<input type ="text" id="username" name="username"/>
<input type ="text" id="usercode" name="usercode"/>
</form>
10.div和span在网页中的应用
1.div和span都可以称为图层。
图层是为了页面更好的布局
div会独自占用一行，而span不会独自占用一行。
table布局不灵活，太石板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello Meng</div>
<div>hello Yangv>
<div>Chen
<div>Xingkongiv>
<span id="sqan1">first span</span>
<span id="sqan1">second span</span>
</body>
</html>
总结
这是前端的基础，只有学好了HTML，才能更好的提升前端的技能。
以上就是我这节课的所学整理的笔记，如有问题可在评论区指出，感兴趣的话可以关注我。
本人水平有限，请见谅，谢谢浏览。
