HTML学习笔记

最新推荐文章于 2024-07-12 20:49:16 发布

Seven_Stanko

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量437

点赞数 1

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/SECEBIN/article/details/119947596

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML学习笔记

一、HTML基础内容

1. 基础总结

对于前段开发，需要学会“HTML+CSS+JavaScript”；
前端技术只能开发静态网页，进一步学习了后端技术，能开发一个用户交互性更好、功能更加强大的网站；
后端记住有ASP.NET(或PHP)、SQL Server等；
学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；
HTML基本结构：

文档声明<!DOCType HTML>

…html

页头 head

…

/head

页身 body

…

/body

…/html

2. HTML基本标签

（1）HTML标签

整个网页是从这里开始，到结束。

（2）head标签

head标签代表页面的“头”，定义一些特殊的内容，往往都是“不可见内容”。

内部标签	说明
title	定义网页的标题
meta	定义网页的基本信息（供搜索引擎）
style	定义CSS样式
link	链接外部CSS文件或脚本文件
script	定义脚本语言
base	定义页面所有链接的基础定位（用的很少）

（3）body标签

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”。

3. 段落与文字

（1）段落标签

段落与文字标签

标签	语义	说明
<h1~h6>	header	标题
p	paragraph	段落
br	break	换行
hr	horizontal rule	水平线
div	division	分割（块元素）
span	span	区域（行内元素）

文本格式化标签

标签	语义	说明
	strong(加强)	加粗
	emphasized(强调)	斜体
	cite(引用)	斜体
	superscripted(上标)	上标
	subscipted(下标)	下标

（2）网页特殊符号

HTML空格“&nbsp”。

（3）自闭合标签

HTML标签分为2种，一种是“一般标签”，另外一种是“自闭和标签”。一般标签有开始符号和结束符号，自闭和标签只有开始符号没有结束符号。

一般标签可以在开始符号和结束符号之间插入其他标签或文字。

自闭和标签由于没有结束符号，不能插入其他标签或文字，只能sing已自身的属性。

一般标签

如：
自闭和标签

如：

（4）块元素和行内元素

HTML元素根据浏览器表现形式分为两类：块元素、行内元素；
块元素特点：
- 独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- 块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
行内元素特点：
- 可以与其他行内元素位于同一行；
- 行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见的行内元素有：strong、em、span等。

（5）标签的语义

标签名	英文全称	中文解释
div	division	分割（块元素）
span	span	区域（行内元素）
p	paragraph	段落
ol	ordered list	有序列表
ul	unordered list	无序列表
li	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition desciption	定义表述
h1~h6	header1~header6	标题1~标题6
hr	horizontal rule	水平线
a	anchor	锚点，超链接
strong	strong	强调（粗体）
em	emphasized	强调（斜体）
sup	superscripted	上标
sub	subscripted	下标
br	break	换行
fieldset	fieldset	域集
legend	legend	图例
caption	caption	（表格、图像等）标题
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格
td	td	表身单元格

4. 列表

标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无需列表
dl	defination list	自定义列表

（1）有序列表

<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

type属性值	列表项的序号类型
1	数字1、2、3……
a	小写英文字母a、b、c……
A	大写英文字母A、B、C……
i	小写罗马数字i、ii、iii……
I	大写罗马数字I、II、III……

（2）无序列表

<ul type = "列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

（3）自定义列表

<dl>
    <dt>定义名词</dt>
    <dt>定义描述</dt>
    ....
</dl>

在该语法中，

标记和标记分别定义了定义列表的开始和结束，后面添加要解释的名词，而在

后面则添加该名词的具体解释。

5. 表格

（1）表格语义记忆

表格基本标签

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格

表格结构标签

标签	语义	说明
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格

（2）表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

（3）表格完整结构

表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）四部分。

表格语义化之后，使得代码更清晰和更利于后期维护。

举例：

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thread>
        <tr>
            <th>表格单元格1</th>
            <th>表格单元格2</th>
        </tr>
    </thread>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

说明：

thead、tbody和tfoot这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“”表示一行。

（4）合并行和合并列

合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。

合并行

语法：
合并列

语法：

6. 图像

（1）图像标签

在HTML中，图像标签为。是一个自闭和标签。img标签需要掌握src、alt、title三个属性。

语法：

img标签常用属性

属性	说明
src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

（2）相对路径和绝对路径

相对路径指的是同一个网站下，不同文件的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。

