html简述

z迦在线

已于 2024-05-26 20:41:29 修改

阅读量851

点赞数 32

文章标签： html css 前端

于 2024-05-25 15:23:56 首次发布

本文链接：https://blog.csdn.net/2302_79824999/article/details/139197382

版权

HTML概述

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，具体指超文本标记语言。它不是一种编程语言，而是一种标记语言，用于描述网页的结构和内容。通过HTML，开发者可以定义网页的标题、段落、链接、图像、列表、表格、表单等各种元素，以及这些元素在网页上的布局和样式。

超文本：页面内可以包含图片，链接，声音，视频等内容

标记：标签（通过标记符号来告诉浏览器网页内容该如何来显示）

浏览器通过看不同的HTML 标签，解析成我们看到的网页

HTML基本语法

HTML写网页的代码的基本结构：

HTML中的常见标签

标签结构

<开始标签> 标签体 </结束标签> 闭合标签(封闭的区间) 双标签

<标签名 /> 自闭和标签,没有修饰的内容,只是完成某个功能 单标签

1. 基础标签

<!DOCTYPE html>：定义文档类型和版本，告知浏览器当前文档使用的是HTML5。
<html>：HTML文档的根元素。
<head>：包含了所有的头部标签元素，如<meta>, <title>, <link>, <style>等，这些元素不会在网页上直接显示，但会影响网页的渲染和显示方式。
<title>：定义浏览器工具栏的标题，当网页添加到收藏夹时的标题。
<body>：包含了可见的页面内容，如文本、图片、音频、视频等。

2. 标题和段落

<h1> 到 <h6>：定义标题或子标题，<h1> 定义最大的标题，<h6> 定义最小的标题。
<p>：定义段落。

3. 文本格式化

<b> 和 <strong>：加粗文本，<strong> 在语义上表示重要内容。
<i> 和 <em>：使文本倾斜，<em> 在语义上表示强调。
<del> 和 <s>：为文本添加删除线。
<ins> 和 <u>：为文本添加下划线。
<sup> 和 <sub>：定义上标和下标文本。

4. 图像和链接

<img>：用于插入图像，必须包含src属性来指定图像的来源。
<a>：定义超链接，用于从一个页面跳转到另一个页面或页面中的某个部分。必须包含href属性来指定链接的目标地址。

5. 列表

<ul>：定义无序列表。
- <li>：定义列表中的项。
<ol>：定义有序列表。
- <li>：定义列表中的项。
<dl>：定义描述列表。
- <dt>：定义列表中的项。
- <dd>：描述列表中的项。

6. 表格

<table>：定义表格。
- <caption>：定义表格标题。
- <thead>：定义表格的头部。
  - <tr>：定义表格中的行。
    - <th>：定义表头单元格。
- <tbody>：定义表格的主体。
  - <tr>：定义表格中的行。
    - <td>：定义表格中的单元格。
- <tfoot>：定义表格的尾部。

7. 布局和容器

<div>：定义文档中的区块或节，常用于样式布局。
<span>：定义文档中的行内区块或节，常用于文本内小块内容的样式设置。

8. 特殊元素

<br>：插入简单的换行符。
<hr>：插入水平线。
<center>（非HTML5推荐）：使内容居中，但在HTML5中推荐使用CSS来实现。

9. 表单

<form>：定义HTML表单，用于用户输入。
- <input>：定义输入控件，如文本字段、复选框、单选按钮等。
- <textarea>：定义多行文本输入控件。
- <button>：定义点击按钮。
- <select> 和 <option>：定义下拉选择列表。

HTML中的标签属性

在HTML中，标签通常可以具有属性，这些属性为HTML元素提供附加的信息或指示浏览器如何渲染该元素。属性总是以名称/值对的形式出现，并且始终包含在元素的开始标签中。以下是一些常见的HTML标签属性及其描述：

1. 全局属性

全局属性可以应用于HTML中的所有元素。虽然并非所有元素都需要或支持这些属性，但以下是一些常见的全局属性：

class：为元素定义一个或多个类名，通常用于CSS样式和JavaScript操作。
id：为元素定义一个唯一的标识符，通常用于CSS样式和JavaScript引用。
style：直接为元素定义内联CSS样式。
title：为元素提供额外的信息（通常是提示信息），这些信息在用户将鼠标悬停在元素上时显示。

2. 特定元素属性

特定元素属性仅适用于某些HTML元素。以下是一些示例：

`<a>` 标签

