HTML 入门_什么通过读取html文档将内容显示到网页上-CSDN博客

本文链接：https://blog.csdn.net/weixin_42051791/article/details/107682873

HTML 简介

什么是 HTML？

HTML（Hyper Text Markup Language，超文本标记语言）是设计页面的基础，是由标签所组成的语言，能展示超文本效果，更好的展示信息。

超文本：可以添加各种样式的文本。超越了文本仅仅展示信息的功能范畴，如：图片、有样式的文字、点击跳转页面的文字等
标记语言：是一套标记标签，通过一组标签 <关键字>内容体</关键字> 对内容进行描述，由浏览器解释执行

HTML 标签

HTML 通过标签来对内容进行描述，标签通常由开始标签和结束标签组成，HTML 标签通常是成对出现的，开始标签和结束标签之间的内容叫做内容体。如，<title>内容体</title>
开始标签和结束标签也被称为开放标签和闭合标签
没有内容体的标签叫做空标签。空标签仅由一个标签组成。如，<br/>，该标签只有开始没有结束，自己在后面添加了斜杠，叫做“标签的自关闭”
HTML 标签不区分大小写，为了代码的可读性，建议使用小写
HTML 标签是有属性的，属性值必须用引号包裹。如，<font color="red">内容体</font> 或 <font color='red'>内容体</font>
HTML 标签可包裹嵌套，不建议（禁止）交叉嵌套

HTML 文档

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

HTML 的语法规范

<!-- 
	1. <!DOCTYPE html> 是一个文档声明
	2. <html></html> 是根标签 
	3. html文件主要包含两部分. 头部分和体部分
		头部分 <head> : 主要是用来放置一些页面信息，包含一些说明性的内容
		体部分 <body> : 主要来放置 HTML 页面内容，包含需要给用户展示的内容
 -->
<!DOCTYPE html>
<html>
	<head>
        <!-- meta 是网页配置项 -->
        <meta charset="UTF-8">
		<title>网页标题</title>
	</head>
	<body>
        网页内容
	</body>
</html>

HTML 文件的扩展名为 html 或 Htm。Htm 是老的命名规范，html 是新的命名规范
HTML 是一个解释性语言，无需编译，直接由上到下依次解析执行

HTML 标签

基本标签

1. 标题标签 `<h1></h1> to <h6></h6>`

取值范围 [1, 6]，<h1> 最大，<h6> 最小（范围之外显示普通文本）。

2. 段落标签 `<p></p>`

内容体自成一段（段落前后都换行）。

3. 段落标签 `<p></p>`

align：对齐方式（left（默认）、right、center）

4. 换行标签 `<br />`

HTML源码中的换行在浏览器解析时会自动解析为一个空格，并且忽略多个换行或者空格

5. HTML 注释 ``

HTML 注释只有一种，在页面效果中看不到注释的内容，但在源码模式中依旧可以看到注释内容。

格式标签

1. 字体标签 `<font></font>`

size：字体大小，范围 [1, 7]（1 最小，7 最大，默认 3）。如果范围不和法，将显示普通文本
color：字体颜色（只能是英文）
face：字体类型

<font size="5" color="red" face="楷体">今天天气真好</font>

2. 特殊符号

  空格符号。显示多个空格，要使用空格符号

7. 超链接标签 `<a></a>`

href：超链接跳转的路径。
- 内网本机路径
- 互联网外网路径
- 本页（默认）

超链接正常工作的条件：1）a标签中有 href 属性；2）a标签中必须有内容体

超链接的内容体不仅仅可以是文字，也可以是其他内容。如，图片等。

属性 href 不仅仅能够链接html文件，还可以链接其他内容。如，图片。

8. 图片标签 `<img />`

src：指明图片的路径，必须要有
width：宽度
height：高度

宽度和高度的设置有两种：

（固定设置）默认单位是 px，像素。如 width="400" 与 width="400px" 等价
（动态设置）百分比设置（如 width="50%"）。百分比是父标签的百分比，是随父标签的变化而变化的。

