1、什么是HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页，Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。
2、标签
2.1 基础概念
- HTML标签是HTML语言中最基本的单位，标签不区分大小写，由尖括号包裹关键字构成，例如<html>test</html> 叫做html标签，<div>test</div>叫做div标签，以此类推。
- 类似<meta>这种就叫做自闭合标签，类似<a></a>就叫做主动闭合标签。
- 标签可以嵌套，例如<div><div></div></div>。
- 标签存在的意义：定位操作、CSS操作、让JS操作更简单。
- 所有的标签分为块级标签和行内标签(又叫做内联标签)
- 块级标签：占满一行，如常见的H系列标签，P标签，div标签。
- 行内标签(内联标签)：只占元素长度大小，如span标签。
2.2 常用的标签
<!DOCTYPE> 定义遵循的文档类型，如<!DOCTYPE html> 则代表遵循html文档规范。
2.2.1 head中的常见标签：
1 <head> 2 ????<meta charset="UTF-8"> ?<!-- meta为自闭合标签， charset属性定义字符编码 --> 3 ????<meta http-equiv="Refresh" content="3"> ?<!-- 3秒自动刷新 --> 4 ????<meta http_equiv="Refresh" content="3;Url=http://edu.51cto.com"> ?<!-- 3秒自动跳转百度 --> 5 ????<meta name="keywords" content="吃鸡,关键字2,关键字3"> ?<!-- 给搜索引擎用的关键字 --> 6 ????<meta name="description" content="网站描述信息"> ?<!-- 描述当前网站是干嘛的 --> 7 ????<meta http_equiv="X-UA-Compatible" content="IE=EmulateIE8;IE=IE7"> ?<!-- 主动兼容IE8和IE7 --> 8 ????<title>标签</title> ?<!-- head内部的标签只有title可见 --> 9 ????<link rel="shortcut icon" href="image/favicon.ico"> ?<!-- 小图标显示 -->10 </head>
2.2.2 body中的常见标签：
2.2.2.1 <h>-</h>标签：h标签用来定义标题
<body> ???<h1>Druid</h1> ?<!-- h标签用来定义标题，字体从上至下依次缩小 --> ???<h2>Druid</h2> ???<h3>Druid</h3> ???<h4>Druid</h4> ???<h5>Druid</h5> ???<h6>Druid</h6></body>
2.2.2.2 <p>-</p>标签：p标签用来定义段落
1 <body>2 ????<p>第一段落</p> ?<!-- p标签用来控制段落,段落间有间距 -->3 ????<p>第二段落</p>4 ????<p>第三段落</p>5 </body>
2.2.2.3 <span>-</span>标签：span标签为白板标签(行内标签)
1 <body>2 ????<span>第一行</span> ?<!-- 行内标签（内联标签） -->3 ????<span>这里紧跟第一行，不会换行</span>4 </body>
2.2.2.4 <div>-</div>标签：div标签为白板标签(块级标签)
1 <body>2 ?????<div>第一行</div> ?<!-- 块级标签 -->3 ?????<div>这里就要换行了</div>4 </body>
2.2.2.5 <a>-</a>标签：a标签用来定义链接和锚
用来定义链接：单击文字即可跳转至链接
<body> ???<a href="http://www.baidu.com" target="_blank">百度</a> ?<!-- target="_blank"在新的标签页打开百度，若不加则在原页打开 --></body>
用来定义锚：作为锚点，单击文字即可跳转至对应的ID处
<body> ???<a href="#1">第一章</a> ?<!-- #为关键字符，创建指向锚的链接，后面的编号要和想跳转的地方保持一致 --> ???<a href="#2">第二章</a> ???<a href="#3">第三章</a> ???<div style="height: 600px;" id="1"> ???????第一章的内容 ???</div> ???<div style="height: 600px;" id="2"> ???????第二章的内容 ???</div> ???<div style="height: 600px;" id="3"> ???????第三章的内容 ???</div></body>
1 ????<a href="#1">第一章</a> ?<!-- #为关键字符，创建指向锚的链接，后面的编号要和想跳转的地方保持一致 --> 2 ????<a href="#2">第二章</a> 3 ????<a href="#3">第三章</a> 4 ????<a href="#4">第四章</a> 5 ????<div style="height: 600px;" id="1"> 6 ????????第一章的内容 7 ????</div> 8 ????<div style="height: 600px;" id="2"> 9 ????????第二章的内容10 ????</div>11 ????<div style="height: 600px;" id="3">12 ????????第三章的内容13 ????</div>14 ????<a name="4">第四章的内容</a> ?<!-- 对锚进行命名 -->
2.2.2.6 <img />标签：img标签用来定义图片
1 <body>2 ????<img src="1.png" />3 </body>
1 <body>2 ????<a href="http://www.baidu.com">3 ????????<img src="1.png" title="图片" style="height: 300px;width: 300px" alt="图片"/>4 ????</a> ?<!-- 单击图片直接跳转至指定url；title属性用于鼠标悬浮显示信息；alt属性在图片不能显示的时候显示对应的文字信息 -->5 6 </body>
2.2.2.7 <br />标签：<br /> 元素是一个空的 HTML 元素，用来换行
1 <body>2 ????<div>换行<br />测试</div>3 </body>
2.2.2.8 <form> </form>标签：HTML表单用于收集用户输入，form标签用来定义HTML表单。HTML表单又包含表单元素：input、select和textarea。
<input />标签(元素):
1 <body>2 ????<form action="" method=""> ?<!-- form为表单标签,用来向后台提交数据;action属性用来指定服务器url;method用来指定get或者post -->3 ????????<input type="text" /> ?<!-- 单行文本输入框 -->4 ????????<br />5 ????????<input type="password" /> ?<!-- 会隐藏真实字符 -->6 ????????<input type="button" value="没用" /> ?<!-- button默认情况下无用 -->7 ????????<input type="submit" value="登录" /> ?<!-- submit才能提交表单 -->8 ????</form>9 </body>
1 <body> 2 ????<form action="http://localhost:8888/index" method="post"> ?<!-- get会将输入内容拼接成url提交给后台，post会将内容放到数据中提交给后台 --> 3 ????????<input type="text" name="user" /> ?<!-- name属性用来定义字典的key --> 4 ????????<br /> 5 ????????<input type="password" name="pwd" /> 6 ????????<!-- 打包成字典{"user": "用户输入的用户名", "pwd": "用户输入的密码"}发给后台 --> 7 ????????<input type="button" value="没用" /> 8 ????????<input type="submit" value="登录" /> 9 ????</form>10 </body><body> ???<form enctype="multipart/form-data"> ?<!-- enctype="multipart/form-data"该属性用来上传文件 --> ???????<div> ???????????用户名:<input type="text" name="user" /> ???????????<p>请选择性别:</p> ???????????????男:<input type="radio" name="sex" value="1" checked="checked" /> ?<!-- radio为单选框，如果没有name或者name不相同，那么就可以多选 --> ???????????????女:<input type="radio" name="sex" value="2" /> ?<!-- 这里的value用于给后台传数据;checked用来设置默认值 --> ???????????<p>爱好:</p> ???????????????篮球:<input type="checkbox" name="favor" value="1" /> ?<!-- checkbox为复选框 --> ???????????????足球:<input type="checkbox" name="favor" value="2" /> ?<!-- 这里的name用于后台批量获取数据 --> ???????????????羽毛球:<input type="checkbox" name="favor" value="3" /> ???????????????台球:<input type="checkbox" name="favor" value="4" /> ???????????????网球:<input type="checkbox" name="favor" value="5" /> ???????????<p>技能:</p> ???????????????写代码:<input type="checkbox" name="skill" value="1" checked="checked" /> ???????????????修车:<input type="checkbox" name="skill" value="2" /> ???????????<p>上传文件:</p> ???????????????<input type="file" name="filename" /> ?<!-- type="file"用来上传文件，真实的传文件依赖form表单属性enctype --> ???????</div> ???????<input type="reset" value="重置" /> ?<!-- 重置除默认值以外的值 --> ???????<input type="submit" value="提交" /> ???</form></body>
<select> </select>标签(元素)：select标签定义下拉列表，option标签定义待选项，列表通常会把首个选项显示为被选选项，能够通过添加 selected 属性来定义预定义选项。
1 <body> 2 ????<form> 3 ????????<div> 4 ????????????<select name="city"> 5 ????????????????<option value="1">北京</option> 6 ????????????????<option value="2">上海</option> 7 ????????????????<option value="3">广东</option> 8 ????????????????<option value="4">深圳</option> 9 ????????????????<option value="5" selected="selected">成都</option>10 ????????????</select> ?<!-- selected="selected"为默认值 -->11 ????????????<input type="submit" value="提交" />12 ????????</div>13 ????????<div>14 ????????????<select name="city" size="10">15 ????????????????<option value="1">北京</option>16 ????????????????<option value="2">上海</option>17 ????????????????<option value="3">广东</option>18 ????????????????<option value="4">深圳</option>19 ????????????????<option value="5" selected="selected">成都</option>20 ????????????</select> ?<!-- size用来设置显示的行数 -->21 ????????????<input type="submit" value="提交" />22 ????????</div>23 ????????<div>24 ????????????<select name="city" size="10" multiple="multiple">25 ????????????????<option value="1">北京</option>26 ????????????????<option value="2">上海</option>27 ????????????????<option value="3">广东</option>28 ????????????????<option value="4">深圳</option>29 ????????????????<option value="5" selected="selected">成都</option>30 ????????????</select> ?<!-- multiple属性用于多选 -->31 ????????????<input type="submit" value="提交" />32 ????????</div>33 ????????<div>34 ????????????<select name="city">35 ????????????????<optgroup label="北京市">36 ????????????????????<option value="1" selected="selected">北京</option>37 ????????????????</optgroup>38 ????????????????<optgroup label="四川省" />39 ????????????????????<option value="2" selected="selected">成都</option>40 ????????????????????<option value="3">绵阳</option>41 ????????????????</optgroup>42 ????????????????<optgroup label="河北省" />43 ????????????????????<option value="4" selected="selected">石家庄</option>44 ????????????????????<option value="5">保定</option>45 ????????????????</optgroup>46 ????????????</select> ?<!-- optgroup属性用于组合相关选项 -->47 ????????????<input type="submit" value="提交" />48 ????????</div>49 ????</form>50 </body>
<textarea> </textarea>标签(元素)：textarea标签用来定义多行输入
1 <body>2 ????<div>3 ????????<textarea name="key">4 ????????????这里的文本作为默认值5 ????????</textarea> ?<!-- textarea标签用来定义多行输入，name还是作为Key -->6 ????</div>7 </body>
3、注释
HTML语言注释用<!-- 注释 -->，CSS中用/*注释*/
50-Web基础-HTML
原文地址：https://www.cnblogs.com/Druidchen/p/8979156.html