HTML学习笔记

最新推荐文章于 2025-12-29 22:13:27 发布

原创最新推荐文章于 2025-12-29 22:13:27 发布 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

front-end 专栏收录该内容

11 篇文章

订阅专栏

本文概述了浏览器内核Trident、Gecko、Webkit和Blink的区别，介绍了web标准的三层结构，详细解读了HTML骨架和特殊字符转义。此外，还讲解了Emmet语法、常用标签、表单元素、布局标签以及多媒体技术如audio和video的使用。

1.浏览器内核简介

含义

是渲染引擎（render engine）

种类

Trident
IE、360、猎豹等（注：Edge新内核为EdgeHTML）
Gecko
代码开源
Webkit
Safari、塞班、安卓、遨游等
Blink
Webkit升级版，Chrome、Opera等

2. web标准构成

将页面分成了三层：结构、样式、行为

结构：HTML
样式：CSS
行为：JS

3. HTML骨架

<html>
	<head>
		...
	</head>
	<body>
		...
	</body>
</html>

4. 特殊字符

字符	转义符	说明
		空格
<	<	小于号
>	>	大于号
&	&	与号
￥	&yen	人民币符号
©	©	版权
®	®	商标
℃	°	摄氏度
±	±	加减号
×	×	乘号
÷	÷	除号
²	²	平方
³	³	立方

5. Emmet语法

作用

用于快速生成标签

示例

div*2

<div>*用于生成多个相同元素</div>
<div>+生成兄弟元素，^生成父元素，()将元素分组</div>

div.test#id_001

<div id="id_001" class="test">.用于生成类，#用于生成id</div>

div[title=“标题” key=“value”]

<div title="标题" key="value">其他属性用[]生成</div>

div.class$*3

<div class="class1">$为占位符，用于实现编号</div>
<div class="class2"></div>
<div class="class3"></div>

div.class$@3*3

<div class="class3">@用于设置初始值</div>
<div class="class4"></div>
<div class="class5"></div>

div>ul>li*2>a[href="#"]{内容$}

<div> {}用于放置标签中的内容
    <ul>
        <li><a href="#">内容1</a></li>
        <li><a href="#">内容2</a></li>
    </ul>
</div>

table>caption{标题}+(thead{表头}>tr>th)+(tbody{表名}>tr>td2)+(tfoot{表脚}>tr>td2)

<table>
    <caption>标题</caption>
    <thead>表头
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>表名
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>表脚
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

6. 常用标签

h系列标签

h1 ~ h6：h1字体最大

块级元素，独占一行，常用于标题

p标签

独占一行，常用于包裹段落

段落之间存在默认间距

hr标签

水平线，是个单标签

br标签

强制换行，单标签

文本格式化系列标签

第一组（不含语义，不推荐使用）
加粗：
下划线：
倾斜：
删除：<s></s>
第二组（含语义，有强调作用，推荐）
加粗：
下划线：<ins></ins>
倾斜：
删除：<del></del>

img图片标签

src：图片存放路径
alt：当图片加载失败时显示的文字
title：当鼠标放置在图片上时显示的文字
width：图片宽(若只设置宽，则高会自动比例缩放)
height：图片高

a链接标签

作用
anchor，用于跳转到指定链接
属性

href：链接地址
target：链接跳转方式
_self：默认，当前窗口打开
_blank：新窗口打开
注意
a标签不能嵌套a标签
定位功能
a标签可以快速定位到当前页面或者其他页面的目标内容
做法：给目标标签加上id属性
猫
<a href="#mao">捉猫</a>和p标签相同页面时
<a href="其他页面路径.html#mao">捉猫</a>和p标签不同页面时
其他用法
点击不跳转
<a href="#">#一般在项目中起到占位的作用</a>
下载文件
<a href="test.zip">当href的路径执行一个浏览器无法打开的文件时，浏览器会默认进行下载，如zip文件</a>

base标签

作用
对页面上所有链接（包括src、href等所有url）进行统一设置，如配置默认的url和默认target，是一个单标签
注意与示例
一个html标签中只能有一个base标签，且只能放在head标签中，另外使用了base标签的链接后，其他链接必须在base标签的链接里面，不然将无法找到
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <base href="./static/" target="_blank"/>
</head>
<body>
 base标签如果表示一个目录需要在后面加个/
 img标签的src的完整地址为：./static/test.png
 <img src="test.png" alt="load img failed" title="image"/>