href：指定链接的目标地址（URL）。
target：指定链接如何打开（例如，在新窗口或新标签页中）。

`<img>` 标签

src：指定图像的来源（URL）。
alt：为图像提供替代文本，如果图像无法显示或加载失败，将显示此文本。
width 和 height：指定图像的宽度和高度（以像素为单位）。

`<input>` 标签

type：指定输入字段的类型（例如，text, password, checkbox, radio, submit 等）。
name：定义输入字段的名称，这对于表单提交时数据的收集很重要。
value：定义输入字段的初始值。
placeholder：提供输入字段的提示信息，当字段为空时显示。

`<table>`、`<tr>`、`<th>` 和 `<td>` 标签

colspan（<th> 和 <td>）：指定单元格应横跨的列数。
rowspan（<th> 和 <td>）：指定单元格应横跨的行数。

`<form>` 标签

action：指定表单数据提交时发送到的URL。
method：指定用于发送表单数据的HTTP方法（通常是get或post）。

3. 布尔属性

有些HTML属性是布尔属性，它们的存在就表示值为true，而不需要明确的值。例如，<input type="checkbox" checked>中的checked属性表示复选框默认被选中。

4. 自定义数据属性

HTML5引入了一种新的属性，称为自定义数据属性（也称为“数据-*”属性），允许你为元素添加额外的信息。这些属性以data-前缀开始，后跟任何你想要的名称。例如，<div data-user-id="123">。然后，你可以使用JavaScript来访问和修改这些属性的值。

注意事项

属性名和值之间使用等号（=）连接，值必须始终包含在引号中（单引号或双引号都可以，但最好保持一致）。
某些属性是必需的，而另一些则是可选的，具体取决于所使用的HTML元素和上下文。

- 为了保持代码的可读性和可维护性，建议使用小写字母来编写属性名，并避免在属性名中使用空格或特殊字符。

属性必须写在开始标签中

属性格式属性名="值"

一个标签中可以写多个属性

特殊符号转义符

在HTML中，一些字符具有特殊的含义，如小于号 <、大于号 >、双引号 " 和单引号 ' 等。当你想在HTML文本中直接显示这些字符时，而不是作为HTML标签或属性的一部分时，你需要使用特殊符号的转义符（也称为实体字符）来表示它们。

以下是一些常见的HTML特殊符号转义符：

< 或 <：小于号 <
> 或 >：大于号 >
& 或 &：和号 &
" 或 "：双引号 "
' 或 '：单引号 '
® 或 ®：注册符号 ®
™ 或 ™：商标符号 ™
  或  ：非断行空格
¢ 或 ¢：分（货币符号）
£ 或 £：英镑符号 £
¥ 或 ¥：日元符号 ¥

以及许多其他的特殊符号和字符的转义符。你可以在HTML文档中使用这些转义符来插入相应的特殊字符。请注意，虽然你可以使用实体编号（如<和>）来表示特殊字符，但在大多数情况下，使用字符名称（如<和>）更为常见和易读。

表单

input标签中的常见属性：
		type = "text" 文本
		name = "自定义名称"   向后端提交的键
		placeholder = "输入框的提交信息"
		readonly = "disabled"  只读属性，不能修改，不能提交
		disabled = "disabled"  禁用组件不能修改也不能提交
		type = "radio"  单选框（）多个选项的name必须相同才能互斥，选择性组件必须提供默认的value值
		type = "password"  密码框
		type = "checkbox"  多选框
		<select name = "名称>"   下拉选择框
		    <option value="值">选项</option>
		<textarea name="名称" cols="显示的列数" rows="显示的行数"></textarea> 多行文本域
		type = "file"  文件选择框
		type = "reset"  重置按钮
		type = "button" 普通按钮来出发事件
		-->
		<form action "" method="get">
			账号：<input type="text" name="account"value="111111"placeholder="请输入您的账号"/><br/>
			密码：<input type="password"name="password"placeholder="请输入您的密码" value="666666"/><br />
			性别：<input type="radio"name="gender" value="男"/> 男
				 <input type="radio"name="gender" value="女"/> 女
				 <br/>
				 <input type="submit"/>
				 <!-- submit 提交按钮 -->
				 <br/>
			课程：<input type="checkbox" name="course" value="java"/> java
				 <input type="checkbox" name="course" value="html"/> html
				 <input type="checkbox" name="course" value="mysql"/> mysql
				 <input type="checkbox" name="course" value="c"/> c
				 <br/>
		    籍贯：<select name="provice">
					<option value="100">北京</option>
					<option value="101">陕西</option>
					<option value="102">河南</option>
			    </select>
				<br/>
			地址：<textarea name="address" cols="20" rows="3"></textarea>
			<br/>
			附件：<input type="file" name="file" value=""/>
			<input type="submit" value="保存"/>
			<input type="reset" value="重置"/>
		</form> 
	</body>
