前端-001：HTML结构标签语法 表格、列表、表单标签

ZHOUQYI
321 阅读11分钟

1.HTML语法规范

1.1基本语法概述

  • HTML 标签是由尖括号包围的关键词，例如 。
  • HTML 标签通常是成对出现的，例如 和 ，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  • 有些特殊的标签必须是单个标签（极少情况），例如
    ，我们称为单标签。

1.2标签关系

包含关系：

<head>
 <title> </title>
</head>

并列关系：

<head> </head>
<body> </body>

2.HTML基本结构标签

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。

  • <html></html>：HTML标签--页面中最大的标签，根标签。
  • <head></head>:文档的头部--在head标签里面必须要设置litle标签。
  • <title></title>:文档的标题--让页面有自己的网页标题。
  • <body></body>:文档的主体--网页的所有内容都是放在body里面的。 HTML 文档的的后缀名必须是 .html 或 .htm

3.HTML常用标签

3.1标签的语义

学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即标签是用来干嘛的。 根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

3.2标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即<h1> - <h6> 。意为头部、标题。

<h1> 我是一级标题 </h1>

标签语义：作为标题使用，并且依据重要性递减。

特点：

  • 加了标题的文字会变的加粗，字号也会依次变大。
  • 一个标题独占一行。

3.3段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段 落， paragraph [ˈpærəgræf] 的缩写，意为段落。它可以将整个网页分为若干个段落。

<p> 我是一个段落标签 </p>

特点：

  • 文本在一个段落中会根据浏览器窗口的大小自动换行
  • 段落和段落之间保有空隙

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望 某段文本强制换行显示，就需要使用换行标签 <br />。break 的缩写，意为打断、换行。

标签语义：强制换行。

特点：

  • <br /> 是个单标签
  • <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距

3.4文本格式化标签

在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义: 突出重要性, 比普通文字更重要

  • 加粗：<strong></strong>或者<b></b>(前者语义更强烈)
  • 倾斜：<em></em>或者<i></i>(前者语义更强烈)
  • 删除线：<del></del>
  • 下划线：<ins></ins> 重点记住 加粗 和 倾斜。

3.5<div>和<span>标签

<div>和 <span>是没有语义的，它们就是一个盒子，用来装内容的。

div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。

特点：

  • <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
  • <span> 标签用来布局，一行上可以多个 <span>。小盒子

3.6图像标签和路径

  • 图像标签: <img> 标签用于定义 HTML 页面中的图像。 单词image 的缩写，意为图像。
<img src="图像URL" />

src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

  • src：图片路径--必须属性
  • alt：文本--替换文本，当图片无法加载时现实的提示文本
  • title：文本--当鼠标放在图像上显示的文本
  • width：像素--设置图像的宽度
  • height：像素--设置图像的高度
  • border：像素--设置图像的边框粗细

注意点：

  • 图像标签可以拥有多个属性，必须写在标签名的后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

掌握点：

  • src是必须写的
  • 能说出alt和title的属性区别

3.7超链接标签

链接的语法，单词 anchor [ˈæŋkə(r)] 的缩写，意为：锚。

<a href="跳转目标" target="弹出方式"> 文本或图像 </a>

两个属性的作用：

  • href：用于指定链接目标的url地址（必须属性），只有为标签应用href属性的时候，才具有超链接的功能
  • target：用于指定链接页面的打开方式，其中self为默认值，blank为在新的窗口中打开

4.表格标签

4.1表格标签的作用

表格主要用于显示、展示数据，让数据显示的更加规整，可读性更高。特别是后台展示数据的时候，表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

4.2表格的基本语法

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>
  • <table> </table> 是用于定义表格的标签。
  • <tr> </tr> 标签用于定义表格中的行，必须嵌套在<table> </table>标签中。
  • <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
  • 字母td指表格数据（table data），即数据单元格的内容。

4.3表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示

<th>标签表示HTML表格的表头部分(table head 的缩写)

<table>
 <tr>
 <th>姓名</th>
 ...
 </tr>
 ...
</table>

如图： 001.jpg 表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示.

4.4表格属性

表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.（先了解）

002.jpg

4.5表格结构标签

:因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分. 在表格标签中，分别用：<thead>标签 嵌套表格的头部区域、<tbody>标签 嵌套表格的主体区域. 这样可以更好的分清表 格结构。

注意点：

  • <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
  • <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
  • 以上标签都是放在 <table></table> 标签中。

4.6合并单元格

特殊情况下,可以把多个单元格合并为一个单元格

003.jpg

合并单元格方式：

  • 跨行合并：rowspan="合并单元格的个数"，最上侧单元格为目标单元格, 写合并代码
  • 跨列合并：colspan="合并单元格的个数"，最左侧单元格为目标单元格, 写合并代码

分两步走：

  • 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
  • 删除多余的单元格。

5.列表标签

列表标签是用来布局的。列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

列表分为：无序列表、有序列表和自定义列表三大类。

5.1无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表.jpg

本语法格式如下：

<ul>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ul>
  • 无序列表的各个列表项之间没有顺序级别之分，是并列的。
  • <ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或者文字的做法是不被允许的。
  • <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
  • 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。

注意点：

  • 无序列表前面会自带小圆点
  • 可通过CSS的list-style: none去除;

5.2有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。 在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

语法格式：

<ol>
 <li>列表项1</li>
 <li>列表项2</li>
 <li>列表项3</li>
 ...
</ol>
  • <ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。
  • <li> 与 </li>之间相当于一个容器，可以容纳所有元素。
  • 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。

5.3自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

自定义列表.jpg

在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

基本语法：

<dl>
 <dt>名词1</dt>
 <dd>名词1解释1</dd>
 <dd>名词1解释2</dd>
</dl>
  • <dl></dl> 里面只能包含 <dt> 和 <dd>。
  • <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。

6.表单标签

使用表单目的是为了收集用户信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。

6.1表单域

表单域是一个包含表单元素的区域

在 HTML 标签中，<form> 标签用于定义表单域，以实现用户信息的收集和传递

<form> 会把它范围内的表单元素信息提交给服务器

<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form>

常用属性：

常用属性.jpg

6.2表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

  • input输入表单元素
  • select下拉表单元素
  • textarea 文本域元素

6.2.1input表单元素

input是输入的意思，而在表单元素中 <input> 标签用于收集用户信息。

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本 字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />
  • <input /> 标签为单标签
  • type 属性设置不同的属性值用来指定不同的控件类型

type属性的属性值及其描述如下：

input.jpg

除type属性外，<input>标签还有其他很多属性，其常用属性如下：

input1.jpg

  • name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
  • name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
  • checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
  • maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.

6.2.2<label>标签

  • <label> 标签为input元素定义标注（标签）。
  • <label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

语法如下：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心： <label>标签的for属性应当与相关元素的id属性相同

6.2.3<select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下 拉列表。

语法：

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>
  • <select>中至少包含一对<option>
  • 在<option>中定义 selected =“ selected " 时，当前项即为默认选中项。

6.2.3<textarea>表单元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

<textarea rows="3" cols="20">
 文本内容
</textarea>
  • 通过 <textarea> 标签可以轻松地创建多行文本输入框。
  • cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。
avatar
文章
阅读
粉丝