HTML

什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一。简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。

HTML的作用

内容结构化：HTML通过标签（tags）来组织和格式化网页上的信息，如段落、标题、链接、图片等，使得文本不仅仅是一串字符，而是具有特定结构和意义的内容。
创建超链接：HTML的一个核心功能是能够创建超文本链接，这些链接不仅可以链接到同一个网站内的不同页面，还可以链接到其他网站的页面。这种链接性是互联网互联互通的基础。
嵌入媒体：HTML允许开发者在网页上嵌入图片、音频、视频等多媒体资源，使网页内容更加丰富和动态。
表单功能：HTML提供了创建表单的功能，允许用户输入数据，如用户名、密码、评论等。这些数据可以被网站收集和处理，用于各种互动和功能，比如搜索、用户注册、评论等。
与CSS和JavaScript协作：虽然HTML本身主要负责网页的结构和内容，但它可以与CSS（层叠样式表）和JavaScript协同工作，分别负责网页的样式和行为。通过这种分工合作，开发者可以创建出既美观又功能丰富的网页应用。

网页的组成部分

网页的组成部分主要包括以下几个方面：

HTML (HyperText Markup Language): HTML 是网页的基础，用于创建和组织网页内容的结构。它包含了一系列的标记（tags）来定义文本、链接、图片、列表、表格等元素。
CSS (Cascading Style Sheets): CSS 用于设置网页的布局和样式。它允许开发者控制文字大小、颜色、间距、布局、背景图像等样式属性，从而使网页更加美观和用户友好。
JavaScript: JavaScript 是一种脚本语言，用于创建动态内容和交互式效果。通过JavaScript，可以实现用户事件处理、动画、数据验证、与服务器的通信等功能。
图片和多媒体内容: 网页中可能包含图片、视频、音频等多媒体内容，用于增强信息传达和用户体验。
字体和图标: 自定义字体和图标可以提高网页的视觉吸引力和品牌识别度。
数据和API (Application Programming Interface): 现代网页可能会与服务器进行数据交换，通过API获取动态数据，实现网页内容的实时更新和用户个性化体验。
Meta标签: Meta标签提供了网页的元数据信息，如网页描述、关键词、作者等，这些信息虽然不直接显示给用户，但对搜索引擎优化（SEO）非常重要。
网页框架和库: 如React, Vue, Angular等，这些现代的JavaScript框架和库提供了构建复杂、高效、响应式网页应用的工具和组件。

每个部分都扮演着重要的角色，共同工作以创建富有功能、用户友好和视觉吸引力的网页。

结构介绍

生成结构

Visual Studio Code 可以通过shift + ! 然后回车生产html结构

结构详情介绍

html由标签和属性构成。
标签：长在尖角号后面的第一个单词就是标签
属性：长在标签后面的并且用空格隔开的，称作属性
结构标签介绍

<!DOCTYPE html>
<!-- html为根标签 -->
<html lang="en">
<!-- head包裹的称为头部区域 -->
<head>
    <!-- 网页采用utf-8的编码格式 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题 -->
    <title>Document</title>
</head>
<!-- body包裹的称为内容区域 -->
<body>

</body>
</html>

在HTML（HyperText Markup Language，超文本标记语言）中，<html>, <head>, 和 <body> 标签扮演着构建网页的基础框架的角色。它们每一个都有特定的用途和重要性：

`<html>` 标签

<html> 标签是一个HTML文档的根元素。它包含了整个页面的内容，包括<head>和<body>两个部分。
它告诉浏览器页面的内容是HTML，确保浏览器正确解析页面内容。
通常，一个HTML文档的开始和结束都会被<html>标签包围。

`<head>` 标签

<head> 标签包含了一系列的元信息（meta-information）关于HTML文档，这些信息不会直接显示在页面上。
它通常包含标题(<title>)、样式表(<link>标签，用于链接CSS文件)、脚本(<script>标签，用于包含JavaScript)、元数据(<meta>标签，用于指定字符集、页面描述、关键词等)等。
<title> 标签定义的文本会显示在浏览器的标题栏或页面的标签上。
<head>标签是必须的，尽管有些情况下浏览器可以推断出它的存在。

`<body>` 标签

