目录
1.HTML
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它描述了一个网站的结构骨架，使得浏览器能够展示具有特定格式的文本、链接、图片和其他内容。以下是HTML的一些基本特点：
<!DOCTYPE html>
<html>
<head>
<title>页面标题</title>
</head>
<body>
<p>这是一个段落。</p>
</body>
</html>
<!DOCTYPE html>：声明文档类型和HTML版本。<html>：根元素，包裹所有其他HTML元素。<head>：头部元素，包含元信息，如字符集、页面标题、样式表链接、脚本链接等。<title>：定义浏览器工具栏的标题。<body>：主体元素，包含可见的页面内容，如文本、图片、视频、游戏、可播放的音频等。<p>：段落元素。
- 标签：HTML标签用于标记文本，以便浏览器知道如何渲染它们。
- 属性：提供关于元素的额外信息，通常在开始标签中规定。
2.注释
html中注释用<!-- 内容 -->来表示，注释的内容不会显示在页面上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- width -->
<!-- <strong>这是加粗的文字</strong> -->
</body>
</html>3.标题标签
html中用<h1>内容</h1>到<h6>来表示不同级别的标题，数字越小标题级别越高：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
4.段落标签
html中用<p>内容</p>来表示段落：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HTML（Hypertext Markup Language）是一种标记语言，用于创建网页结构和内容。它由一系列标签组成，这些标签描述了网页中各种元素的含义和结构。HTML使用标签来标识文本、图像、链接和其他内容，使浏览器能够正确地解释和显示网页内容。HTML的主要目标是提供一种标准化的方式来创建网页，使内容能够在不同的设备和浏览器上保持一致地呈现。它通过使用一系列预定义的标签和属性来描述页面的结构和内容，这些标签告诉浏览器如何展示文本、图像、表格、链接等内容。 HTML的发展经历了多个版本，不断演变和更新以适应不断变化的互联网需求。与其他技术（如CSS和JavaScript）结合使用，HTML能够实现更丰富、交互性更强的网页。总的来说，HTML是构建网页基础的重要语言，它定义了网页的结构和内容，为其他技术提供了基础，使网页能够以易于理解和浏览的方式呈现给用户。</p>
</body>
</html>
5.换行与水平分隔线
html中用<br>表示换行，<hr>表示水平分隔线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
第一行内容
<br>
<br>
第二行内容
<hr>
</body>
</html>
6.文本格式化标签
html中用<strong></strong>和<b></b>表示加粗，<em>和<i>表示倾斜，<ins>和<u>表示下划线，<del>和<s>表示删除线：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>em 倾斜</em>
<i>i 倾斜</i>
<ins>ins 下划线</ins>
<u>u 下划线</u>
<del >del 删除线</del>
<s>s 删除线</s>
</body>
</html>
7.图像标签和属性
HTML中的图像标签是 <img>，它用于在网页上嵌入图像。以下是 <img> 标签及其属性的详细介绍：
以下是一些常用的 <img> 标签属性：
-
src (Source)
- 用途：指定图像文件的URL（统一资源定位符）。
- 示例：
<img src="image.jpg" alt="描述">
-
alt (Alternative Text)
- 用途：提供当图像无法显示时的替代文本。这对屏幕阅读器用户和搜索引擎优化（SEO）都有帮助。
- 示例：
<img src="image.jpg" alt="美丽的风景">
-
width
- 用途：设置图像的宽度。可以指定像素值（px）或百分比（%）。
- 示例：
<img src="image.jpg" alt="描述" width="500">
-
height
- 用途：设置图像的高度。同样，可以指定像素值或百分比。
- 示例：
<img src="image.jpg" alt="描述" height="300">
-
title
- 用途：当用户将鼠标悬停在图像上时，显示的工具提示文本。
- 示例：
<img src="image.jpg" alt="描述" title="图像标题">
-
style
- 用途：用于直接在HTML中添加CSS样式。
- 示例：
<img src="image.jpg" alt="描述" style="border: 1px solid black;">
-
class
- 用途：用于指定一个或多个CSS类名，这些类名可以在样式表中定义。
- 示例：
<img src="image.jpg" alt="描述" class="rounded img-responsive">
-
id
- 用途：用于指定元素的唯一ID，可以用于JavaScript操作或CSS样式化。
- 示例：
<img src="image.jpg" alt="描述" id="main-image">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./R-C1.jpg" alt="白蛇传">
<img src="./微信图片_20230328143626.jpg" title="这是一只狗">
<img src="./R-C.jpg" width="100">
<img src="./微信图片_20230328143626.jpg" height="600">
<img src="https://i.mcmod.cn/class/cover/20200805/1596622593_79030_ggIm.jpg@480x300.jpg" alt="">
</body>
</html>
8.超链接
HTML中的链接标签是 <a>，它用于创建超链接，允许用户通过点击来导航到其他网页、文件、位置、电子邮件地址或任何其他URL：
以下是一些常用的 <a> 标签属性：
-
href：指定目标URL，为#时跳转到本页面
-
target：指定链接打开的位置
_self：默认值，在相同的框架或窗口中打开链接。_blank：在新窗口或标签页中打开链接。_parent：在父框架集中打开链接。_top：在整个窗口中打开链接，忽略任何框架。
3. title：鼠标悬停时显示的信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://chat.openai.com/">chatgpt</a>
<a href="./01-标签的写法.html" target="_blank">01</a>
<a href="#">#</a>
</body>
</html>
8.列表标签
html中用<ul></ul>里面加入<li></li>来表示无序列表，用<o></ol>里面加入<li></li>来表示有序列表，用<dl></dl>里面加入<dt></dt>来表示自定义列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>666</li>
<li>777</li>
</ul>
<ol>
<li>888</li>
<li>999</li>
</ol>
<dl>
<dt>444</dt>
<dd>333</dd>
</dl>
</body>
</html>
9.表格标签
html中用<table></table>表示表格域，它有很多属性：
border：设置表格边框的宽度。width：设置表格的宽度。cellspacing：设置单元格之间的空间。cellpadding：设置单元格内容和边框之间的空间。align：设置表格在页面中的对齐方式。bgcolor：设置表格的背景颜色。
<caption></caption>用于定义表格的标题。
<thead></thead>用于定义表格的列标题。
<tbody></tbody>包含表格的主体内容。
<tr></tr>定义表格的一行。
<th></th>定义表格的表头单元格。
<td></td>定义表格的单元格，属性：
colspan：设置单元格横跨的列数。rowspan：设置单元格横跨的行数。align：设置单元格内容的水平对齐方式。valign：设置单元格内容的垂直对齐方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>99</td>
<td rowspan="2">100</td>
<td>199</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<!-- <td>100</td> -->
<td>198</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="3">全市第一</td>
<!-- <td>全市第一</td>
<td>全市第一</td> -->
</tr>
</tfoot>
</table>
</body>
</html>
10.表单标签
表单（Form）是HTML中用于收集用户输入信息的元素。以下是HTML中常用的表单标签及其用途：
<form>：表单标签
- 定义一个HTML表单，用于用户输入。
- 属性：
action：指定表单数据提交到的URL。method：指定提交表单数据的方法（通常是GET或POST）。enctype：当method为POST时，指定表单数据的编码类型（例如，application/x-www-form-urlencoded或multipart/form-data）。name：表单的名称，用于JavaScript引用。target：指定在何处打开表单提交后返回的页面（例如，_blank在新窗口中打开）。
<input>：输入字段标签
- 定义用户输入的单个字段。
- 属性：
type：定义输入字段的类型（例如，text,password,checkbox,radio,submit,reset,file,hidden等）。name：定义输入字段的名称，用于在提交表单时引用该字段的值。value：定义输入字段的初始值。placeholder：提供输入字段的提示信息。readonly：指定输入字段为只读。disabled：禁用输入字段。size：定义输入字段的大小。maxlength：定义输入字段的最大长度。checked：对于类型为radio或checkbox的输入字段，指定默认选中状态。
<label>：标签标签
- 定义输入字段的标签。
- 属性：
for：与相关输入字段的id属性关联，改善表单的可用性。
<textarea>：文本区域标签
- 定义多行文本输入字段。
- 属性：
name：定义文本区域的名称。rows：定义文本区域的可见行数。cols：定义文本区域的可见宽度。placeholder：提供文本区域的提示信息。readonly：指定文本区域为只读。
<select>：选择框标签
- 定义下拉列表。
- 属性：
name：定义选择框的名称。multiple：允许选择多个选项。size：定义选择框的可见选项数。
<option>：选项标签
- 定义下拉列表中的选项。
- 属性：
value：定义选项的值。selected：指定选项默认选中。
<button>：按钮标签
- 定义一个按钮。
- 属性：
type：定义按钮的类型（例如，submit,reset,button）。name：定义按钮的名称。value：定义按钮的初始值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" placeholder="请输入用户名">
<br><br>
<input type="password" placeholder="请输入密码">
<br><br>
<input type="checkbox" checked> 敲前端代码
<br><br>
<input type="file" multiple>
<br><br>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<label><input type="radio" name="gender" checked> 女</label>
<br><br>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>武汉</option>
</select>
<br><br>
<textarea>请输入评论</textarea>
<br><br>
<button type="reset">提交</button>
<br><br>
</form>
<div></div>
<span></span>
66666 66666666
<p>
</body>
</html>
11.HTML5
H5通常指的是HTML5，这是HTML（HyperText Markup Language）的第五个主要版本，由万维网联盟（W3C）和网页超文本应用技术工作组（WHATWG）共同开发。HTML5在2014年10月28日被W3C正式推荐为标准。
HTML5引入了许多新的元素和功能，旨在更容易地创建丰富的网页内容，同时支持更多的多媒体内容，并且在不依赖插件的情况下也能在网页上运行。以下是HTML5的一些主要特点：
新的语义标签
<article>：定义独立的自包含内容。<section>：定义文档中的一个区段。<nav>：定义导航链接。<header>：定义文档或节的页眉。<footer>：定义文档或节的页脚。<aside>：定义页面内容之外的内容，如侧边栏。<figure>和<figcaption>：定义媒体内容及其标题。
扫一扫
6090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
