前端编程艺术（1）---HTML

1.HTML

2.注释

3.标题标签

4.段落标签

5.换行与水平分隔线

6.文本格式化标签

7.图像标签和属性

8.超链接

8.列表标签

9.表格标签

10.表单标签

11.HTML5

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&nbsp;66666666&lt;p&gt;
</body></html>