<body> 标签包含了所有可见的页面内容，比如文本、图片、视频、游戏、可播放的音频等。
实际上，用户在浏览器中看到的一切，除了一些由浏览器插件（如工具栏）生成的内容外，都是放在<body>标签内的。
它是HTML文档的主要部分，通常只有一个<body>标签。

简而言之，<html>标签定义了整个HTML文档的范围，<head>标签包含了文档的元信息和引用资源，而<body>标签则包含了实际呈现给用户看到的内容。

网页中常见的标签

标题标签

HTML中的标题标签用于定义文档的标题和子标题，有六级，从<h1>到<h6>。这些标签不仅用于视觉上区分不同层次的标题和子标题，而且对于搜索引擎优化（SEO）也非常重要，因为搜索引擎利用这些标签来理解页面的结构和内容的重点。

`<h1>`标签

通常用于页面的主标题。
每个页面上建议只使用一次<h1>标签，以便清楚地传达页面的主要主题。
对于SEO来说，<h1>标签是非常重要的，它告诉搜索引擎哪部分内容是页面上最重要的。

`<h2>`到`<h6>`标签

用于定义从次要标题到最不重要的标题。
这些标签帮助创建内容的层次结构，使得信息易于理解和导航。
使用这些标签时，最好按顺序使用，不要跳跃使用（例如，直接从<h1>跳到<h3>，跳过<h2>），以保持内容的结构清晰。

SEO和可访问性

标题标签在帮助搜索引擎理解页面内容方面发挥着关键作用。通过合理使用标题标签，可以提高网站的搜索引擎排名。
对于屏幕阅读器用户，合理的标题层次也非常重要，因为它们依赖于这些标签来导航内容。

示例

<h1>页面主标题</h1>
<h2>主要部分标题</h2>
<h3>次级部分标题</h3>
<h4>小节标题</h4>
<h5>更细小节标题</h5>
<h6>最小节标题</h6>

在实际使用中，应该根据内容的重要性和结构来选择合适级别的标题标签，以帮助用户和搜索引擎更好地理解和导航内容。

段落标签

在HTML中，段落标签<p>用于定义文本的段落。这是最常用的标签之一，用于组织和展示网页上的文本内容。段落标签帮助创建清晰的文本结构，使得内容易于阅读和理解。

使用`<p>`标签

当你需要在网页上添加一段文字时，你应该将这段文字放在<p>标签之间。
浏览器会自动在段落的前后添加一些垂直空间（上下边距），以便区分相邻的段落和其他元素。
<p>标签是块级元素，这意味着它通常会显示为新的一行开始，并且占据其父元素的全部宽度。

示例

<p>这是一个段落，它包含了一些文本内容。</p>
<p>这是另一个段落，用于展示如何在HTML中创建多个段落。</p>

样式和结构

尽管<p>标签主要用于文本内容，但可以通过CSS来改变它的外观，比如修改字体、大小、颜色、行高以及边距等。
使用段落标签而不是通过连续的<br>标签来创建新行是一种更好的实践。这样做不仅符合HTML的语义，而且使得内容的结构更清晰，也便于通过CSS进行全局样式的控制。
为了提高内容的可访问性和SEO效果，建议合理使用段落标签来组织文本，使其结构化和易于理解。

与其他文本元素的关系

<p>标签通常与标题标签（<h1>-<h6>）一起使用，标题标签定义了各个部分的标题，而段落标签则用于包含实际的内容文本。
在段落内部，你还可以使用其他标签，如加强标签<strong>和强调标签<em>，来提高文本的可读性和表达特定的语义。

强调标签

在HTML中，用于强调文本的标签主要包括<em>和<strong>，它们各自表达不同程度的强调意义，同时也对搜索引擎优化（SEO）有一定的影响，因为这些标签能帮助搜索引擎理解哪些词语或短语是重要的。

`<em>`标签

<em>标签用于表示文本的强调，通常表现为斜体。
这种强调是为了改变单词或短语的语气，类似于我们在说话时通过语音的变化来强调某些词。

使用示例：

<p>我真的<em>非常喜欢</em>这部电影。</p>

在这个例子中，”非常喜欢”这个短语会以斜体显示，以突出强调。

`<strong>`标签

