Web学习笔记 HTML(一)

文章目录

本文参考：W3school

HTML 简介

HTML

HTML是一种用于描述网页的语言
HTML 指的是超文本标记语言 (Hyper Text Markup Language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页

HTML标签

HTML标签是由尖括号括起来的关键词，如<p>，<br>等
HTML 标签通常是成对出现的，比如 <h1> 和 <h1>
前面的标签称为开始标签或开放标签，后面的标签称为结束标签或闭合标签

HTML文档

HTML文档也被称为网页，其中包含HTML标签和纯文本
HTML文档常用来描述网页

HTML 编辑器

能编辑HTML的编辑器有很多，这里就只讲最简单的一种：

打开记事本
在记事本中输入HTML 代码
在保存时讲记事本的.txt后缀改为.html
用浏览器打开该HTML文件

HTML 元素

HTML元素是从开始标签到结束标签之间的所有代码：

如，<p>i’m a paragraph</p>中i’m a paragraph就是元素
某些元素可以是空
元素可以拥有属性
HTML 元素可以嵌套(元素中包含另一个元素)

如标签body中嵌套标签p
```
<body>
<p>This is a paragraph.</p>
</body>
```

HTML 属性

HTML标签可以含有属性，属性对标签进行更具体的描述
属性总是以名称-值形式出现，如id=“qw”
属性总是在开始标签中定义

注意

属性和属性值对大小写不敏感(大小写均可)，推荐使用小写

属性值中用双引号或单引号，如属性值本身含有双引号则必须使用单引号，反之亦然

常见的属性值及其含义

属性值	含义
class	规定元素的类名（classname）
id	规定元素的唯一 id(常用于区分元素)
style	规定元素的行内样式（inline style）
title	规定元素的额外信息（可在工具提示

HTML 标题

HTML中用<h1>到<h6>分别代表不同大小的标题

<h1> 对应最大的标题，<h6> 对应最小的标题。

注意

浏览器会自动在标题前面添加空行
确保标题是有意义的，搜索引擎回根据你编写的网页结构和内容进行编制索引，用户会通过标题快速浏览网页
推荐做法，h1做主标题(最重要的)，h2次标题(次重要的)，依次类推

HTML 水平线

HTML中<hr/>表示在网页中创建水平线
<hr/>常用于分割不同内容

HTML 注释

HTML中用来表示注释内容，注释的效果我就不累述了

注意

注释不会再网页中显示
<!–text–> 中的text才是注释的内容

HTML 段落

HTML中用标签<p>定义段落(类似文章中的段落)

注意

网页被解析的时候，会自动在段落前面加上空行

HTML 换行

HTML中用<br/>来表示才不产生新段落的情况下换行

注意

虽然<br> 与 <br />均可表示换行，这里推荐使用<br />
HTML代码被解析时，会省略源代码中多余的空白字符（空格或回车等）

HTML 样式

HTML中使用属性style来改变HTML元素的样式

常用属性与其作用

属性	作用
text-align	文本的水平对齐方式
bgcolor	背景颜色
color	文本颜色

注意

属性值均在引号中以名:值形式存在
多个属性间用分号;隔开

HTML 文本格式化

常见的文本格式化标签及其作用

标签	作用	例子
<b>	加粗字体	b
<small>	小号字体	small
<big>	大号字体	big
<em>	强调字体	em
<i>	斜体字体	i
<strong>	加重语气	strong
<sub>	下标字	_sub
<sup>	上标字	^sup
<ins>	插入字	ins
<del>	删除字	~~del~~

HTML 计算机代码

标签	作用
<code>	用于显示计算机代码(不保留多余的空行和换行)
<kbd>	用于显示键盘码
<samp>	用于显示计算机代码样本
<tt>	用于显示打字机代码
<var>	用于显示变量
<pre>	用于显示预格式文本

HTML 引用

标签	作用
<abbr>	定义缩写
<acronym>	定义首字母缩写
<address>	定义地址
<bdo>	定义文字方向
<blockquote>	定义长的引用
<q>	定义短的引用语
<cite>	定义引用、引证
<dfn>	定义一个定义项目

address
<address> 标签用于定义文档或文章的联系信息（作者/拥有者）

cite
HTML <cite> 标签用于定义著作的标题。

abbr、acronym
bdo

blockquote、q

dfn
使用有点复杂，感兴趣的可以自行查看W3school HTML 引用

HTML 链接

链接也称为超链接，超链接可以是一个字、一个词或一段话、一张图片，可以用过点击它们来跳转到另一个界面
HTML中使用标签<a>创建链接，标签<a>的三种属性：

href属性： 指向另一个网页的链接

语法：直接在href后面写出网页的链接即可

<a href="http://www.w3school.com.cn/">Visit W3School</a>

arget属性： 定义被链接的文档在何处显示，如果把链接的 target 属性设置为 “_blank”，该链接会在新窗口中打开

语法：新建target属性并填值

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

name属性：

规定锚（anchor）的名称，
可用于创建本网页内跳转的书签，书签不会以任何特殊方式显示，它对读者是不可见的
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

<a name="label">锚（显示在页面上的文本）</a>

使用步骤

对锚进行命名(创建一个书签)

<!--这里的锚就是 提示书签-->
<a name="tips">提示书签</a>

在网页中创建指向该锚的链接

<!--最终在网页上显示的就是 提示-->
<a href="#tips">提示</a>

演示

HTML 图像

<img>

HTML中用<img>标签表示图像
<img>是空标签，它只包含属性没有闭合标签
src属性：用于显示图像，值为图像的URL地址(图像的地址)
alt属性：为图像预备的文本信息，如果图像无法显示则显示alt中的文本信息

定义简单图像的语法：

<img src="url" />

定义加alt属性图像的语法：

<img src="url" alt="text"/>

<map>

<map>用于定义一个图像映射(带有可点击区域的图像)
<area>总是镶嵌在<map>中，用于定义图像映射中的区域
必须为每个<map>指定一个唯一的id或name(根据浏览器)，一般将两者值设为一致
W3school map实例

HTML 表格

HTML用<table>来定义表格，用<tr>来定义表格的行，用<td>来定义表格的单元格，单元格里可以含有文本、图片、列表、表格等

边框
用 border属性定义边框

表头
用 <th> 标签定义表头

空单元格
推荐使用<td> </td>来表示空单元格

表格标题
用 <caption> 标签定义表头

HTML 列表

无序列表

无序列表中元素用小黑圆圈进行标记
用 <ul> 标签定义无序列表，用 <li>定义每个列表项
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

定义语法：

<ul>
<li>li1</li>
<li>li2</li>
</ul>

有序列表

有序列表中用数字进行标记
用 <ol> 标签定义有序列表，用 <li>定义每个列表项
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。