绝对路径，指的是文件的完整路径。

（3）图片格式

JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以成为“网页设计专用格式”。
GIF格式图片图像效果很差，但可以制作动画。

7. 链接

超链接使用a标签，语法如下：

标签target属性

target属性值	说明
_self	默认方式，即在当前窗口打开链接
_blank	在一个全新的空白创久中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

超链接根据链接对象的不同分为：

外部链接
内部链接：内部页面链接、锚点链接

举例：

<!DOCTYPE html>
<head>

    <title>锚点链接</title>

</head>

<body>

    <div>

        <a href="#music">推荐音乐</a><br />

        <a href="#movie">推荐电影</a><br />

        <a href="#article">推荐文章</a><br />

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="music">

        <h3>推荐音乐</h3>

        <ul>

            <li>林俊杰-被风吹过的下图</li>

            <li>曲婉婷-在我的歌声里</li>

            <li>许嵩-灰色头像</li>

        </ul>

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="movie">

        <h3>推荐电影</h3>

        <ul>

            <li>蜘蛛侠系列</li>

            <li>钢铁侠系统</li>

            <li>复仇者联盟</li>

        </ul>

    </div>

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    ……<br />

    <div id="article">

        <h3>推荐文章</h3>

        <ul>

            <li>朱自清-荷塘月色</li>

            <li>余光中-乡愁</li>

            <li>鲁迅-阿Q正传</li>

        </ul>

    </div>

</body>
</html>

锚点链接就是点击某一个超链接，他就会跳到当前页面的某一部分。

点击相应的超链接，滚动条就会滚动到相应的版块。

8. 表单

表单的标签共有4个：input、textarea、select、option。其中select和option是配合使用的。

（1）input标签表单

大部分表单都是input标签完成的。

语法：

type属性值	说明
text	单行文本框
password	密码文本框
button	按钮
reset	重置按钮
image	图像形式的提交按钮
radio	单选按钮
checkbox	复选框
hidden	隐藏字段
file	文件上传

（2）textarea标签表单

单行文本框

语法：

密码文本框

语法：

多行文本框

语法：

多行文本框内容

（3）select和option

下拉列表由select标签和option标签配合使用。

语法：

<select multiple="mutiple" size="可见列表项的数目">

    <option value="选项值" selected="selected">选项显示的内容</option>

    ……

    <option value="选项值">选项显示的内容</option>

</select>

9. 多媒体

（1）插入音频、视频和flash

在网页中插入音频、视频和flash都是使用embed标签。

语法：

说明：

多媒体文件地址可以是相对地址，也可以是绝对地址。

width和height使用px作为单位。

（2）插入背景音乐

为某个网页设置背景音乐，使用的是bgsound标签。但bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必使用。

设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。

语法：

说明：

loop = "2"表示重复2次，loop = "infinite"表示无限次循环播放，也可以使用loop = " -1"表示无限次循环播放。

10. 浮动框架iframe

（1）浮动框架iframe简介

浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面不一定是框架页面，但要包含一个框架窗口。框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。

生成的框架结构我是以来上级空间尺寸的，它的宽度或者高度必须有一个和上级相同。而浮动框架可以完全由指定宽度和高度决定。

语法：

说明：

src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。

在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小，浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。

举例：

<!DOCTYPE html>

<head>

    <title></title>

</head>

<body>

    <div id="main">

        <h3>学习网</h3>

        <iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>

    </div>

</body>

</html>

（2）设置浮动框架是否显示滚动条scrolling

对于浮动框架iframe的滚动条可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是不显示和不显示。

语法：

scrolling属性值	说明
auto	默认值，整个表格在浏览器页面中左对齐
yes	总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no	在任何情况下都不显示滚动条

举例：

<!DOCTYPE html>

<head>

    <title></title>

</head>

<body>

    <div id="main">

        <h3>学习网</h3>

        <iframe src="http://www.baidu.com" width="400px" height="300px" scrolling="no"></iframe>

    </div>

</body>

</html>

二、进阶内容

1. HTML、XHTML和HTML5

（1）HTML和XHTML

HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的主要语言。我们常说的HTML指的是HTML 4.01。

XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。

XHTML相对于HTML来说，在语法上更加严格。

XHTML和HTML主要区别如下：

XHTML标签必须闭合

在XHTML中，所有标签必须闭合，此外，空标签也需要闭合，例如“br”要写成"br/"
XHTML标签以及属性必须小写

