HTML5

最新推荐文章于 2023-09-06 14:49:53 发布

绝命毒师

最新推荐文章于 2023-09-06 14:49:53 发布

阅读量221

点赞数 1

分类专栏： Web前端文章标签： HTML5 HTML5常用标签前端常用标签

本文链接：https://blog.csdn.net/qq_38738735/article/details/91470129

版权

Web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、HTML的基本概念：

1.概念：
HTML：全名为：Hyper Text Markup Language，即：超文本标记语言

2.作用：
需要将java在后台根据用户请求处理的请求结果在浏览器中显示给户。
在浏览器中数据需要使用友好的格式展现给用户。
HTML是告诉浏览器接收到的数据使用什么样的数据组织形式进行显示。

3.使用：
HTML的标准文档规范
HTML的标签

二、互联网的三大基石：

1.URL:统一资源定位符.(唯一的定位一个网络资源)

2.HTTP:超文本传输协议.(规范浏览器和服务器之间数据交互的格式)

3.HTML:超文本标记语言(有效的组织数据在浏览器端的显示)

HTML的文档声明：文件名.html或者文件名.htm

HTML的标准文档结构：

<html>
         <head>
         </head>
         <body>
         </body>
</html>

顶层标签：html

头标签：head，主要是配置浏览器显示数据的配置信息，一般给浏览器进行使用。

主体标签：body，给用户进行数据展示。

注意：HTML是由浏览器进行解析执行的

三、HTML的头标签

1.注释语句：

单行注释：//
多行注释：<!—被注释内容–>

2.网页标题标签：

<title>标题内容</title>

3.编码格式标签：

<meta http-equip="content-type" content="text/html;charset=UTF-8" />//html4版本
<meta charset=”UTF-8”/>//html5推荐

4.网页优化搜索标签：

作用：提升网页在浏览器中的搜索概率。
关键字/网页描述/作者

<meta name="keywords" content="HTML,C6H6,ZHU,666" />//关键字
<meta name="description" content="描述" />//网页描述
<meta name="author" content="作者" />//作者

5.网页指定跳转标签：

<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />//5为秒，5秒后自动跳转

6.其它标签：

CSS引入标签和JavaScript引入标签

四、HTML的主体标签

1.标题标签：<h1></h1>,<h2></h2>…<h6></h6>，从1到6逐级变小变细

属性：align=“left/right/center”：靠左/靠右/居中

注意：标题自动换行，属于块元素或块级标签。

2.水平线标签：<hr />

属性：
width=“xxpx”：宽度(左右长)
size=“1~7”：高度(粗细)
color=“颜色”：设置颜色

注意：像素单位占据的是电脑屏幕的大小，百分比占据的是浏览器窗口的大小。

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

作用：将一段数据作为整体进行显示，主要是进行CSS和JS操作时比较方便。

在<p>标签内嵌套使用：

&nbsp：空格

<b>文本</b>：加黑效果

<i>文本</i>：斜体显示

<u>文本</u>：增加下划线

<del>文本</del>：增加中划线

<strong>文本</strong>：加粗

<font color=”” size=””>：文本颜色大小

注意：段与段间距比较大，会自动换行，属于块级元素

4.换行标签：<br />

5.列表标签：

无序列表：<ul><li></li><li></li></ul>

特点：每个<li>标签内容前有个默认的小圆点

属性：type=”circle/square/disc”：更改小圆点样式：默认为disc

有序列表：<ol><li></li><li></li></ol>

特点：每个<li>标签内容前有默认的阿拉伯数字排序

属性：type=”a/A/1/i/I”：更改排序样式，默认为1，即阿拉伯数字

自定义列表：<dl><dt>标题</dt><dd></dd><dd></dd></dl>

特点：用户自定义列表，每个<dd>标签不加样式

dt:数据的标题

dd:数据的具体内容,一个dd表示一条数据

五、HTML的图片标签

<img src="图片路径" />

本地资源路径:一般本地图片资源使用相对路径即可
网络资源路径:图片资源的URL地址

**属性：
width:设置图片的宽度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大单位可以是px也可以是百分比。
height:设置图片的高度,如果是单独设置,则再图片保证不失真的情况下自动缩小或者放大单位可以是px也可以是百分比
title:图片标题,鼠标放在图片上的时候会显示
alt:图片加载失败后的提示语
**
注意:图片是不会自动换行的(属于行内元素)

