02-Web页面组成之HTML

一、概念

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>