HTML内容-CSDN博客

本文链接：https://blog.csdn.net/2301_81079458/article/details/142578353

1、HTML简述

1.1HTML是什么?有什么作用?

HTML:超文本标记语言

HTML是用来写网页的,是设计页面的基础

1.2HTML入门案例

①创建文件,后缀名为html或htm

②用记事本打开文件,并且编写文字

③用浏览器打开

1.3HTML语言特征

•HTML代码由头和体组成

<html>

<head>

</head>

<body>

</body>

</html>

注:

①<head>中存放都是网页的说明性内容.例如标题

②<body>中需要展示给用户看的信息内容

③<html>标签相当于java类大括号

•HTML文件由浏览器直接解析执行,无需编译,直接由上到下依次解析执行(Java代码需要编译)

•HTML标签通常由开始标签和结束标签组成

例:<font>内容体</font>

没有内容体的标签叫做空标签,仅由一个标签组成.

例:<br/>自关闭

•HTML标签有属性,格式为:属性名="属性值",属性值用引号引起

•HTML标签包裹嵌套,不建议交叉嵌套

2、HTML的基本标签

2.1字体标签和格式化标签

2.1.1<font>字体标签,用于展示效果中修改文字样式
<font属性名="属性值">文字</font>
size:控制字体大小,1~7
color:控制字体颜色.使用英文设置
face:控制字体类型.只能设置系统字库中有的字体类型

2.1.2<br/>
换行标签,用于展示效果中换行
HTML源码中换行,浏览器解析时会自动忽略

2.1.3<p></p>
段落标签,用于展示效果中划分段落,并自动在段前和段后自动加空行
align:段落内容的对齐方式
例<p align="center">内容</p>
默认是left,居左;(right,居右;center 居中)

2.1.4<h1></h1>
标题标签,用于展示效果中划分标题
其中<h1>最大,<h6>最小

2.1.5  
HTML源码中的多个空格,效果中最终会合并成一个
空格符号,用于展示效果中显示一个空白的位置

2.1.6、HTML注释用

于注释HTML源码,不在HTML效果中展示

只能在源码中看到,页面展示效果中没有
形式：

2.2图片标签

2.2.1<img/>
用于在页面效果中展示一张图片
src:指明图片的路径(必有属性)
图片路径写法:
①内网路径
绝对路径:文件在硬盘上的具体位置
相对路径:从引入者所在目录出发
../表示上一层目录
./表示当前目录
②互联网路径
必须前面加上http://
例如:http://www.baidu.com/xxx.jpg

width:图片宽度
height:图片高度
宽度和高度设置默认单位是px(像素)固定设置方式
还可以百分比设置.例:width="50%"是父标签的百分比,动态改变

2.3列表标签

2.3.1<ul></ul>
无序列表标签,用于在效果中定义一个无序列表

2.3.2<ol></ol>
有序列表标签,用于在效果中定义一个有序列表

2.3.3<li></li>

列表条目项标签,用于在效果中定义一个列表的条目

2.4超链接标签

2.4.1<a></a>

超链接标签,用于在效果中定义一个可以点击跳转的链接

href 超链接跳转的路径(必有属性)

内网本机路径:相对路径和绝对路径

互联网路径:http://地址

本页:默认跳转到本页

超链接正常工作

a标签中必须有内容

a标签必须有href属性

注:

①a标签内容体,不仅仅可以是文字,也可以是其他内容,例如图片

②a标签的href属性,不仅仅可以链接到html上,也可以链接到其它文件上

2.5表格标签

2.5.1<table></table>

表格标签，用于在效果中定义一个表格

border 设置边框粗细

width 设置表格宽度

2.5.2<tr></tr>

表格的行标签,用于在效果中定义一个表格行

2.5.3<td></td>

表格的单元格标签,用于在效果中定义一个表格行中的单元格

①定义一个表格<table></table>

②定义表格中的一行<tr></tr>

③在表格一行中定义单元格<td></td>

2.5.4<th></th>