</html>

有关html的一些练习

	<meta charset="utf-8">
		<title>古诗词欣赏</title>
	</head>
	<body>
		<h1 align = "center">
			<font color = "red">
				古诗词欣赏
			</font>
		</h1>
		<hr/>
		<h3 align = "center">
			静夜思
		</h3>
		<p align = "center">
			<ins>李白</ins>
		</p>
		<p align = "center">
		<font color = "green">
			<b>
				床前明月光，
				<br/>
				疑是地上霜。
				<br/>
				举头望明月，
				<br/>
				低头思故乡。
				<br/>
			</b>
		</p>
		</font>
		<p align = "center">
		<font color = "blue">
			<b>
				《静夜思》是唐代诗人李白所创作的一首无言故事。
				<br/>
				此时描写了秋日夜晚，诗人与屋内抬头望月的所感。
				<br/>
				始终运用比喻，衬托等手法，表发了客居思乡之情。
				<br/>
				    语言朴素而运维韩旭无限，历来广为传送。 
				<br/>
			</b>
		</p>
		</font>
		<P align = "center">
		<img src="../img/libai.jpg"/>
		<br/>
		<hr/>
		<P align = "center">
		友情链接：<a href="http://www.baidu.com">A网站</a>|<a href="http://www.baidu.com">B网站</a>|<a href="http://www.baidu.com">C网站</a>
		</P>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p align="center">
			课程表
		</p>
		<table  border="1"  align="center">
			<tr align="center">
				<td>项目</td>
				<td colspan="5">上课</td>
				<td colspan="2">休息</td>
			</tr>
			<tr align="center" bgcolor="red">
				<td>星期</td>
				<td>星期一</td>
				<td>星期二</td>
				<td>星期三</td>
				<td>星期四</td>
				<td>星期五</td>
				<td>星期六</td>
				<td>星期天</td>
			</tr>
			<tr align="center">
				<td rowspan="4">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>化学</td>
				<td>物理</td>
				<td>生物</td>
				<td rowspan="4">休息</td>
			</tr>
			<tr align="center">
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>化学</td>
				<td>物理</td>
				<td>生物</td>
			</tr>
			<tr align="center">
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>化学</td>
				<td>物理</td>
				<td>生物</td>
			</tr>
			<tr align="center">
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>化学</td>
				<td>物理</td>
				<td>生物</td>
			</tr>
			<tr align="center">
				<td rowspan="2">上午</td>
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>化学</td>
				<td>物理</td>
				<td>生物</td>
				<td rowspan="2">休息</td>
			</tr>
			<tr align="center">
				<td>语文</td>
				<td>数学</td>
				<td>英语</td>
				<td>化学</td>
				<td>物理</td>
				<td>生物</td>
			</tr>
	    </table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p align = "center">
		个人简历
		</p>
		<table align="center" border="1">
			<tr align="center">
				<td  width = "200" height = "40" bgcolor="blue">姓名</td>
				<td width = "200" height = "40"></td>
				<td  width = "200" height = "40" bgcolor="blue">性别</td>
				<td width = "200" height = "40"></td>
				<td  width = "150"height = "40" rowspan="5">照片</td>
			</tr >
			<tr height = "40"align="center">
				<td bgcolor="blue">出生年月</td>
				<td></td>
				<td bgcolor="blue">籍贯</td>
				<td></td>
			</tr>
			<tr height = "40"align="center">
				<td bgcolor="blue">政治面貌</td>
				<td></td>
				<td bgcolor="blue">民族</td>
				<td></td>
			</tr>
			<tr height = "40"align="center">
				<td bgcolor="blue">健康状况</td>
				<td></td>
				<td bgcolor="blue">婚姻状况</td>
				<td></td>
			</tr>
			<tr height = "40"align="center">
				<td bgcolor="blue">联系电话</td>
				<td></td>
				<td bgcolor="blue">电子邮箱</td>
				<td width = "100">2443229066@qq.com</td>
			</tr>
			<tr height = "40"align="center">
				<td bgcolor="blue">求职意向</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td bgcolor="blue" height = "200">工作经历</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td bgcolor="blue" height = "100">教育经历</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td bgcolor="blue" height = "100">英语水平</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td bgcolor="blue" height = "100">计算机水瓶男</td>
				<td colspan="4"></td>
			</tr>
			<tr align="center">
				<td bgcolor="blue" height = "100">自我评价</td>
				<td colspan="4"></td>
			</tr>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table>
			<tr>
				<td width = "100"align = "right"><img src="../img/banana.jpg"/></td>
				<td width = "100">
					<p align = "left">
						名称：香蕉
						<br/>
						原价：<del>19.80</del>
						<br/>
						现价：9.80
						<br/>
						产地：河南
					</p>
				</td>
				<td width = "100"align = "right"><img src="../img/pineapple.jpg" /></td>
				<td width = "100">
					<p align = "left">
						名称：菠萝
						<br/>
						原价：<del>19.80</del>
						<br/>
						现价：9.80
						<br/>
						产地：广西
					</p>
				</td>
				<td width = "100"align = "right"><img src="../img/banana.jpg" /></td>
				<td width = "100">
					<p align = "left">
						名称：香蕉
						<br/>
						原价：<del>19.80</del>
						<br/>
						现价：9.80
						<br/>
						产地：河南
					</p>
				</td>
			</tr>
			<tr>
				<td width = "100">
					<p align = "right">
						名称：桃子						<br/>
						原价：<del>19.80</del>
						<br/>
						现价：9.80
						<br/>
						产地：陕西
					</p>
				</td>
				<td width = "100"align = "left"><img src="../img/peach.jpg"/></td>
				<td width = "100">
					<p align = "right">
						名称：梨
						<br/>
						原价：<del>19.80</del>
						<br/>
						现价：9.80
						<br/>
						产地：陕西
					</p>
				</td>
				<td width = "100"align = "left"><img src="../img/pear.jpg"/></td>
				<td width = "100">
					<p align = "right">
						名称：葡萄
						<br/>
						原价：<del>19.80</del>
						<br/>
						现价：9.80
						<br/>
						产地：陕西
				<td width = "100"align = "left"><img src="../img/grape.jpg" /></td>
					</p>
				</td>
			</tr>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<b>
			<h1>HTML在线考试题</h1>
		</b>
		<ol>
			<li>HTML换行使用标签</li>
			<ol type ="A">
				<li>p</li>
				<li>br</li>
				<li>h1</li>
			</ol>
			<li>HTML在网页插入图片使用标签</li>
			<ol type ="A">
				<li>a</li>
				<li>hr</li>
				<li>img</li>
			</ol>
		</ol>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="../logo.gif"/>
		<img src="../img/reg.gif"/>
		<br />
		姓名：    <input type="text" name="name"/>
		<br />
		登录名： <input type="text" name="account"/>(可包含a-z、0-9和下划线)
		<br />
		密码：   <input type="password" name="password"/>(至少包含6个字符)
		<br />
		确认密码 ：<input type="password" name="password"/>
		<br />
		性别：<input type="radio" name="gender" value="男"/>
		<img src="../Male.gif"/>男
		<input type="radio" name="gender" value="女"/>
		<img src="../img/Female.gif"/>女
		<br />
		爱好：<input type="checkbox" name="check" value="运动"/>运动
		<input type="checkbox" name="check" value="聊天"/>聊天
		<input type="checkbox" name="check" value="玩游戏"/>玩游戏
		<br />
		<img src=""/><b>阅读淘宝网服务协议</b>
		<br />
		<textarea name="taobaoxiyi" cols="50" wrap="6"></textarea>
		<br />
		<input type="checkbox" name="check1" value="已读"/>已阅读条款
		<br />
		<input type="reset" name="reset" value="重 填"/>
		<input type="submit" name="submit" value="提交注册信息"/>
	</body>
</html>

设置锚点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#p1">1</a>
		<a href="#p2">2</a>
		<a href="#p3">3</a>
		<a href="#p4">4</a>
		<a href="#p5">5</a>
		<h2>
			<a id="p1"></a>
			图片1
		</h2>
		<img src="../../img/1.png">
		<h2>
			<a id="p2"></a>
			图片2
		</h2>
		<img src="../../img/2.png">
		<h2>
			<a id="p3"></a>
			图片3
		</h2>
		<img src="../../img/3.png">
		<h2>
			<a id="p4"></a>
			图片4
		</h2>
		<img src="../../img/4.png">
		<h2>
			<a id="p5"></a>
			图片5
		</h2>
		<img src="../../img/5.png">
	</body>
</html>