HTML与HTML5常用标签

最新推荐文章于 2023-10-23 11:47:39 发布

木道-

最新推荐文章于 2023-10-23 11:47:39 发布

阅读量314

点赞数

分类专栏：新职课文章标签： html

本文链接：https://blog.csdn.net/LJW123487/article/details/115359266

版权

新职课专栏收录该内容

26 篇文章 1 订阅

订阅专栏

HTML

一、HTML文档的基本结构

基本结构

<!-- 声明当前文档是HTML5文档 -->
<!DOCTYPE html>
<!--html根元素，围堵标签 -->
<html>
	<!-- 
		head头元素：
		作用：
			1、用于指定HYML文章中的一些元数据：
				例如meta:定义页面的编码格式
				title:定义页面的标题
			2、引入外部的资源文件
	-->
	<head>
		<meta charset="utf-8" />
		<title>这是我的第一个HTML页面</title>
	</head>
	<!-- 
		body主体：
			浏览器显示的内容都将在这里编写
	-->
	<body>
		hello，html
	</body>
</html>

HTML注释

语法：


二、HTML中常用标签

1.文本标签

1.1 标题标签 <h1>-<h6>：字体逐渐缩小

一般用在文章的标题上。
在这里插入图片描述

1.2段落标签<p>

一般用在正文
在这里插入图片描述

1.3换行标签<br/>

一般用在段落中强制换行
在这里插入图片描述

1.4水平线标签<hr/>

一般用来分割内容
在这里插入图片描述

1.5范围标签<span>

一般在大段内容中，为了突出部分内容的时候使用的标签，很少独立使用，一般嵌套在其他的标签中使用。
在这里插入图片描述

2.图片标签

2.1基本属性

在这里插入图片描述

2.2设置图片的热点区域–了解

在这里插入图片描述

3.列表标签

一般用在导航栏上

3.1无序列表、无序列表

在这里插入图片描述

3.2定义描述标签

一般用在图文混编的场景中
在这里插入图片描述

4.布局标签div

一般就是作为容器，盛放其他的标签，将其他标签组合在一起用来布局

5.标签分类

html标签可以分为块状元素和行级元素两类

**块状元素：**一般都是新起一行，可以容纳行级元素和其他块状元素
**行级元素：**一般都是语义级别的基本元素，一般只能容纳文本或者其他行级元素。
PS：简单区分方法：是否独占一行
区别：

块级元素会独占一行，其宽度自动填满父元素的宽度
行级元素会排列到同一行例，其宽度随元素的内容变化而变化。
块级元素可以设置宽高，行内元素设置宽高无效。
块级元素可以设置margin、padding属性；行内元素的水平方向的padding会有边距效果，但垂直方向上的padding没有效果。

我们将已经介绍过的标签进行归类：
块级元素：

标题标签：h1-h6
段落标签：p
水平线标签：hr
有序列表：ol
无序列表：ul
定义描述标签：dl-dt-dd
容器标签：div
行级元素：
范围标签：span
图像标签：img
以后的根据特征再分类即可

三、超链接

超链接标签一般有两个作用：1、用来实现页面间的跳转 2、实现锚链接功能

1.页面间的跳转

在这里插入图片描述

2.锚链接

当一个页面长度超过一屏时，想迅速跳转到指定位置，就是用锚链接实现的。这个定位可以实现本页面间的锚链接，也是可以实现不同页面间的锚链接

2.1本页面的锚链接

在这里插入图片描述

2.2页面间的锚链接

在这里插入图片描述

四、表格标签

1.规则表格

在这里插入图片描述

cellpadding:表格内边距：单元格内文字与边框的距离
在这里插入图片描述
cellspacing:单元格与单元格之间的距离

2.不规则表格–跨行和跨列

在这里插入图片描述

3.表格的高级标签–标题标签和逻辑分区标签

在这里插入图片描述

五、表单（绝对重点）

概念：用于采集用户输入的数据，用于和服务器进行交互
在这里插入图片描述
表单项元素中的一些属性：

id：元素的唯一标识，不重复
name：表单项元素的名称，很重要–提交数据到服务器之后，服务器通过该名称获取数据
value：表单项元素的值，服务器获取数据通过name获取到的就是value
type：表示表单项元素的呈现形式
class：表示样式名称
readonly：表示只读，用户只能看不能改
disabled：表示禁用，该元素不能改且背景是灰色