路径问题：
相对路径:从当前文件出发查找另一个文件所经过的路径
绝对路径:从根盘符出发所查找文件的路径

六、HTML的超链接标签

<a>标签：

属性：
1.href="要跳转的网页资源路径"

本地资源:相对路径
网络资源:网络资源(网页)的URL

2.target="指明要跳转的网页资源的显示位置"
一般为以下值：
_self在当前页中刷新显示

_blank在新的标签页中显示

_top在顶层页面中显示

_parent在父级页面中显示

注意:
超链接标签中一定要声明访问方式，访问方式可以是文字也可以是图片。

锚点学习:

作用:在一张网页中进行资源跳转

使用:
1.先使用超链接标签在指定的网页位置增加锚点。
格式：

<a name="锚点名"></a>

2.使用a标签可以跳转指定的锚点,达到网页内部资源跳转的目的。

格式：

<a href="#锚点名" >访问方式</a>

注意：href="#"表示跳转到本页面，可以设置为置顶功能。

七、HTML的表格标签

<table>：声明一个表格

<tr>：声明一行,设置行高及改行所有单元格的高度
<th>：声明一个列单元格,表头格.默认居中加黑显示
<td>：声明一个列单元格,默认居左显示原始数据

<table>标签属性:

align：表格在页面中的位置

border：给表格添加边框

width：设置表格的宽度

height：设置表格的高度

cellpadding：设置内容居边框的距离

cellspacing：设置边框的大小

rowspan：跨行合并

colspan：跨列合并

注意:
默认根据数据的多少进行表格的大小显示。
行合并：在要合并的单元格中的第一个单元格上使用属性rowspan=“要合并的单元格的个数”。并删除其他要合并的单元格完成合并。
列合并：在要合并的单元格中的任意一个上使用属性colspan=“要合并的单元格的个数”,并删除要合并的其他单元格。

八、内嵌和框架标签

注意：第一步一定要删除body标签

框架标签：<frameset>：

属性：
rows：按照行进行切分页面
cols：按照列进行切分页面

子标签：<frame>：进行切分区域的占位，一个<frame>可以单独加载网页资源。

属性：
src：资源路径（本地或网络资源）
name：区域名，结合超链接使用。

九、HTML的表单标签

作用：收集并提交用户数据给指定服务器。

注意：form标签会收集其标签内部的数据，外部的数据无权限提交。

属性：

action：收集的数据提交地址，也就是URL，注意路径

method：form标签会收集其标签内部的数据。主要有get和post两种提交方式。

get：适合小量数据，以?隔开拼接在URL后面，不同的键值对使用&符号隔开，不安全。

post：适合大量数据，隐式提交，安全。

注意：
表单数据的提交，要提交的表单必须拥有name属性值，否则不会提交。提交的表单项数据为键值对，键为name属性的值，值为用户书写的数据。
form表单的数据提交需要依赖于submit提交按钮。

form表单域标签：

作用：给用户提供可以进行数据书写或者选择的标签。

使用：
<input/>标签类
文本框：

<input type="text" name="username" />

密码框：

<input type="password" name="password" />

单选框（性别选项）：

<input type="radio" name="sex" value="1" checked="checked"/>
//注意：不同单选框name值相同时只能选择一个。value为要提交给服务器的实际数据，checked为默认选择状态。

多选框：

<input type="checkbox" name="" value="1" />

下拉框：

<select><option></option><option></option></select>

<select>标签属性：name：数据提交的键名，必须声明。

<option>标签属性：value：要提交的数据。selected：默认的选择状态。

普通按钮：

<input type="button" name="" value="" />

重置按钮：

<input type="reset" name="" value="" />

隐藏标签：

<input type="hidden" name="hidden" value="" />

文件上传标签：

<input type="file" name="" />

文本域：

<textarea></textarea>

作用：声明一个可以大量书写文字的文本区域。
属性：name：数据提交的键名，js和css会使用。rows：行数。cols：列数

form表单标签的使用：
在点击数据提交时，form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式，以键值对的形式提交给action属性所指明的地址。（服务器的servlet接收）

注意：
表单数据提交，提交的是表单域标签的value值。
要添加name值，以便提交数据和配合CSS和JavaScript。
id和value看情况添加。
disabled="disabled"属性让表单元素失效，注意使用。