表格的表头单元格标签,用于在效果中定义一个表格行中的表头单元格

表头单元格(居中加粗)

2.5.5单元格合并

<td>或<th>都有两个单元格属性

colspan:跨列合并单元格

rowspan:跨行合并单元格

注:被合并的单元格必须删掉

2.6块标签

2.6.1<span></span>

行级的块标签,用于在效果中一行上定义一个块,进行内容显示,有多少内容,就会占用多大空间,<span>不会自动换行,适用于少量数据显示

2.6.2<div></div>

块级的块标签,用于在效果中定义一块,默认占满一行,进行的内容的显示会自动换行,适用于大量数据展示

3、HTML的表单标签

3.1表单标签

用于在效果中定义一个表单,用于提交用户填写的数据

•action 将数据提交到何处.默认提交到本页

本机内网路径:相对路径，绝对路径

互联网路径

(方式和上面相同)

•method 将数据以何种方式提交.默认为get

提交方式可定义get或post

get 提交方式特点:把数据拼接到地址栏上。
post 提交方式特点:没有把提交数据拼接到地址栏上，提交到请求体

get 和 post 提交方式区别:
①get 提交的参数列表拼接到了地址栏后面
post 方式不会拼接地址栏
②get 方式提交的数据敏感信息不安全
post 方式提交的数据相对安全
③get方式提交的数据量有限的
post 方式从理论上提交的数据量无限大

(建议使用post提交方式)

3.2输入项标签
<input/>标签
表单输入项标签之一,用户可以在该标签上通过填写和选择进行数据输入

type 设置该标签的种类
type属性:

text 文本框,默认
password 密码框,内容为非明文
radio 单选框,在同一组内有单选效果
checkbox 复选框
submit 提交按钮,用于控制表单提交数据
reset 重置按钮,用于将表单输入项恢复到默认状态
file 附件框,用于文件上传
hidden 隐藏域,一般用作提交服务器需要拿到,但用户不需要看数据
button 普通按钮,需要和JS事件一起用

name 单选框、复选框进行数据的分组.设置该标签对应的参数名(某个表单输入项需要通过参数列表提交，就必须设置name)

value 设置该标签对应的参数值,作为按钮的名字
value属性设置策略:
①文本框、密码框这样的表单输入项,可以不强制指定value,因为用户可以自由输入
②单选框、复选框这样的表单输入项,必须强制指定value,因为用户无法输入,只能选择,如果不指定value,提交上去的只有on

checked 设置单选框/复选框默认选中的状态

readonly 设置该标签的参数值只读,用户无法手动更改

disabled 设置该标签不可用,参数值无法更改且参数值也无法提交

3.3选择框标签

<select > </select>定义一个选择框

•name设置该标签对应的参数名

•multiple设置该标符选项全部正确显示,并且可以进行多选交.默认为单选

选项标签,用于为一个选择框添加一个选项

value 设置需要提交的参数值

selected 设置选项的默认选中状态

注:option的内容体一般是用来进行展示,参数值应该是option的value属临值

3.4文本域标签

<textarea></textarea>标签

表单输入项标签之一,用户可以在该标签上通过输入进行数据的输入

name设置该标签对应的参数名

文本框和文本域区别

①文本框不能换行,文本域可以

②文本框参数值是value属性,文本域参数值是标签的内容体

3.5提交表达单注意事项

3.5.1提交中文问题

3.5.1.1使用URL编码

正常提交数据

非正常提交数据

URL编码解决方式:特殊符号,中文

例&→%26

保证表单数据传递时能更好区分出name和value,保整数据传递的完整性

3.5.1.2URL编码的表现形式和本质

①进行普通的编码,编码成字节数组(使用的是页面规定的字集,例UTF-8)

②字节数组中的每一个元素,都会从10进制转为16进制

③把已经转为16进制的字节数组,以%进行拼接.

例如:你好，用UTF-8编码，编码的字节组为:

[-28，-67，-96，-27，-91，-67]

URL 编码后:

%E4%BD%A0%E5%A5%BD