在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大写，但标签的属性值可以大写。
XHTML标签属性必须用引导

在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
XHTML标签用id属性代替name属性

在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。

（2）HTML5

HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。

不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。

单纯从新增的标签上来看，HTML5有以下几个特点：

文档类型说明

基于HTML5设计准则中的"化繁为简"原则，页面的文档类型<!DOCTYPE>被极大简化了。
标签不再区分大小写
允许属性值不加引号

允许部分属性的属性值省略

在HTML5中，可以省略属性值的属性如表所示：

省略形式	等价于
checked	checked=nchecked"
readonly	readonly=“readonly”
defer	defer=“defer”
ismap	ismap=“ismap”
mohref	nohref=“nohref”
noshade	noshade=“noshade”
nowrap	nowrap=“nowrap”
selected	selected=“selected”
disabled	ciisabled=“disableci”
mutiple	multiple=“multiple”
noresize	noresize=“disabled”

2. div和span

div和span没有任何语义，这两个标签一般都是配合CSS来定义元素样式的。

div和span区别如下：

div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span是行内元素，可以与其他行内元素位于同一行。
div常用语页面中较大块的结构划分，然后配合CSS来操作；span一般用来包含文字等，他没哟结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS操作。

除div和span外，还有一个label标签。div和span是无语义标签，但label是有语义标签，label只适用于表单中，用于显示在输入控件旁边的说明性文字。事实上，span标签往往都是用来配合CSS来修饰元素的。

3. id和class

id和class是HTML元素中两个最基本的公共属性，一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。

（1）id属性

id属性具有唯一性，在一个页面中相同的id只允许出现一次。对于页面的关键结构或者大结构，才使用id。所谓的关键结构，指的是诸如LOGO、导航、主体内容、底部信息栏等结构，对于一些小地方，还是建议使用class属性。

此外，id的命名也十分关键，特别是对搜索引擎优化而言。

（2）class属性

class就是"类"。它采用的思想跟C、Java等编程语言中的"类"相似。可以为同一个页面的相同元素或者不同元素设置相同的class，然后使得相同的class的元素具有相同的CSS样式。

当为两个或者两个以上元素定义相同的样式，建议使用class属性，这样可以减少大量的重复代码。

**注意：**对于一个元素而言，可以定义多个class，一般来说，定义多个class的目的在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。

**总结：**对于页面关键结构，建议使用id；对于小地方，建议使用class。就算不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id，以便搜索引擎识别页面结构。

4. 浏览器标题栏小图标

只需要在head标签添加一个link标签即可。

语法：

说明：

rel和type两个属性的取值是固定样式。href属性取值为小图标的地址，这个地址是根据小图标在站点文件夹路径而定的，跟图片的引用的路径是一样的。小图标的格式是.icon

5. 语义化

编写一个语义结构良好的页面主要有两个最大的优点：

利于开发调试和后期维护
利于搜索引擎优化

（1）标题语义化

h1~h6是标题标签，h代表header。

注意：

一个页面只能有一个h1标签

h1标签表示每个页面中最高级的标题。
h1~h6之间不要出现断层

一个语义良好的页面，h1~h6应该是完整有序而没有出现断层的
不要用h1~h6来定义样式

HTML关注的是结构(语义)，CSS关注的是样式，结构跟样式应该分离。
不要用div来代替h1~h6

div是无语义的标签，如果使用div来代替，后期维护比较困难，因为这种做法会让一个页面丢失大量的权重。

（2）图片语义化

在HTML中，使用img标签来表示图片。

alt属性和title属性

alt属性用于图片的描述，这个描述文字是给搜索引擎看的，当图片无法显示时，页面会显示akt中的文字。

title属性也用于图片描述，但这个描述文字是给用户看的。并且当鼠标指针移到图片上时，会显示title中的内容。

语法：

说明：

搜索引擎智慧查看HTML代码，通过img标签的alt属性或者页面上下文来判断图片的内容，因此，对于img标签，一定要添加alt属性，以便搜索引擎识别图片的内容。

**注意：**alt属性是img标签必须属性，一定要添加；title属性是img标签的可选属性，可加可不加。在实际开发中，对于img标签，要在alt属性中添加必要的描述信息。
figure元素和figcaption元素
```
<figure>	<img src = "" alt = ""/>    <figcaption></figcaption></figure>
```
figure元素用于包含图片和图注，figcaption元素用于表示图注文字，在实际开发中，对于"图片+图注"效果，都建议使用figure和figcaption这两个元素实现，从而使得页面的语义更加良好。

