HTML常用标签

小北534

已于 2024-07-27 17:02:26 修改

阅读量733

点赞数 23

文章标签： html 前端

于 2024-07-27 16:57:35 首次发布

本文链接：https://blog.csdn.net/qq_63161848/article/details/140716165

版权

使用HBuilder编写html文件，新建项目

选择基本的HTML项目

新建html文件

基本的html文件结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

当我们在编写HTML文档时，需要使用<head>和<body>标签来定义HTML文档的结构和内容。

<head>标签用于定义HTML文档的头部，包含一些元数据和引入外部文件的信息。这些元数据不会直接显示在页面上，而是提供给浏览器和搜索引擎使用。

<head>标签通常包含以下元素：

<title>：定义页面的标题，显示在浏览器的标题栏或书签中。
<meta>：用于定义HTML文档的元数据，如编码方式、关键词、描述等。
<link>：用于引入外部样式表（CSS文件）、字体文件或者其他外部资源等。
<script>：用于引入外部JavaScript文件或者内嵌JavaScript代码。
<style>：用于定义内部样式表，直接写在HTML文档中。
<base>：定义页面中所有相对URL的基准URL。

<body>标签用于定义HTML文档的主体部分，包含了网页的实际内容，如文本、图像、音频、视频等。

<body>标签通常包含以下元素：

文本标签：如<h1>~<h6>、<p>、<ul>、<ol>、<li>等，用于定义不同级别的标题、段落、列表等。
图像标签：<img>，用于插入图片。
链接标签：<a>，用于创建超链接。
多媒体标签：<audio>、<video>，用于插入音频和视频。
表格标签：<table>、<tr>、<th>、<td>，用于创建表格。
表单标签：<form>、<input>、<textarea>、<select>，用于创建表单。
其他标签：还有很多其他标签，用于创建各种不同的元素和功能。

通过使用<head>和<body>标签，我们可以将HTML文档分为头部和主体部分，对网页的结构和内容进行更好的组织和管理。

<title> 设置页面标题

    <head>
		<meta charset="utf-8" />
		<title>页面标题</title>
	</head>

<h1> 文本标题：h1~h6

<p> 段落

	<body>
		<!--标题  h1-h6 -->
		<h1>凉州词</h1>
		<h2>凉州词</h2>
		<h6>凉州词</h6>
		<!-- 段落 p -->
		<p>葡萄美酒夜光杯，欲饮琵琶马上催</p>
		<p>醉卧沙场君莫笑，古来征战几人回</p>
	</head>

<img> 图片

src 地址

alt 图片加载失败后显示的文本

		<!-- img 的alt 图片加载失败后显示的文本 -->
		<img src="./image/easyimg.png" alt="图片走丢了" />

<a> 超链接

href 绝对路径/相对路径

也可以在超链接中添加图片用于点击

        <a href="https://www.baidu.com">连接到百度</a>
				<a href="easy.html">
			<img src="./image/easyimg1.png" alt="图片走丢了" />
		</a>

<table> 表格

<tr> 表格行

<td> 单元格

		<table>
			<tr>
				<td>编号</td>
				<td>姓名</td>
				<td>成绩</td>
			</tr>
			<tr>
				<td>10001</td>
				<td>张三</td>
				<td>100</td>
			</tr>
		</table>

设置表格样式

边框宽度及颜色、相邻边框合并；

单元格宽度、文本居中、内边距；

		<style>
			table,td{
				border: 1px solid deeppink;
				border-collapse: collapse;
			}
			td{
				width: 70px;
				text-align: center;
				padding: 10px;
			}
		</style>

合并单元格：

colspan 横向合并

rowspan 纵向合并

		<table>
			<tr>
				<td>1-1</td>
				<td colspan="2">1-2</td>
				<!-- <td>1-3</td> -->
				<td>1-4</td>
			</tr>
			<tr>
				<td rowspan="2">2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<!-- <td>3-1</td> -->
				<td>3-2</td>
				<td rowspan="2" colspan="2">3-3</td>
				<!-- <td>3-4</td> -->
			</tr>
			<tr>
				<td>4-1</td>
				<td>4-2</td>
				<!-- <td>4-3</td> -->
				<!-- <td>4-4</td> -->
			</tr>

列表

<ol> 有序列表：有序号

<ul> 无序列表

<li> 列表元素

		<!-- 列表 -->
		<!-- 有序列表ol  有序号 -->
		<ol>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ol>
		<!-- 无序列表ul -->
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橘子</li>
		</ul>

<form> 表单

<form action="提交表单的地址" method="提交的方式是什么 get/post">

表单中的组件

<input> 输入框：

只读 readonly，不可修改，要有value值

			<!-- 输入框 -->
			<input type="text" name="nsername" />
			<!-- 密码框 -->
			<input type="password" name="userpass" />
			<!-- 只读框 -->
			<input type="text" readonly value="202111070502" name="code"/>
			<!-- 隐藏域 -->
			<input type="hidden" value="10001" name="id"/>

<div> 块

type="radio" 单选框

name值一样的单选框具有互斥性；

两个都 默认选中 checked 会根据执行顺序选中第二个而取消第一个

<lable>标签

标签中的 for 和组件的 id 对应时，能将二者的选中状态关联起来

			<div>
				<input checked type="radio" value="M" name="sex" id="sexman"/><label for="sexman">男</label>
				<input type="radio" value="W" name="sex" id="sexwoman"/><label for="sexwoman">女</label>
			</div>

type="checkbox" 复选框

			<div>
				<input checked type="checkbox" name="hobby" id="sing" value="sing"/><label for="sing">唱</label>
				<input type="checkbox" name="hobby" id="dance" value="dance"/><label for="dance">跳</label>
				<input disabled type="checkbox" name="hobby" id="rap" value="rap"/><label for="rap">rap</label>
			</div>

<select> 下拉框

<option> 选项

选中 selected

			<!-- 下拉框 -->
			<div>
				<label for="province">省份</label>
				<select name="province" id="province">
					<option value="SD">山东</option>
					<option value="AH">安徽</option>
					<option value="JX" selected>江西</option>
					<option value="XJ">新疆</option>
					<option value="SX">陕西</option>
					<option value="YN">云南</option>
				</select>
			</div>

<textarea> 文本域

多行文本框两个标签中的内容就是它的值，注意不要回车

			<div>
				<!-- 文本域 -->
				<textarea></textarea>
			</div>

<button> 按钮

普通按钮 type="button"

提交按钮 type="submit"

重置按钮 type="reset"

			<!-- 提交按钮 -->
			<button type="submit">提交按钮</button>
			<button type="button">普通按钮</button>
			<!--重置按钮  回到表单的初始状态 -->
			<button type="reset">重置按钮</button>
			<input type="button" value="普通按钮Input"/>
			<input type="submit" value="提交按钮Input"/>
			<input type="reset" value="重置按钮Input"/>

小北534

关注

23
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
HTML常用标签

标签用于定义HTML文档的头部，包含一些元数据和引入外部文件的信息。这些元数据不会直接显示在页面上，而是提供给浏览器和搜索引擎使用。标签用于定义HTML文档的主体部分，包含了网页的实际内容，如文本、图像、音频、视频等。
复制链接

扫一扫