HTML简讲

HTML是什么

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

常用的HTML标签

<html>：定义HTML文档的根元素。
<head>：定义HTML文档的头部，包含了文档的元数据。
<title>：定义文档的标题，显示在浏览器的标题栏或选项卡上。
<body>：定义HTML文档的主体部分，包含了可见的内容。
<h1>到<h6>：定义标题，从大到小表示不同级别的标题。
<p>：定义段落。
<a>：定义超链接，用于创建链接到其他页面或资源的文本或图像。
<img>：定义图像，用于在网页上显示图片。后接url表示引用图片地址。使用alt默认加载内容。
<ul>：定义无序列表，使用<li>标签表示列表项。
<ol>：定义有序列表，使用<li>标签表示列表项。
<li>：定义列表项。
<dl> 是 HTML 中的定义列表（Definition List）标签，用于定义术语和其对应的描述。它通常与 <dt>（定义术语）和 <dd>（定义描述）标签配合使用。
<table>：定义表格，使用<tr>、<td>和<th>标签表示行、单元格和表头。
<form>：定义表单，用于收集用户输入的数据。
<input>：定义表单中的输入字段，例如文本框、复选框、按钮等。placeholder默认显示内容。
<input> 标签是 HTML 中用于创建表单控件的标签，它的 type 属性用于指定输入框的类型。以下是一些常见的 <input> 类型：
1. text：文本输入框，用于输入单行文本。
```
<input type="text" name="username">
```
2. password：密码输入框，用于输入密码，字符会被隐藏。
```
<input type="password" name="password">
```
3. number：数字输入框，用于输入数值。
```
<input type="number" name="age">
```
4. email：邮箱输入框，用于输入电子邮件地址。
```
<input type="email" name="email">
```
5. checkbox：复选框，用于选择多个选项。
```
<input type="checkbox" name="hobbies" value="reading"> 阅读
<input type="checkbox" name="hobbies" value="music"> 音乐
```
6. radio：单选按钮，用于选择一个选项。
```
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
```
7. file：文件上传框，用于选择上传文件。
```
<input type="file" name="file">
```
8. submit：提交按钮，用于提交表单数据。
```
<input type="submit" value="提交">
```
9. reset：重置按钮，用于重置表单数据。
```
<input type="reset" value="重置">
```
<select> 标签用于创建下拉列表，用户可以从预定义的选项中选择一个或多个选项。
<button>：定义按钮。
<div>：定义文档中的一个区块，用于组合其他元素或应用样式。
<span>：定义文档中的行内元素，用于组合文本或应用样式。
<header>：定义文档的页眉。
<footer>：定义文档的页脚。
<nav>：定义导航链接的部分。
<audio>：用于在网页中嵌入音频内容。可以使用该标签指定音频文件的来源、控制播放、调整音量等。
<video>：用于在网页中嵌入视频内容。可以使用该标签指定视频文件的来源、控制播放、调整音量、设置视频尺寸等。src 属性指定了视频文件的路径，controls 属性显示了视频播放器的控制界面.
<blockquote>: 用于在HTML中表示引用的块级元素。它通常用于引用其他来源的内容，比如文章、书籍、演讲等。其中使用<cite>引入引用源。<code>引入代码
<strong>:加粗。
<em>:斜体。

内容划分

image-20230727214136698转存失败，建议直接上传图片文件

在前端开发中，页面的内容划分和布局是非常重要的。以下是一般前端页面内容划分布局的标准：

头部（Header）及导航栏（Navigation）：头部通常位于页面的顶部，包含网站或应用的标志、导航菜单、搜索框等。头部通常是全局的，出现在每个页面上。导航栏位于头部或页面的顶部，用于提供页面内部的导航链接，帮助用户快速浏览和访问不同的页面或功能。
内容区域（Main）：内容区域是页面的主要部分，用于展示具体的内容，如文章、图片、商品列表等。内容区域的布局可以根据具体需求进行设计，如单栏、双栏、网格等。
侧边栏（Sidebar）：侧边栏通常位于内容区域的一侧，用于显示相关的附加信息、导航链接、标签云等。侧边栏可以用于提供额外的功能或辅助导航。
脚注（Footer）：脚注位于页面的底部，包含版权信息、联系方式、相关链接等。脚注通常是全局的，出现在每个页面上。

以上是一般前端页面内容划分布局的标准，但实际上可以根据具体的项目需求进行调整和扩展。使用HTML和CSS可以实现这些布局，并且可以通过响应式设计来适应不同屏幕尺寸和设备。同时，使用CSS框架如Bootstrap等可以简化页面布局的开发过程。

image-20230727214332004转存失败，建议直接上传图片文件

HTML语义化

HTML语义化是指使用恰当的HTML标签（元素，属性，属性值）来描述网页内容的结构和含义，以便于开发者和搜索引擎理解和解析页面或者是提高无障碍功能。下面是一些HTML语义化的实践：

使用适当的标签：选择合适的HTML标签来描述不同类型的内容。例如，使用 <h1> - <h6> 标签来表示标题，使用 <p> 标签来表示段落，使用 <ul> 和 <li> 标签来表示无序列表等。
使用语义化的标签表示结构：使用具有语义的标签来表示页面的结构，如 <header>、<nav>、<main>、<section>、<article>、<aside>、<footer> 等。这些标签能够更准确地描述页面的不同部分，使其更易于理解和维护。
使用 <a> 标签进行链接：使用 <a> 标签来创建链接，同时为链接添加适当的 href 属性和文本描述。避免使用无意义的链接文本，而应使用描述性的文本或关键字。
使用表格标签 <table>：当需要呈现表格数据时，使用 <table>、<thead>、<tbody>、<th> 和 <td> 等表格相关的标签来构建表格结构。这样可以更好地描述表格的语义和结构。
使用表单标签 <form>：当创建表单时，使用 <form>、<input>、<select>、<textarea> 等表单相关的标签来构建表单结构。这样可以使表单更具语义，并提供更好的可访问性和用户体验。
提供有意义的图像描述：对于图像，使用 alt 属性为图像提供有意义的描述文本，以便于屏幕阅读器和搜索引擎理解图像内容。

HTML简讲｜ 青训营