</body>
</html>

结构标签

!DOCTYPE文档类型标签

作用
用于指定浏览器使用何种规范来解析当前页面
常用规范
html：html5规范
html PUBLIC：xhtml规范

html标签

lang属性
用于设置当前页面的语言，注意的是，如lang="en"并不是告诉浏览器这是纯英文，只是说以英文为主，从而有助于提高浏览器的渲染性能

head标签

meta子标签
用于表述当前页面的元信息，即网页自身的相关信息，如设置编码、设置视口等
title子标签
title在SEO中占有很大的权重，比h1标签的比重还大，如百度浏览器，当搜索内容时，会先将最符合的title对应的页面放在最前面。

列表系列标签

无序列表
<ul>
 <li></li>
 <li></li>
</ul>
注意

ul标签中只能放li标签
li标签相当于一个容器，里面可以放置其他的任意标签

type属性

不填：默认为黑色圆点
circle：空心圆点
square：黑色的方框

有序列表
<ol>
 <li></li>
 <li></li>
</ol>
type属性
1(默认)、A、a、I、i
reversed属性
是否倒序
start属性
对应type属性所设置的一个初始值

自定义列表
<dl>
 <dt>标题</dt>
 <dd>项目</dd>
</dl>

表格系列标签

<table>
    <caption>标题</caption>
    <thead>表头
        <tr>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>表名
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>表脚
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

table标签属性

border：边框厚度
cellpadding：文字与边框距离
cellspacing：表格内框的距离，即两个单元格之间的距离
frame：设置外边框的可见性
void：不显示外边框
above：显示上边框
below：显示下边框
hsides：显示上下边框
vsides：显示左右边框
lhs：显示左边框
rhs：显示右边框
box：显示所有外边框

rules：设置内边框的可见性
none：没有线条
groups：显示行和列之间的组合线条
rows：显示行线条
cols：显示列线条
all：显示所有线条

summary：表格摘要，不会显示于页面
width：表格的宽度
像素：指该表格总宽度像素
百分比：指该表格总宽度占页面总宽的比例，如100%

tr标签属性

align：设置对齐方式
right：右对齐
left：左对齐
center：中间对齐，默认
justify：对行进行伸展
char：将内容对准指定字符

char：根据哪个字符来进行文本对齐
charoff：规定第一个对齐字符的偏移量
valign：垂直方向对齐方式
top：上部
bottom：下部
middle：中间，默认
baseline：与基线对齐

td标签属性

colspan：设置合并的列数
rowspan：设置合并的行数
align、valign、char、charoff
headers：规定单元格相关的表头
scope：定义将表头数据和单元数据相关联的方法
col：规定单元格是列的表头
colgroup：规定单元格是列组的表头
row：规定单元格是行的表头
rowgroup：规定单元格是行组的表头

表单系列标签

<form action="#">
    文本框：<input type="text" placeholder="请输入用户名" maxlength="5" name="user" value=""/><br/>
    密码框：<input type="password" maxlength="20" name="password" value="" autofocus><br/>
    单选框：<br/>
    单选一<input type="radio" name="单选框" value="单选一"><br/>
    单选二<input type="radio" name="单选框" value="单选二"><br/>
    单选三<input type="radio" name="单选框" value="单选三"><br/>
    多选框 + label：<br/>
    多选一<input type="checkbox" name="多选框" value="多选一" checked><br/>
    <label for="option2">多选二</label><input id="option2" type="checkbox" name="多选框" value="多选二"><br/>
    <label>多选三<input type="checkbox" name="多选框" value="多选三" checked></label><br/>
    文件上传框：<input type="file" multiple accept="text/html"><br/>
    链接选择框：<br/>
    <input type="url" name="link" list="urls">
    <datalist id="urls">
        <option label="百度" value="http://www.baidu.com"/>
        <option label="虎牙" value="http://www.huya.com"/>
    </datalist>
    <br/>
    本地时间：<input type="datetime-local"><br/>
    重置表单：<input type="reset" value="重置表单"><br/>
    提交表单：<input type="submit" value="提交"><br/>
    普通按钮：<input type="button" value="按钮"><br/>
    图片提交按钮：<input type="image" src="static/test.png" alt="图片已损坏"><br/>
    隐藏域：<input type="hidden" name="隐藏项"><br/>
    下拉菜单：
    <select name="下拉菜单">
        <option value="选项一">选项一</option>
        <option value="选项二">选项二</option>
        <option value="选项三" selected>选项二</option>
    </select>
    <br/>
    文本域：<br/>
    <textarea name="文本域" rows="5" cols="20">请输入...</textarea><br/>