9. 列表标签

无序列表 <ul></ul>
列表条目项标签 <li></li>
有序列表 <ol></ol>

<ul>
	<li>香蕉</li>
	<li>苹果</li>
</ul>
<ol>
    <li>11111</li>
    <li>22222</li>
</ol>

10. 表格标签

<table> 定义一个表格
<tr> 表格的行标签，定义表格中的一行
<td> 表格的单元格标签，在表格一行中定义单元格
<th> 表格的表头单元格标签

<td> 和<th>唯一区别：<th>里面的内容默认居中加粗

<table>
    <tr>
    	<th>表头单元格</th>
    </tr>
    <tr>
    	<td>普通单元格</td>
    </tr>
</table>

合并单元格：

跨列合并 colspan=“number”
跨行合并 rowspan

合并完后要删除被合并的单元格。（可以理解为一个单元格占表格的几个位置）

11. 块标签

<div>内容体</div>
适用于大量信息展示。
块级的块标签，用于在效果中定义一块，一个DIV默认占满一行，进行内容的显示
<span></span>
适用于少量信息展示。如，“密码错误”的提示信息
行级的块标签，用于在效果中一行上定义一个块，有多少内容就会占用多大空间，进行内容显示

表单标签

表单是用来提交用户输入的数据。提交给服务器的程序相当于一个 Web 程序的入口

1. HTML 表单标签 `<form></form>`

<form></form> 标签仅仅是定义了一个（表单）区域，用于提交用户填写的数据。

action：规定当提交表单时向何处发送表单数据。（默认提交到本页）（URL）

关于路径 URL 的两种写法

1) 内网路径

绝对路径：在文件硬盘上的具体位置。如，C:\...\Deskt\a.jpg
相对路径：
../ 表示上一层路径
./ 表示当前路径

2) 互联网路径

添加http协议，如 <img src="http://www.baidu.com/xxx.jpg" />。

target：规定在何处打开 action URL
- _self（默认）：默认。在相同的框架中打开
- _blank：在新窗口中打开
- _parent：在父框架集中打开
- _top：在整个窗口中打开
- framename：在指定的框架中打开
method：规定用于发送 form-data 的 HTTP 方法，即，数据的提交方式。（get、post）
- get（默认）：特点：把数据拼接到地址栏上
- post：特点，没有把提交数据拼接到地址栏上，把提交数据拼接到了请求体上

get和post提交方式的区别：

get提交的参数列表拼接到地址栏后面；post方式不会拼接地址栏后面
get方式提交的数据对于敏感信息不安全；post提交的数据相对安全（至少在地址栏上看不到）
get方式提交的数据量有限(4k)；post从理论上提交的数据量是无限大的

（尽量使用 post 方式提交表单）

2. 输入标签 `<input />` 表单输入项

表单输入项标签之一，用户可以在该标签上，通过填写和选择，进行数据的输入。<input> 标签用于搜集用户信息。

type：设置该标签的种类
- text：文本框（默认）
- password：密码框
- radio：单选框。在同一组内有单选效果。（分组用到name属性）
- checkbox：复选框。在同一组内有复选效果
- submit：提交按钮，用于控制表单提交数据
- reset：重置按钮。用于将表单输入项恢复到默认设置
- file：附件框，用于上传文件
- hidden：隐藏域。一般用作提交时用户不需要看到，但服务器需要拿到的数据。
- button：普通按钮（可用value属性给按钮命名）。需要和 js 事件一起用。
name：单选框、复选框进行数据的分组。同一个 name 属性值的被分为一组
value：
- 设置该标签对应的参数值
value属性的设置策略：
1. 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自右输入
2. 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有“on”，“on”表示选中
- 作为按钮的名字
placeholder：指定默认的提示信息，用于需要用户输入的文本框等的提示信息。
checked：设置单选框、复选框的默认选中状态，该属性的值为“checked”或者为空。checked="checked" 或者 checked
readonly：设置该标签的参数值为“只读”，用户无法手动更改。数据是可以正常提交的。该属性的值一定要为“readonly”吗？
disabled：设置该标签不可用，参数值无法更改，且参数值也无法提交