<strong>标签用于表示文本的重要性，通常表现为加粗。
这种标记不仅改变了文本的外观，更重要的是，它传达了内容的重要性，可以用于突出显示关键信息或重点。

使用示例：

<p>重要：<strong>明天的会议取消了。</strong></p>

在这个例子中，”明天的会议取消了”这个短语会被加粗显示，以强调其重要性。

语义和搜索引擎优化（SEO）

<em>和<strong>标签不仅仅是为了改变文本的外观，它们具有语义的意义，表示文本的某部分比周围的文本更加重要或需要强调。
从SEO的角度看，合理使用这些标签可以帮助搜索引擎识别出页面中的关键信息，从而可能影响搜索结果的排名。

注意事项

尽管这些标签在视觉上可能与使用CSS样式（如font-style: italic;或font-weight: bold;）达到的效果相似，但它们的目的是传达语义，而不仅仅是外观。
应当谨慎使用这些标签，以确保不会过度强调文本，从而分散了读者的注意力或降低了页面的可读性。

通过合理利用<em>和<strong>标签，开发者不仅能提高网页内容的表现力，还能增强其语义结构，对提高用户体验和优化搜索引擎排名都有积极作用。

换行标签

br标签

<body>
	窗前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡
</body>

hr标签

作用：标签变成分割线

<body>
	你好呀
	<hr>
	哈哈
</body>

div标签

div标签是用来布局的，并没有语义，只是一个区块

<body>
	<div>
		这是个盒子
	</div>
</html>

span标签

没有语义，一般用来包裹文字,让文字更好被选中。

<body>
	<span>这是个盒子</span>
</html>

img标签(图片标签)

作用：插入图片
属性
- src: 引入图片路径
- alt: 对图片的描述
- height: 设置图片的高
- width: 设置图片的宽度

// 可以链接引入
<img src="https://image.baidu.com/search/detail?
ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=csdn&step_word=&ie=u
tf-
8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefi
ned&cs=3710574112,2880096239&os=1416383172,4248936337&simid=3710574112,28800
96239&pn=2&rn=1&di=7214885350303334401&ln=1613&fr=&fmq=1684939880586_R&fm=&i
c=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face
=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https
%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%25
2F2021%252F1228%252F42dd5c8ej00r4t6c6000ld200u000iug00u000iu.jpg%26thumbnail
%3D660x2147483647%26quality%3D80%26type%3Djpg&rpstart=0&rpnum=0&adpicid=0&no
jc=undefined&dyTabStr=MCw2LDEsNCw1LDMsMiw3LDgsOQ%3D%3D" alt="">
// 也可以本地引入
<img src="./图片.png" alt="">

a标签

作用:点击跳转到另一个网页
href：指定访问资源的URL
target:指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

<body>
	<a href="https://baidu.com">点击当前页面跳转到百度</a>
	<a href="https://baidu.com" target="_blank">点击重新打开页面跳转到百度</a>
</body>

列表标签

有序列表 ol li

<body>
	<ol>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
	</ol>
</body>

无序列表 ul li

<body>
	<ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
	</ul>
</body>

表单标签

在网页中主要负责数据采集功能
表单项(元素)：不同类型的input元素、下拉列表、文本域等

input 标签

type属性：

text: 默认值、定义单行输入字段

<body>
	<input type="text">
</body>

password：定义密码字段

<body>
	<input type="password">
</body>

radio：定义单选框

<!--单选框-->
<!--想要多个单选按钮互斥，需要把他们的name设为一样的-->
<!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分
是男是女-->
<body>
    <input type="radio" name="gender" value="1" id="male">
    <label >男</label>
    <input type="radio" name="gender" value="2" id="female">
    <label >女</label>
</body>

checkbox：复选框

<body>
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">阅读
</body>

button: 按钮

<!--按钮-->
    <input type="button" value="一个普通按钮">
    <button>一个普通按钮的第二个写法</button>

file：会将头像文件上传

<!--上传文件-->
<input type="file"><br>

select :定义下拉列表，option定义列表项

<body>
	<select>
        <option value="1">红色</option>
        <option value="2">绿色</option>
        <option value="3">黄色</option>
	</select>
</body>

textarea ：文本域

<body>
	<textarea></textarea>
</body>

角灯随笔