</form>

form标签：表单最外围标签，包裹其他表单相关标签

action：表单提交数据的目标地址
method：提交数据的请求方式，如post

input标签：各种输入框

文本框：type=“text”(不输入/输入错误时的默认值)
value：用于接收用户输入数据，提交时会发送给后台
name：发送给后台的数据(value)的key，即name=value
maxlength：设置用户可输入的最大字符长度

密码框：type=“password”
value
name
maxlength

单选框：type=“radio”
name：发送个后台数据的key，相同name属性值的单选框为一组，一组中同时只能有一个被选中

多选框：type=“checkbox”
name：相同name属性的多选框为一组
value
checked：是否默认选中，一组中可以设置多个
数据形成格式为：name=value1&name=value2...

文件上传框：type=“file”
multiple：是否多文件上传
accept：设置可选的文件类型

链接：type=“url”
list：预置的url列表，搭配***datalist标签***一起使用
name

本地时间：type=“datetime-local”
h5新增的标签
value：用于接收选择的时间，“2019-03-08T02:55”，注意不要漏了T

重置按钮：type=“reset”
用于是表单恢复初始状态
需要手动进行按钮点击，效果同dom对象的reset方法：document.qs("#form").reset();

表单提交按钮：type=“submit”
value：设置表单框中显示的文字

普通按钮：type=“button”
默认没有任何效果，通常用于配合js使用

图片按钮：type=“image”
效果同提交按钮，不过按钮显示的是一张图片
src、alt

隐藏域：type=“hidden”
页面不显示该表单，但是要注意的是，用户依旧可以通过控制台来查看和修改

select标签：下拉菜单

select标签 - name属性：作为发送给后台数据的key
option标签 - value属性：被选中的option，将作为发送个后台数据的value
option标签 - selected属性：是否默认被选中

textarea标签：文本域

cols：文本区内的可见宽度
rows：文本区内的可见高度
文本域默认可以自由伸缩

label标签

作用
让文本和表单元素绑定到一起，如实现多选时点击文字也能生效功能
使用
方式一（推荐）

用label标签将文字包裹
在表单标签上添加一个id属性
在label的for属性中写上id属性值
方式二
直接用label标签将文字和表单标签一齐包裹
此时必须删除for属性

h5新增的表单属性

placeholder：占位符，区别value属性，可用于如文本框的预置值
autofocus：自动获取焦点
multiple：多文件上传

布局系列标签

没有语义的布局标签

div盒子标签
块级元素，width由屏幕宽度决定，height自适应（由内容撑开）
span标签
行内元素，width、height都由内容决定，即由内容撑开

h5新增的有语义的布局标签

header头部标签
定义网页的头部，相当于头部语义+div
nav导航标签
定义网页的导航栏，相当于导航语义+div
footer底部标签
定义网页的底部，相当于底部语义+div
aside侧边标签
定义网页的侧边栏，相当于侧边语义+div
section区块标签
定义网页的区块，相当于区块语义+div
article文章标签
定义网页的文章，相当于文章语义+div

多媒体系列标签

audio音频标签
说明
h5新增标签，用于在网页上播放音频
属性
src：音频文件存放路径
controls：播放音频的控件，必须有
autoplay：是否自动播放，chrome暂不支持
loop：是否循环播放，有兼容性问题
示例 + 兼容性处理
<audio controls>
 <source src="../test.mp3">
 <a href="浏览器下载地址">浏览器不兼容，点击下载兼容版本(当不兼容时才会出现此提示)</a>
</audio>