表单提交按钮，提交数据时，

?参数列表

参数列表格式：参数1=参数值1&参数2=参数值2&参数3=参数值3

on表示选中

单选框，用户只能选择，不能输入，要指定value属性（即提交的对应的参数值），如果单选框没有value值时，提交的参数列表中就会显示 sex=on。这里需要代码进行展示。

在这里插入图片描述

text和password的框框没有name，就相当于没有参数名，没有参数名，提交就是无效的！（用代码进行展示）

只要有 name 属性，就可以提交，值为 value

提交text、password、checlbox等时，有参数名但没有参数值，他们的参数值是什么？(回答：是用户在输入框中填写的数据)

选择框标签

<select></select> 标签，定义一个选择框

属性：
- name：设置该标签对应的参数名
- multiple：设置该标签全部显示，并且可以进行多选提交。（默认为单选） ==> 省市联动？？？

在这里插入图片描述

<option></option> 标签，选项标签，在select标签中写用于为一个选择框添加一个选项

属性：

value：设置需要提交的参数值，如果没有value值，将提交option的内容体

【建议】option的内容体一般用来展示，提交的内容（参数值）应该是option的value属性值！
selected：设置选项的默认选中状态
文本域标签

<textarea></textarea> 标签，表单输入项标签之一，用户可以在该标签上通过输入数据，进行数据的输入。

属性：
- name：设置该标签对应的参数名
文本域是没有value领域的

文本域和文本框的区别：

文本框不能换行，文本域可以；
文本框参数值是 value 属性（可通过用户输入获得），文本与参数值是标签的内容体。

提交表单注意事项

关于提交中文的问题（推荐使用 IE 去学习）

提交中文或特殊符号 —> URL 编码。

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title></title>
   </head>
   <body>
<!--
   表单提交时，name 和 value 属性：
   name 属性相当于   键
   value 属性相当于  值

   如果 name 为空，则该标签对应的用户数据则无法被上传,即使value有值也无法上传；
   如果 value 为空，当该标签的数据，用户只能选择，不能输入时（比如单选框、复选框等），就要指定 value 的值，如果value没有值，那么value的值默认为 “on”，“on”表示“已选择”
   				当该标签的数据可通过用户输入，则value可以为空
-->
   	<form>
   		<!--用 uid 代表该用户的唯一表示-->
   		<input type="hidden" name="uid" value="soiuvoias&&*^*&vasktuyi=-iovas">
   		用户名：<input type="text" name="name" placeholder="中英文皆可" /> <br />
   		密码：<input type="password" name="password" placeholder="包含数字和字母"/> <br />
   		邮箱：<input type="email" name="email"/> <br />
   		手机号：<input type="tel" name="tel"/> <br />
   		上传文件：<input type="file" name="file"/> <br />
   		性别：<input type="radio" name="sex" value="male"/>男
   			<input type="radio" name="sex" value="female"/>女 <br />
   		爱好：<input type="checkbox" name="hobby" value="read" />看书
   			<input type="checkbox" name="hobby" value="run" />跑步
   			<input type="checkbox" name="hobby" value="code" checked="checked" />编码 <br>
   		简介：<textarea cols="50px" rows="10px" name="简介" placeholder="写点什么吧..."></textarea> <br />
   		籍贯：<select name="city">
   			<option value="-1">--选择--</option>
   			<option value="1">天水</option>
   			<option value="2">运城</option>
   		</select> <br />
   		出生日期：<input type="date" name="birthday" /> <br />
   		<input type="submit" value="注册"/>
   		<input type="button" value="button"/>
   		<input type="reset" value="重置"/>
   	</form>
   </body>
</html>