一、概念
- HTML(Hyper Text Markup Language)：超文本标记语言
- HTML不是编程语言，而是标记语言
什么是标记语言：
定义：是一种将文本以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的电脑文字编码
- HTML
- MarkDown
- XML(微信，安卓app)
与XML的区别：
- HTML：<key>value</key> key标签是指定的
- XML：<key>value</key> key标签可以自己定义
HTML标签
- HTML 标签是由**尖括号**包围的关键词，比如 `<html>`
- HTML 标签通常是**成对出现**的，比如`<b> ` 和`</b>`,有些是单个出现的。有些是没有内容的。
- 标签对中的第一个标签是**开始标签**，第二个标签是**结束标签**
- 开始和结束标签也被称为**开放标签**和**闭合标签**
- 看到的网页就是 HTML
二、HTML基本标签
每一对的标签具体组成部分：
- 标签名
- 标签属性
- 文本内容
- 下属标签
<html> <head> <title>学习HTML</title> </head> <body> <h1>一、概念介绍</h1> <p>HTML是标记语言</p> </body> </html>
1、HTML头部标签`<head>`
`<head>` 元素是所有头部元素的容器 , 以下标签都可以添加到 head 部分：`<title>、<base>、<link>、<meta>、<script> 以及 <style>`
2、HTML实体`<body>`
`<body>`元素定义了HTML 文档的主体
2.1`<h1> - <h6>` 标签
`<h1>`定义最大的标题。`<h6>`定义最小的标题。
2.2`<p>`标签
定义了 HTML 文档中的一个段落
2.3`<hr /> 、<br />`标签
两个标签都是单个存在。`<hr /> `： 在 HTML 页面中创建水平线 ；`<br />`： 在不产生一个新段落的情况下进行换行
2.4表格`<table>`标签
表格由 `<table> `标签来定义。每个表格均有若干行（由` <tr>` 标签定义），每行被分割为若干单元格（由` <td>` 标签定义）。表头使用` <th>` 标签进行定义
字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等
border属性（border=“1”）：显示一个带有边框的表格。
1 <html> 2 <head> 3 <title>学习HTML</title> 4 </head> 5 <body> 6 <table border="1"> 7 <tr> 8 <th>姓名</th> 9 <th>分数</th> 10 </tr> 11 <tr> 12 <td>emma</td> 13 <td>100</td> 14 </tr> 15 <tr> 16 <td>helen</td> 17 <td>78</td> 18 </tr> 19 </table> 20 </body> 21 </html>
2.5 列表标签
2.5.1 无序列表`<ul>`
1 <ul> 2 <li>Coffee</li> 3 <li>Milk</li> 4 </ul>
2.5.2 有序列表`<ol>`
1 <ol> 2 <li>Coffee</li> 3 <li>Milk</li> 4 </ol>
每个列表项始于`<li>`
2.6 `<div>`标签
相当于容器， 可以把文档分割为独立的、不同的部分， 如果用id或class来标记`<div>`,那么该标签的作用会变 得更加有效
2.7 链接`<a>`标签
`<a href ="www.baidu.com"> 这是一个链接</a>`
一般与href属性结合起来使用
2.8 图像`<img>`标签
` <img src="图片路径" width=“100” herght=“100”> `
单标签存在，一般与src属性结合起来使用
1 <html> 2 <head> 3 <title>学习HTML</title> 4 </head> 5 <body> 6 <a href='https://www.baidu.com'> 7 <img src='https://www.quanjing.com/creative/topic/1' width="100" height="100"> 8 </a> 9 </body> 10 </html>
2.9 `<iframe>`标签
用来在一个HTML页面上显示另一个HTML页面。(容易遇坑)
<iframe src="www.baidu.com" height="100" width="200"> </iframe>
2.10 `<input>`标签
单个标签存在，有多种类型：button、radio、checkbox、url、email、data、color、button、submit，用'type='定义
input元素必须加name属性，radio、checkbox类型时一定再要加value属性
2.11 `<select>`标签
用来创建下拉列表，是一种表单控件，可用于在表单中接受用户输入 只能用`<option>`标签定义了列表中的可用选项。
1 <html> 2 <head> 3 <title>学习HTML</title> 4 </head> 5 <body> 6 用户名： <input type="text"> 7 用户名： <input type="text" readonly> 8 用户名： <input type="text" disabled> 9 10 <!--单选框--> 11 <p> 我最喜欢的歌手 12 <input type="radio" name="favor_singer" id="zjl" value="周杰伦" readonly>周杰伦 13 <input type="radio" name="favor_singer" id="ljj" value="林俊杰" checked>林俊杰 14 <input type="radio" name="favor_singer" id="zhm" value="张惠妹"disabled>张惠妹 15 </p> 16 17 <!--多选框--> 18 <p> 我爱听的歌手 19 <input type="checkbox" name="listen" value="周杰伦">周杰伦 20 <input type="checkbox" name="listen" value="林俊杰" checked>林俊杰 21 <input type="checkbox" name="listen" value="张惠妹">张惠妹 22 </p> 23 <!--无论单选或者多选同一个问题必须加name属性--> 24 25 <input type="button"> 26 <input type="color"> 27 <input type="time"> 28 <input type="email"> <!--只能输入email格式的数据--> 29 <input type="file"> 30 <input type="number"> 31 <input type="password"> 32 33 <!--文本域--> 34 <p> 35 <textarea> </textarea> 36 </p> 37 38 <p> 39 <p style="color:red">最喜欢的水果</p> 40 41 <!--select里只显示option元素，备注信息放到select外--> 42 <select> 43 <option></option> 44 <option>草莓</option> 45 <option>香蕉</option> 46 <option>苹果</option> 47 </select> 48 <input type="submit"> 49 </p> 50 </body> 51 </html>
属性总结：
- id必须要唯一，不唯一浏览器不会识别到，但是会产生严重的影响，是编程人员的问题
- for设同一个id name不是唯一的，当a有两个相同的name，锚会定位到第一个。name的作用非常有用，作为可与服务器交互数据的HTML元素的服务器端的标识，分组，锚点
- value值很重要，向后端传输的数据就是value
- style通常被css文件代替
- class通常用来做样式分离，可以同时又多个值，用空格分开
- readlonly和disable的区别：
- readonly只针对input（text/password）和textarea有效，而disabled对于所有的表单元素有有效，包括select、radio、checkbox、button等，但是表单如果在使用了readonly后，当我们将表单以post或get的方式提交的话，这个元素的值不会被传递出去，而readonly会将值传递出去（这种情况出现在当我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button确实可以使用的）
- name属性用于指定标签元素的名称。<a>标签内必须提供href或name属性。
- checked默认值
3、块元素和内联元素
块元素是新起一行，内联元素不会以新行开始
块元素：<h1>、<p>、<ul>、<table>、<div>
内联元素：<b>、<td>、<a>、<img>、<span>
三、代码示例
写一个用户注册的页面，包含：1、用户名2、密码3、最喜欢的电影选择4、上传个人资料文件
1 <html> 2 <head> 3 <title>学习HTML</title> 4 </head> 5 <body> 6 <div> 7 <center 8 <h2 style="text-align: center">登录</h2> 9 <p style="text-align: center"> 10 用户名:<input type="text" name="username" > </br> 11 密码:<input type="password" name="pwd"></br> 12 <input type="button" name="是否确认" value="登录"> 13 <input type="button" name="是否确认" value="注册"> 14 </p> 15 </div> 16 <div> 17 <h1>用户调查</h1></hr> 18 <h3>1、最喜欢的电影(单选)</h3> 19 <div> 20 <input type="radio" name="favormovie" value="战狼">战狼 21 <input type="radio" name="favormovie" value="text哪吒">哪吒 22 <input type="radio" name="favormovie" value="少年的你">少年的你 23 <input type="radio" name="favormovie" value="中国机长">中国机长 24 <input type="radio" name="favormovie" value="其他">其他<input type="text" name="favormovie"> 25 </div> 26 <h3>2、喜欢的运动(多选)</h3> 27 <div> 28 <input type="checkbox" name="favormotion" value="游泳">游泳 29 <input type="checkbox" name="favormotion" value="跳绳">跳绳 30 <input type="checkbox" name="favormotion" value="跑步">跑步 31 <input type="checkbox" name="favormotion" value="跳伞">跳伞 32 <input type="checkbox" name="favormotion" value="其他">其他<input type="text" name="favormotion"> 33 </div> 34 <div> 35 <h3>3、上传简历附件</h3> 36 <input type="file" name="resume"></br> 37 <input type="submit" name="保存"> 38 </div> 39 40 </div> 41 </body> 42 </html>