HTML初认识 -- 第二课(全网最好的入门课)
文章目录
- 前言
- 一、HTML标记
- 二、HTML文本控制标记
- 1. 标题和段落标记
- 1. 标题
- 2. 段落
- 1. 段落标记主要用于把文字有条理的显示出来
- 2. 文本格式化标记
- 2. 特殊字符标记
- 3. div标记
- 4.span标签
- 三、列表
- 1. 无序列表 -- ul
- 2. 有序列表 - ol
- 3. 自定义列表 - dl
- 4.列表的嵌套应用
- 四、超链接
- 五、表格相关标记
- 5.1 表格的创建
- 5.2 table的属性
- 5.3 tr属性
- 5.4 th属性
- 5.5 td属性
- 六、表单
- 1. 特点和功能
- 2. 创建表单
- 补充:input和label
- 1. input
- 2. label
- 3.input控件
- 总结
前言
本节我们就正式进入了HTM的学习,希望在这个栏目之后我们都有所收获!
一、HTML标记
带有“<>”符号的元素被称为HTML标记也称为HTML标签或HTML元素
例如：<html>、<head>、<body>都是HTML标记单标记 and 双标记
- 单标记: 单标记也称空标记，是指用一个标记符号即可完整地描述某个功能的标记。
- 双标记: 双标记也称体标记，是指由开始和结束两个标记符组成的标记。
标记的属性
二、HTML文本控制标记
1. 标题和段落标记
1. 标题
一篇结构清晰的文章通常都有标题和段落，HTML网页也不例外，为了使网页中的文字有条理地显示出来，HTML提供了相应的标记。
2. 段落
1. 段落标记主要用于把文字有条理的显示出来
-
hr
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档层次分明，这些水平线可以通过插入图片实现，也可以通过标记来定义。<hr/>就是创建水平线的标记。
-
br
如果希望某些文本片段强制换行显示，就需要使用换行标记< br/>，这时如果还想在word中直接敲回车键换行就不起作用了。
2. 文本格式化标记
在网页中，有时需要为文字设置粗体、斜体或下划线效果，为此HTML提供了专门的文本格式化标记，使文字以特殊的方式显示。
2. 特殊字符标记
浏览网页时常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。
3. div标记
-
<div>标签是HTML中的块级元素，用于创建一个容器，用于将其他HTML元素组织在一起。它通常用于创建一个独立的区域，并为该区域应用样式或进行处理。
-
<div>标签没有特定的语义含义，它主要用于结构和布局目的。通过在 <div>标签内添加其他HTML元素，我们可以将它们组织在一起，并对整个区域应用样式或进行处理。
-
<div>标签可以与CSS样式一起使用，例如设置容器的宽度、高度、背景色、边框等。通过在 <div>标签内添加类名或ID，我们可以使用CSS选择器来选择和修改这些标签。
-
<div>标签可以帮助我们创建复杂的网页布局，将页面划分为多个区域，并在这些区域中放置不同的内容和元素。
-
<div>标签也可以用于创建结构化的文档，例如将网页的页眉、页脚、导航菜单等内容放置在不同的 <div>容器中。
4.span标签
-
<span>标签是HTML中的内联元素，用于在文档中标记包含在其中的文本或行内元素，并对其进行样式化或处理。它通常用于为特定的文本段落或单词应用样式、改变字体大小、设置颜色等。
-
<span>标签没有特定的语义含义，它仅用于应用样式或进行行内处理。它可以与CSS样式一起使用，例如设置字体颜色、背景色、字体大小等。
-
通过在<span>标签内添加类名或ID，我们可以使用CSS选择器来选择和修改这些标签。例如，我们可以使用类选择器来为特定的<span>标签应用特定的样式。
-
请注意，<span>标签是一个内联元素，它不会对文本进行换行。如果需要对多行文本应用样式，应该使用块级元素，如<div>标签。
总而言之，<span>标签是一个非常常用的HTML元素，可以用于标记和样式化文本中的特定部分。
三、列表
1. 无序列表 – ul
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
- <ul> </ul>只能嵌套<li> </li>，直接在<ul> </ul>标签中输入其他标签或者文字的做法是不被允许的。
- <li> </li>之间相当于一个容器，可以容纳所有元素。
- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
2. 有序列表 - ol
-
<ol>标签是HTML中的有序列表标签，用于创建一个有序列表。有序列表是一组按照特定顺序排列的项目或条目。
-
<ol>标签的每个子项使用<li>标签表示一个列表项。通过使用<ol>和<li>标签，我们可以创建一个按照特定顺序排列的列表，其中每个列表项前面会显示一个序号。
-
<ol>标签有一个可选的start属性，用于指定起始的序号，默认情况下是从1开始计数。例如，start="5"将从5开始计数序号。
-
<ol>标签和<li>标签通常会与CSS样式一起使用，以设置列表的样式和外观。通过添加类名或ID，我们可以选择和修改列表中的特定项。
-
<ol>标签适用于许多不同的应用场景，如创建步骤列表、计数列表、排名列表等。它提供了一种简单而直观的方式来呈现有序的信息。
总而言之，<ol>标签是HTML中的有序列表标签，用于创建一个按照特定顺序排列的列表。它可以与<li>标签一起使用，用于表示列表的每个项。
3. 自定义列表 - dl
<dl>标签是HTML中的定义列表标签，用于创建一个只有键值对的列表。<dl>表示定义列表，其中每个列表项由一个术语（定义项）和对该术语的解释（定义描述）组成。
<dl>标签的结构如下：
- <dl>：定义列表的容器标签
a. <dt>：定义列表的术语（定义项）标签
b. <dd>：定义列表的解释（定义描述）标签
<dt>标签用于表示定义列表中的术语，它通常以粗体显示。而<dd>标签用于表示对术语的解释或描述。一个<dt>标签可以对应多个<dd>标签，表示多个解释。
定义列表通常用于显示术语和对应的定义，可以用于术语表、字典、词汇表等场景。
在网页设计中，自定义列表常用于实现图文混排效果，其中<dt></dt>标记中插入图片，<dd></dd>标记中放入对图片解释说明的文字。
<!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无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- ol有序列表 -->
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
<!-- 嵌套列表 -->
<ul>
<li>
<ul>
<li>
嵌套列表
</li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<a href="https://www.baidu.com">百度一下</a>
<a href="https://www.baidu.com"><img src="../站长素材/齐耳短发齐刘海美女摄影图片.jpg" alt="东南亚长卷发橙色衬衫美女" width="200"></a>
<!-- 打开一个新的页面进行打开 -->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
结果展示
4.列表的嵌套应用
要想在列表项中定义子列表项就需要将列表进行嵌套。
四、超链接
<a>标签是HTML中的超链接标记，用于创建一个链接到其他网页、文件、位置或URL的链接。
-
<a>标签的结构如下：
- <a href=“链接地址”>链接文本<a>
其中，href属性用于指定链接的目标地址，可以是一个网址、文件路径、锚点等等。链接文本是在网页上显示的文字或图像，用户点击该文本时会跳转到指定的目标地址。
例如，以下是一个使用<a>标签创建的超链接的示例： <a href=“https://www.example.com”>点击这里访问示例网站<a>
该示例中，当用户点击“点击这里访问示例网站”链接时，会跳转到https://www.example.com网站。
除了简单的超链接，<a>标签还可以配合其他属性和功能使用，例如：
-
target属性：用于指定链接在何处打开，例如在新窗口中打开（_blank）、在当前窗口中打开(_self)等。
-
title属性：用于给链接设置标题，用户将鼠标悬停在链接上时会显示该标题。
download属性：用于指定链接目标为下载文件，而不是打开链接。
总而言之，<a>标签是HTML中的超链接标记，用于创建一个链接到其他网页、文件、位置或URL的链接。它可以通过href属性指定链接的目标地址，并通过链接文本显示在网页上。除了基本的超链接功能，还可以使用其他属性和功能来定制链接的行为和样式。
五、表格相关标记
在网页制作中，表格起着重要的作用，除了用来对齐数据之外，更多的用来进行网页排版，使一些数据信息更容易浏览，因此表格在页面布局中的应用非常广泛。
5.1 表格的创建
创建table表格,离不开以下三对标签
- <table></table> – 定义一个表格
- <tr></tr> 定义表格中的一行，嵌套在<table></table>中
- <td></td> 定义表格中的单元格，嵌套在<tr></tr>中
5.2 table的属性
5.3 tr属性
5.4 th属性
<th>标签是HTML中表格标签<th>中用于定义表头单元格的标签。它表示表格中的表头行。
<th>标签具有以下属性：
- colspan：用于指定表头单元格横向合并的列数。例如，使用colspan="2"可以将一个表头单元格跨越两列。
- rowspan：用于指定表头单元格纵向合并的行数。例如，使用rowspan="3"可以将一个表头单元格跨越三行。
- headers：用于与元素关联的表头单元格的ID。如果一个元素位于一个或多个元素之下，则可以使用headers属性来指定与该元素关联的- <th>元素的ID。这在辅助技术中是有用的，因为它可以帮助屏幕阅读器正确地解读表头单元格之间的关系。
- scope：用于指定表头单元格的作用范围。可以是col、colgroup、row、rowgroup或auto。作用范围是为了帮助辅助技术识别单元格的作用范围和关系。
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
结果
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 25 | 男 |
| 李四 | 30 | 女 |
5.5 td属性
-
<td>标签用于定义表格的数据单元格，每个<td>元素表示表格的一个数据单元格。数据单元格中的文本将以普通字体显示。
-
<td>标签通常与<tr>和<th>标签一起使用，用于创建表格的数据行和数据单元格。数据行通常位于表格的中间，并用于显示表格的实际数据。
-
总而言之，<td>标签是HTML中表格标签<tr>中用于定义数据单元格的标签。它用于创建表格的数据行和数据单元格，并可以在单元格中放置文本、图像、链接或其他HTML元素。
六、表单
表单可以用来收集用户在客户端提交的各种信息，例如用户在网站上提交的的登录和注册信息，就是通过表单作为载体传递给服务器的，可以说表单是用户和浏览器交互的重要媒介。
HTML中的表单由标签包裹，可以包含各种表单元素，如输入框、复选框、单选按钮、下拉列表等。每个表单元素通常有一个名称（name）和一个值（value），用户在表单中填写或选择后，这些值可以被提交到服务器进行处理。
1. 特点和功能
- 提交按钮：表单中通常会包含一个提交按钮（<input type=“submit”>），用户点击该按钮后，表单中的数据会被提交到服务器处理。
- 表单数据验证：可以使用HTML的一些属性（如required、maxlength等），或者JavaScript进行客户端验证来确保用户输入的数据的有效性。
- 表单数据传递方式：表单数据可以通过HTTP的GET或POST方法传递到服务器。GET方法将数据附加到URL中，而POST方法将数据包含在请求的主体中，通常用于传递敏感数据。
- 与后端交互：服务器端的代码（如PHP、Java、Python等）负责接收和处理提交的表单数据，并可以对数据进行进一步处理、验证或存储。
2. 创建表单
<form action="/submit-form" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required><br>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required><br>
<input type="submit" value="提交">
</form>
- 上面的表单包含了两个输入框（姓名和邮箱），并且使用了required属性来确保这两个字段不能为空。表单中的数据将通过POST方法提交到"/submit-form"的服务器端地址进行处理。
总而言之，表单是一种用于收集用户输入数据的HTML元素，可以通过各种表单元素收集用户的输入，并将数据提交到服务器进行进一步处理。
补充:input和label
1. input
<input>标签是HTML中用于创建各种表单控件的元素。它是最常用的表单元素之一，用于接收用户的输入或选择。
<input>标签有多种类型，常用的类型包括：
-
type
- text：用于接收单行文本输入。
- password：用于接收密码输入，输入内容会被隐藏。
- checkbox：用于创建复选框，允许用户从一组选项中选择多个选项。
- radio：用于创建单选框，允许用户从一组选项中选择一个选项。
- submit：用于创建提交按钮，提交表单数据给后端处理。
- button：用于创建普通按钮，可绑定JavaScript函数来执行特定操作。
- file：用于接收文件输入，允许用户选择文件上传。
- date、time、number等：用于接收日期、时间、数字等特定格式的输入。
-
name：用于定义表单控件的名称，通常用于后端处理表单数据。
-
value：用于设置默认值或接收用户输入的值。
-
placeholder：用于在输入框内显示灰色提示文本。
-
required：用于指定该输入控件是否必填。
-
disabled：用于禁用该输入控件，使其无法被编辑或选中。
2. label
<label>标签是HTML中用来关联表单控件（如输入框、单选框、复选框、下拉列表等）与其文本标签的元素。它通过将文本标签与表单控件进行关联，提升了表单的可用性和可访问性。
<label>标签有两种使用方式：
- 使用"for"属性：通过设置<label>标签的"for"属性，将该标签与目标表单控件的"ID"属性进行关联。这种方式帮助用户点击文本标签时，浏览器会自动聚焦到对应的表单控件。 示例：
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
- 嵌套方式：将表单控件直接放在<label>标签内部，不需要设置"for"属性。 示例：
<label>性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</label>
<label>标签的作用：
- 改善用户体验：通过将文本标签与表单控件关联，用户可以点击文本标签来选中或输入相关的表单控件，而不仅限于鼠标点击控件本身。
- 辅助可访问性：使用<label>标签来描述表单控件，可以提高网站的可访问性，使屏幕阅读器等辅助技术能够正确地解读和呈现表单的内容。
- 提升可点击区域：使用<label>标签可以扩大可点击区域，使用户更容易点击到相关的表单控件。
总之，<label>标签用于将表单控件与文本标签进行关联，提高表单的可用性和可访问性。它可以通过"for"属性或嵌套方式进行使用，以改善用户体验和提升网站的可访问性。
3.input控件
- label标签 – 扩大控件的使用范围,从而提供更好的用户体验
性别: <label for="man">男</label><input type="radio" name="sex" id="man">
- textarea – 创建多行文本输入框
<textarea name="" id="" cols="2" rows="10"></textarea>
- select – 下拉菜单
<select name="" id="">
<option value="" aria-checked="true">--请选择城市--</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">武汉</option>
</select>
总结
本节主要介绍了html的常用组件,内容较多,各位学者们主要还是以多练为主!