（3）表格语义化

在实际开发中，不建议使用表格布局，应该使用浮动布局或者定位布局。

font-weight属性值	说明
normal	默认值，正常体
lighter	较细
bold	较粗
bolder	很粗（效果跟bold差不多）

在表格汇总，常用的标签是table，tr和td这3个标签，但为了加强表格的语义化，W3C增加了5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”； caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。

表格标签

标签	说明
table	表格
caption	标题
thead	表头（语义划分）
tbody	表身（语义划分）
tfoot	表尾（语义划分）
tr	行
th	表头单元格
td	表格单元格

举例：

<!DOCTYPE html>
<head>
    <style type = "text/css">
    .body {
        font-family:"微软雅黑";
        font-size:14px;
        }
    </style>
</head>
<body>
    <div class = 'content'>
        <table>
            <caption>表格标题</caption>
            <thead>
                <tr>
                <th>表头单元格1</th>
                <th>表头单元格2</th>
                </tr>
                <tr>
            <td>标准单元格l</td>
            <td>标准单元格2</td> </tr>
            </tbody>
            <!--表脚-->
            <tfoot>
            <tr>
            <td>标准单元格l</td>
            <td>标准单元格2</td> </tr>
            </tfoot>
            </thead>
        </table>
    </div>
</body>

（4）表单语义化

表单跟表格是两个完全不一样的概念。

label标签

label标签用于显示在输入控件旁边的说明请文字，也就是将某个表单元素和某段说明文字关联起来。

语法：

说明性文字

label标签的for属性有两个作用：
1. 语义上绑定了label元素和表单元素。
2. 增强了鼠标可用性，也就是点击label中的文本时，其所关联的表单元素也会获得焦点。
举例：
```
<!DOCTYPE html><head>    <title></title></head><body>    <div>        <input id="Radio1" type="radio"/>单选框        <input id="Checkbox1" type="checkbox" />复选框    </div>    <hr />    <div>        <input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>        <input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>    </div></body></html>
```
点击第一组表单中，是能点击单选框，点击它旁边才能选中单选框，点击旁边的说明文字是不能选中的。在第二组表单中，可以点击单选框来选中单选框，并且点击它旁边的说明文字也可以选中单选框，对于复选框来说，效果一样。

for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。
fieldset标签和legend标签

语法：
```
<fieldset>	<legend>表单组标题</legend><fieldset>
```
说明：

使用fieldset和legend标签有两个作用：
1. 增强表单的语义。
2. 可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。

（5）其他语义化

换行符

br标签有自己特定的语义，不能随便用来实现换行效果。br标签仅仅英语段落中的换行，不能用于其他情况。
无序列表ul

在实际开发中，对于列表型的数据，为了实现良好的语义，更建议使用无序列表或者有序列表，不建议使用div等来实现。

举例：
```
<ul>    <li><span>l</span>HTML 教程 </li>    <li><span>2</span>CSS 教程 </li>    <li><Span>3</span>JavaScript 教程 </li> </ul>
```
strong标签和em标签

strong用于实现加粗文本，em用于实现斜体文本，一般不会使用。
del标签和ins标签

在HTML中，del和ins这两个标签是配合使用的。del表示"delete"，用于定义被删除的文本。ins表示"insert"，用于定义被更新的文本，一般情况下，会使用CSS来重新定义del和ins标签的样式。

举例：
```
<!DOCTYPE html><head>    <title></title></head><body>    <p>新鲜的新西兰奇异果</p>    <p><del>原价:￥6.50/kg</del></p>    <p><ins>现在仅售：￥4.00/kg</ins></p></body>
```
img标签

想要在页面显示一张图片，有两种方式：一是使用img标签，二是使用背景图片。区别在于：使用img标签添加图片，是通过HTML来实现；使用背景图片，是通过CSS来实现。

如果图片作为HTML的一部分，并且想要被搜索引擎识别，则应该使用img标签，例如常见的各种图片列表，如果图片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。

Seven_Stanko

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

HTML学习笔记一、HTML基础内容1. 基础总结对于前段开发，需要学会“HTML+CSS+JavaScript”；前端技术只能开发静态网页，进一步学习了后端技术，能开发一个用户交互性更好、功能更加强大的网站；后端记住有ASP.NET(或PHP)、SQL Server等；学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）；HTML基本结构：
复制链接

扫一扫