HTML 基础知识

网友投稿 1605 2022-10-17

HTML 基础知识

HTML 简介

什么是 HTML？

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

HTML 指的是超文本标记语言 (HyperTextMarkupLanguage)HTML 不是一种编程语言，而是一种标记语言 (markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页

HTML 标签

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

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

HTML 文档 = 网页

HTML 文档描述网页HTML 文档包含 HTML 标签和纯文本HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

Title

这只是个简单的例子

1

2

3

真的很简单

HTML 元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

HTML 元素语法

HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。


就是没有关闭标签的空元素（
标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如
，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。

HTML 属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

比如a标签里的href属性，img标签里的src属性

注意：

属性和属性值对大小写不敏感。不过推荐使用小写

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

下面列出了适用于大多数 HTML 元素的属性：

属性

值

描述

class

classname

规定元素的类名（classname）

id

id

规定元素的唯一 id

style

style_definition

规定元素的行内样式（inline style）

title

text

规定元素的额外信息（可在工具提示中显示）

HTML 元素

元素包含了所有的头部标签元素。在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

</p><p><title> 标签定义了不同文档的标题。</p><p><title> 在 HTML/XHTML 文档中是必须的。</p><p><title> 元素:</p><p>定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题</p><p><link></p><p><link> 标签定义了文档与外部资源之间的关系。</p><p><link> 标签通常用于链接到样式表.</p><p><style></p><p><style> 标签定义了HTML文档的样式文件引用地址.</p><p>在<style> 元素中你也可以直接添加样式来渲染 HTML 文档.</p><p><script></p><p><script>标签用于加载脚本文件，如： JavaScript。</p><p>HTML 标题</p><p>HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。一般一个文档只有一个h1标签，便于搜索。</p><p><h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3></p><p>HTML 段落</p><p>HTML 段落是通过 <p> 标签进行定义的。</p><p><p>This is a paragraph.</p><p>This is another paragraph.</p></p><p>HTML 链接</p><p>HTML 链接是通过 <a> 标签进行定义的。</p><p><a href="target="_blank">百度一下</a></p><p>href属性指明a标签的链接，可以是绝对或相对路径，target表明是跳转，还是新打开一个页面 _blank :新打开 _self :跳转（默认）</p><p>HTML 链接- id 属性</p><p>id属性可用于创建在一个HTML文档书签标记。</p><p>提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。</p><p>实例</p><p>在HTML文档中插入ID:</p><p><a id="tips">有用的提示部分</a></p><p>注意这里不一定非要是a标签，p标签等其他标签（有id属性）也可以使用。</p><p>在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"，也叫锚点。</p><p><a href="#tips">访问有用的提示部分</a></p><p>或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：</p><p><a href="图像</p><p>HTML 图像是通过 <img> 标签进行定义的。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。</p><p>定义图像的语法是：</p><p><img src="url" alt="some_text"></p><p>要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。URL 指存储图像的位置，如果名为 "girl.gif" 的图像位于 cnblogs.com 的 images 目录中，那么其 URL 为 /girl.gif。</p><p>浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。</p><p>HTML 图像- Alt属性</p><p>alt 属性用来为图像定义一串预备的可替换的文本。</p><p>替换文本属性的值是用户定义的。</p><p><img src="girl.gif" alt="girl"></p><p>在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。</p><p>HTML 图像- 设置图像的高度与宽度</p><p>height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。</p><p>属性值默认单位为像素:</p><p><img src="image/01.jpg" width="104" height="142" /></p><p>width和height规定了图片的宽和高。</p><p>提示: 指定图像的高度和宽度的一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。</p><p>HTML 表格</p><p>表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格<a target="_blank" href="https://www.finclip.com/news/tags-80.html"style="font-weight:bold;color:#262626">数据</a>（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。单元格使用align属性来控制内容所处位置。</p><p>表格的常用标签：</p><p>​​table​​表格​​thead​​表格头​​tbody​​表格主体​​tfoot​​表格尾​​th​​元素定义表头单元格​​tr​​定义表格行​​td​​元素定义内容单元格​​caption​​表格标题​​rowspan​​合并行​​colspan​​合并列</p><p>表格实例</p><p><table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table></p><p>在浏览器显示如下：:</p><p>HTML 表格和边框属性</p><p>如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。</p><p>使用边框属性来显示一个带有边框的表格：</p><p><table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr></table></p><p>HTML 表格表头</p><p>表格的表头使用 <th> 标签进行定义。</p><p>大多数浏览器会把表头显示为粗体居中的文本：</p><p>实例</p><p><table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table></p><p>在浏览器显示如下：</p><p>跨行或跨列表格</p><p>实例</p><p><html><body><h4>横跨两列的单元格：</h4><table border="1"><tr> <th>姓名</th> <th colspan="2">电话</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table><h4>横跨两行的单元格：</h4><table border="1"><tr> <th>姓名</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">电话</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table></body></html></p><p>带有背景颜色或背景图片的表格</p><p>实例</p><p><html><body><h4>背景颜色：</h4><table border="1" bgcolor="red"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table><h4>背景图像：</h4><table border="1" background="/i/eg_bg_07.gif"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table></body></html></p><p>HTML 列表</p><p>HTML 支持有序、无序和定义列表</p><p>无序列表</p><p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。</p><p>无序列表始于 <ul> 标签。每个列表项始于 <li>。</p><p><ul><li>Coffee</li><li>Milk</li></ul></p><p>浏览器显示如下：</p><p>CoffeeMilk</p><p><ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li></ul></p><p>浏览器显示如下：</p><p>苹果香蕉柠檬桔子</p><p>设置ul标签的type属性可以改变标记的格式</p><p>type="disc"   小黑圆圈</p><p>type="circle" 空心圆圈</p><p>type="square" 小黑方块</p><p>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</p><p>有序列表</p><p>同样，有序列表也是一列项目，列表项目使用数字进行标记。</p><p>有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。</p><p><ol><li>Coffee</li><li>Milk</li></ol></p><p>浏览器显示如下：</p><p>CoffeeMilk</p><p>同样，改变ol标签的type属性可以修改标记格式</p><p>默认：数字</p><p>type="A" ：大写字母</p><p>type="a" ： 小写字母</p><p>type="I" ：罗马数字</p><p>type="i" ： 小写罗马数字</p><p>列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</p><p>定义列表</p><p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。</p><p>自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。</p><p><dl><dt>Coffee</dt><dd>Black hot drink</dd><dt>Milk</dt><dd>White cold drink</dd></dl></p><p>定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。</p><p>嵌套列表</p><p>实例</p><p><ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li></ul></body></html></p><p>浏览器显示如下：</p><p>咖啡茶</p><p>红茶绿茶</p><p>中国茶非洲茶</p><p>牛奶</p><p>​​form​​表单</p><p>​​<form action="" method="get" name="" target="" ></form>​​</p><p>​ ​​action​​ 规定当前提交表单时向何处发送表单数据</p><p>​ ​​method​​ 规定用于发送的方法get/post</p><p>​ ​​target​​​ 规定​​action​​​属性中提交的页面在何处打开​​_black``_self​​</p><p>​ ​​name​​ 名字</p><p>​​input​​标签</p><p>​​input​​​标签是根据​​type​​的类型来判断这个输入框是什么类型</p><p>​​text​​ 文本框​​password​​ 密码​​radio​​​ 单选框，要指定相同的​​name​​​​checkbox​​​ 复选 ​​checked​​ 默认选中 ​​disabled​​ 禁选​​submit​​ 提交​​reset​​ 重置​​button​​ 按钮，多数情况下​​select/option​​ 下拉选框</p><p>​​<select name="" id="" size="2"></select>​​</p><p>​​size​​规定下拉列表中可见选项的数目</p><p>​​<option selected></option>​​</p><p>​​selected​​​ 规定在​​select​​里面默认展示第几项</p><p>​​placeeholder​​提示信息</p><p><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>

帐号：
密码：
性别（单选框）： 男 女 保密
兴趣（多选框）： 跳舞 看书 运动
下拉框：
文本框：

结果：

HTML

和

HTML 可以通过

和 将元素组合起来。

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

实例:

,

,