一、HTML 基本语法
在 HTML 中,标签可以分为单标记指令和双标记指令。
一、单标记指令:
如<br/>、<hr/>等单标签,不设置属性值时可直接使用。例如<br/>标签是换行标签,相当于操作系统中的\r\n操作符,浏览器渲染后会在当前位置回车操作,换到下一行继续显示内容。同时它也支持空行换行,是常规页面排版很常用的标签之一。也有设置属性值的情况,如<hr width="800"/>。在 HTML5 的版本中、<area>、<base>、<link>这三个单标记是已经报废无效了,而在 HTML4 中是可以继续使用的。使用单标记时不同的 HTML 版本对是否需要带斜杠是有不同的要求的。HTML5:斜杠是可选的。HTML4:斜杠不可选的。但是,它被 W3C 的 HTML 验证器接受了。XHTML:斜线是必需的。单标记指令还有<meta>、<img>、<input>等。<meta>标签是 “有关内容的信息”,它们位于文档的<head>中,用于将页面信息传递给浏览器。有许多不同的<meta>标签,你可以在网页上使用。<img>标签用于将图形图像添加到网页,语法为<img src="图片名称(路径)" witdh="宽度" height="高度">。<input>标签用于从访问者捕获信息的表单元素,有许多有效的输入类型。
二、双标记指令:
由<起始标记>内容</结束标记>构成,如<title>…</title>。也可设置属性值,如<body bgcolor="red">…</body>、<font size="7">…</font>。例如标题标签<h1>到<h6>,一级标题最大且只能用一次,所以一般从二级标题开始使用,语法为<h1 align="center">标题文本</h1>,其中align属性有left(设置标题文字左对齐,也作为默认值)、center(居中对齐)、right(右对齐)三个属性值。段落标签<p>,语法为<p align="对齐文本">这就是文本!</p>。还有<div>标签,意为 division,分割,区域是一个容器,用于网页的布局和规划,div中还可以嵌套多层div。表格标签<table>,表格的结构主要分为四个部分:表格标题,头部结构,表格内容,脚注。定义表格为<table>,表格标题为<caption>表格标题</caption>,头部结构为<thead><th>头部结构内容</th></thead>,表格内容为<tbody><tr><td>内容结构,一个 tr 标签代表一行,td 标签代表一个单元格</td></tr></tbody>,脚注为<tfoot><tr><td>脚注内容</td></tr></tfoot>。列表标签主要划分三种类型,即:有序列表,无序列表,自定义列表。有序列表语法为<ol>,其中较为常用的属性有reversed,star,type三个属性。reversed定义列表为降序排列,star取值数值,可定义有序列表的开始值,type取值不同表示类型,即 1 或 a 这种,顺序变成 1234 或者 abcd。无序列表语法为<ul>,常用属性一般只有type属性,该属性取值有三种,即disc(表示实心圆点,为默认值)、circle(表示空心圆点)、square(表示实心方块)。自定义列表语法为<dl>,<dt>标签是指 key:value 中的 key 值,<dd>标签是指 key:value 中的 value 值。表单标签结构主要有三个,分别为form,input,button,表单中的<input>标签也可以实现button按钮标签的功能特点,但仅推荐在特殊情况下使用。超文本和超链接使用<a>标签,其中<a>标签常用的属性有四个,分别为href,target,rel, download。href用于指定链接的目标 URL 地址,可以是绝对或相对地址,实现页面跳转或资源访问。target决定链接如何打开,常见取值有_blank(新窗口打开)、_self(当前窗口打开)、_parent(父级窗口打开)、_top(顶层窗口打开),用于控制链接的打开方式。rel指示链接与当前文档之间的关系,如nofollow(搜索引擎不跟踪链接)、noopener(防止跨窗口引用),有助于 SEO 优化和提升网站安全性。download指定链接目标资源下载,浏览器会将文件下载到客户端而不是在浏览器中打开,实现文件下载功能。框架标签<iframe>的核心作用是在一个页面中嵌入另一个 HTML 页面,属性包括src,指定嵌入的网页地址,可以是相对或绝对路径。
二、HTML 文档结构
(一)整体结构
- 文档类型声明:说明文档是 HTML 文档,如 HTML5 的声明为。这一声明是 HTML5 文档的开始标志,告诉浏览器该文档遵循 HTML5 规范。
- <html>标签对:是 HTML 文档的根元素,包含整个文档内容。<html>标签是整个 HTML 文档的根节点,它包含了<head>和<body>两个主要部分。属性方面,可通过 lang 属性指定文档的语言,如`<html lang="zh">`表示中文文档。xmlns 属性指定文档的 XML 命名空间,默认值是"http://www.w3.org/1999/xhtml"。
- <head>标签对:定义文档的元数据,包含<title><base><link><meta><style><script>等辅助性标签。
-
- <title>标签用于定义文档的标题,它会显示在浏览器的标题栏中。例如`<title>我的网页标题</title>`。
-
- <base>标签为页面上的所有链接规定默认地址或默认目标。
-
- <link>标签定义文档与外部资源的关系,最常见的用途是链接样式表。如`<link rel="stylesheet" type="text/css" href="/html/csstest1.css">`。
-
- <meta>标签提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键词。例如`<meta name="keywords" content="HTML,CSS,JS">`。
-
- <style>标签用于定义文档的内部样式表。
-
- <script>标签用于引入 JavaScript 脚本。
- <body>标签对:定义文档的主体内容,包含众多 HTML 标签。<body>标签包含了文档的主要内容,如文本、图像、链接等。<body>标签有很多属性可设置文档背景颜色、文本颜色等。例如`<body bgcolor="red">`设置背景颜色为红色,`<body text="blue">`设置文本颜色为蓝色。
(二)各部分详解
- <head>标签:包含页面标题、字符编码、引用的样式表和脚本等。如<meta charset="UTF-8">。
-
- 页面标题由<title>标签定义,它是<head>标签中的重要元素,用于为文档提供一个简洁明了的标题,方便用户识别和搜索引擎索引。
-
- 字符编码通常使用<meta charset="UTF-8">来指定,确保文档中的字符能够正确显示,避免出现乱码问题。
-
- 引用样式表可以通过<link rel="stylesheet" href="styles.css">来实现,将外部的 CSS 文件引入到文档中,以实现对页面样式的统一管理和美化。
-
- 引用脚本可以使用<script src="script.js"></script>,将 JavaScript 文件引入到文档中,为页面添加交互功能和动态效果。
- <body>标签:包含文档的主要内容,如文本、图像、链接等,有很多属性可设置文档背景颜色、文本颜色等。
-
- 文本可以通过各种文本标签来呈现,如段落标签<p>、标题标签<h1>到<h6>等。
-
- 图像可以使用<img>标签引入,如`<img src="image.jpg" width="300" height="200">`。
-
- 链接可以使用<a>标签创建,如`<a href="Example Domain">链接文本</a>`。
-
- 通过设置<body>标签的属性,可以改变文档的外观。例如,设置 bgcolor 属性可以改变背景颜色,设置 text 属性可以改变文本颜色。超链接文字的颜色可以通过设置 link、vlink 和 alink 属性来分别定义未访问过的超链接颜色、已访问过的超链接颜色和鼠标点击超链接时的颜色。文档边缘与窗口的距离可以通过设置 topmargin、leftmargin、rightmargin 和 bottommargin 属性来调整。
三、HTML 常用标签
(一)标题标签
- “<h1> ” 表示字体加粗,每个标题标签括中的文字都显示占取一行,随着 h 后面的数字增大,标题越来越小。标题标签常用于网页中文章的标题,其特点是加粗加黑显示,与其它行有一定的行间距且单独占用一行。例如:<h1>一级标题</h1>、<h2>二级标题</h2>、<h3>三级标题</h3>等。
(二)段落标签
- “<p></p>” 表示标签内部的内容是以段落的形式呈现。段落标签由开始标签<p>和结束标签</p>组成,开始和结束标签之间的内容会被视为一个段落。浏览器内置的样式会在段落的上下自动添加一定的空白区域。例如:<p>这是一个段落。</p>。段落标签中的文本会按照一定的格式显示,多个连续的空格和换行在显示时会被处理成特定的格式,如果想要在段落中换行,需要使用专门的换行标签<br />。
(三)换行标签
- “” 表示前后文本强制换行。换行标签属于自闭合标签,不需要对应的结束标签<br>。例如在段落中使用换行标签:<p>这个<br />段落<br />演示了分行的效果</p>。
(四)文本格式化标签
- 字体加粗:“<strong></strong>” 或者 “<b></b>”。用于将文本加粗显示,吸引读者的注意。例如:<strong>重要文本</strong>或<b>加粗文本</b>。
- 字体倾斜:“<em></em>或者 “<i></i>”。使文本以斜体显示,通常用于强调或表示特殊含义。例如:<em>强调文本</em>或<i>斜体文本</i>。
- 字体加删除线:“<del></del>或者 “<s></s>”。为文本添加删除线效果。例如:<del>删除文本</del>或<s>带删除线文本</s>。
- 字体加下划线:“<ins></ins>或者 “”。在文本下方添加下划线。例如:<ins>下划线文本</ins>或<u>带下划线文本</u>。
(五)<div>和标签
- 都是用来布局的,<div>内的文本内容独占一行,而一行可以有多个。<div>标签常用于网页的布局和规划,是一个大盒子,可作为容器来划分页面区域。例如:<div>这是一个大盒子,用于布局,一行只能放一个。</div>。<span>标签是一个小盒子,用于布局,一行可以有多个。例如:<span>这是一个小盒子,可在一行中放置多个。</span>。
(六)图像标签
- <img />是单标签,有很多属性丰富图像内容,如 src、alt、title、width、height、border 等。图像标签用于在网页中插入图像,其中 src 属性是必须的,用于指定图像的路径,可以是本地路径(包括绝对路径、相对路径)或网络路径。alt 属性是图片替代文本,在图片未加载出来时显示提示信息,同时也用于搜索引擎搜索。title 属性是提示文字,鼠标移入图片时会显示。width 和 height 属性用于设置图片的宽度和高度,可以只设置其中一个属性,另一个属性会自动按比例显示。border 属性用于为图像添加边框。例如:<img src="image.jpg" alt="图片描述" title="鼠标悬停提示" width="300" height="200" border="1">。
(七)超链接标签
- 格式:“<a href="" target=" "> 文本信息</a>”,href 为必须属性,target 表示网页的跳转方式。超链接标签<a>用于创建链接,href 属性指定链接的目标地址,可以是网页、文件、图片等。target 属性决定链接如何打开,常见取值有_blank(新窗口打开)、_self(当前窗口打开)、_parent(父级窗口打开)、_top(顶层窗口打开)。例如:<a href="Example Domain" target="_blank">链接文本</a>。
- 链接分类:外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接。
-
- 外部链接:必须以http://开头,如<a href="百度一下,你就知道">百度</a>。
-
- 内部链接:直接写网页名称即可,如<a href="first_page.html">首页</a>。
-
- 空链接:如果当时没有确定链接目标时,可以用<a href="#">首页</a>。
-
- 下载链接:href 里面地址是一个文件或压缩包,点击会下载该文件。
-
- 网页元素链接:网页中的各种元素如文本、图像、表格等都可以添加超链接。
-
- 锚点链接:点击链接,可以快速定位到页面中的某个位置。先在链接文本的 href 属性中设置属性值为#名字的形式,如<a href="#two">第二集</a>,然后在目标位置标签中添加一个 id 属性等于刚才的名字,如<h3 id="two">第二集介绍</h3>。
(八)表格标签
- 大致格式:<table><tr><tb>文本信息 1</tb><tb>文本信息 2</tb></tr></table>。表格标签<table>用于创建表格,<tr>表示表格的行,<tb>表示表格的单元格。但通常使用<td>(表格数据单元格)和<th>(表头单元格)代替<tb>。
- 表头单元格标签:用<th>文本内容</th>书写,相当于替换掉 td 标签来加强显示功能。表头单元格中的文本通常加粗居中显示。
- 表格结构标签:用<thead>头部文本</thead>和<tbody>身体标签</tbody>划分表格为头部和身体。这样可以使代码的可读性更强,便于管理表格的不同部分。
- 合并单元格:跨行合并用rowspan = “合并单元格的个数”,跨列合并用colspan = “合并单元格的个数”。例如:<td rowspan = "2">...</td>表示跨行合并两个单元格。
(九)列表标签
- 无序列表:<ul>标签表示 HTML 页面中的无序列表,其中的<li>来存放列表项。无序列表中的各个列表项之间没有顺序之分,<ul>标签中只能嵌套<li>标签,但是<li>标签可以存放其他标签。例如:<ul><li>列表项1</li><li>列表项2</li></ul>。无序列表的项目符号可以通过 CSS 设置去除,如li {list-style: none;}。
- 有序列表:<ol>标签表示 HTML 页面中的有序列表,其中的<li>来存放列表项。各个列表项有顺序之分,<ol>标签中只能嵌套<li>标签,但是<li>标签可以存放其他标签。格式与无序列表相同,有序列表会自动标号。
- 自定义列表:<dl>标签表示定义列表,<dt>标签定义名字,<dd>标签定义名字解释。<dl>标签中只能包含<dt>和<dd>标签。例如:<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd></dl>。
(十)表单标签
- 由表单域、表单控件和提示信息三部分组成。
- 表单域:用<form>标签来定义表单域,包含 action、method、name 属性。<form>标签会将范围内的表单元素信息提交给服务器。例如:<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件</form>。
- 表单控件:有 input 输入表单元素、select 下拉表单元素和 textarea 文本域元素等。
-
- <input>标签:用于收集用户信息,常见的有账号、密码输入框。格式为<input type="属性值" />,type 的属性值有很多种,例如当账户输入时取 "text";当密码输入时取 "password";单选按钮取 "radio";多选按钮取 "checkbox";提交按钮取 "submit";重置按钮取 "reset";上传文件按钮取 "file"。单选按钮只有都同时定义相同的 name,才能实现出多选一的效果。
-
- <select>标签:用于定义下拉表单元素,可创建选项菜单,菜单内的内容选项标签为<option>,可以由<optgroup>标签将内容选项进行分组,默认是单选,属性multiple为true时,为多选。例如:<select><option>选项1</option><option>选项2</option></select>。