HTML学习笔记

48次阅读

共计 5929 个字符，预计需要花费 15 分钟才能阅读完成。

浏览器内核（Rendering Engine）

负责读取网页内容，整理讯息，计算页面显示方式并显示页面

浏览器 内核 备注
IE Trident IE、猎豹安全、360 极速浏览器、百度浏览器
Firefox Gecko —
Safari WebKit —
Chrome Chromium/Blink Blink 是 WebKit 的分支，Chromium 项目中研发 Blink 渲染引擎（浏览器核心），内置于 Chrome 浏览器中，大部分国产浏览器最新版采用 Blink 内核，二次开发
Opera Blink —

Android，使用最高频率的是 WebKit 内核；ios，大部分自带浏览器内核，一般是 Safari 或者 Trident

WEB 标准

构成

主要包括结构（structure）、表现（presentation）和行为（behavior）三个方面

标准 说明
结构 结构用于对 网页元素 进行整理和分类
表现 表现用于设置网页元素的版式、颜色和大小等 外观样式
行为 行为是指网页模型的定义以及 交互 的编写

HTML

HTML 指的是超文本标记语言（Hyper Text Markup Language）
HTML 不是一种编程语言，而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）

HTML 骨架标签

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>
标签名 定义 说明
<html></html> HTML 标签 页面中最大的标签，根标签
<head></head> 文档的头部 在 head 标签中必须设置的标签是 title
<title></title> 文档的标题 让页面拥有一个属于自己的网页标题
<body></body> 文档的主体 元素包含文档的所有内容，页面内容基本都是放到 body 里面

HTML 元素标签

1、常规元素（双标签）

< 标签名 > 内容 </ 标签名 >

“< 标签名 >” 表示该标签的作用开始，一般称为 ” 开始标签 ”,”</ 标签名 >” 表示该标签的作用结束，一般称为 ” 结束标签 ”

2、空元素（单标签）

< 标签名 />

空元素用单标签来表示，不包含内容

HTML 标签关系

1、嵌套关系

<head>
    <title> </title>
</head>

2、并列关系

<head></head>
<body></body>

文档类型

<!DOCTYPE html>

<!DOCTYPE> 声明位于文档中最前面位置，处于 <html> 标签之前，告知浏览器文档使用哪种 HTML 或 XHTML 规范

页面语言 lang

<html lang="en">

指定 html 语言类型
最常见两种语言：
1、en 定义语言为英语
2、zh-CN 定义语言为中文

字符集

<meta charset="utf-8">

多个字符的集合，计算机要准确处理各种字符集文字，需要进行字符编码，使计算机能识别和存储各种文字
常用字符集：
GB2312：简单中文，包括 6763 个汉字
BIG5：繁体中文，港澳台等使用
GBK：包含全部中文字符，是 GB2312 的扩展，加入繁体字的支持，兼容 GB2312
UTF-8：基本包含全世界所有国家需要用到的字符

HTML 标签的语义化

标签的含义，方便代码阅读和维护，让浏览器或网络爬虫可以很好解析，从而更好分析其中内容，具有更好的搜索引擎优化

HTML 常用标签

排版标签

标题标签 h
单词缩写：head 头部
提供了六个等级，作为标题使用，并且根据重要性递减
基本语法格式为：

<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>

段落标签
单词缩写：paragraph 段落
把 HTML 文档分割为若干段落，把文字有条理的显示出来

<p> 文本内容 </p>

默认情况下，文本在一个段落中会根据浏览器窗口大小自动换行
水平线标签
单词缩写：horizontal 横线
将段落与段落之间隔开，使文档结构清晰，层次分明，可通过插入图片实现，也可以简单通过变迁来完成

<hr />

换行标签
单词缩写：break 打断
强制某行文本换行显示

<br />

**div 和 span 标签
div：division 的缩写，表示分割、区分的意思
span：跨度、跨距；范围

<div> 这是头部 </div>
<span> 今日价格 </span>

两个都是盒子，用来装页面元素
div 标签用来装布局，在一行只能放一个 div
span 标签用来布局，一行可以放多个 span

文本格式化标签

标签 显示效果
文本以 粗体 方式显示（XHTML 推荐使用 strong）
文本以 斜体 方式显示（XHTML 推荐使用 em）
文本以 加删除线 方式显示（XHTML 推荐使用 del）
<u></u> 和 <ins></ins> 文本以 加下划线 方式显示（XHTML 不赞成使用 u）

标签属性

属性就是 外在特性

< 标签名 属性 1 ="属性值 1" 属性 2 ="属性值 2" ...> 内容 </ 标签名 >

图像标签

单词缩写：image 图像

<img src="图像 URL" />

src 属性用于指定图像文件的路径和文件名，是 img 标签的必要属性
<img /> 标记属性

属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素（XHTML 不支持 % 页面百分比） 设置图像的宽度
height 像素（XHTML 不支持 % 页面百分比） 设置图像的高度
border 数字 设置图像边框的宽度

标签可以有多个属性，必须写在开始标签中，位于标签名后面，属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开，采取键值对的格式 key=”value” 的格式

链接标签

单词缩写：anchor 锚

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性 作用
href 用于锁定链接目标的地址，（必须属性）当为标签应用 href 属性时，它就具有了超链接的功能
target 用于锁定链接页面的打开方式，其取值有 self 和 blank 两种，其中 self 为默认值，_blank 为在新窗口中打开方式

外部链接需要添加 http://
内部链接只截链接内部页面名称即可
如果当时没有确定链接目标时，通常将链接标签的 href 属性值定义为 ”#”（即 href=”#”），表示该链接暂时为一个空链接
不仅可以创建文本超链接，在页面各种网页元素等都可以添加超链接

注释标签

在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字

<!-- 注释语句 -->

快捷键是：ctrl + / 或者 ctrl + shift + /

路径

可分为相对路径和绝对路径

目录文件夹

存放了页面所需相关素材

根目录

目录文件夹的第一层

相对路径

以引用文件之网页所在位置为参考基础，建立出目标路径，保存于不同目录的网页引用同一个文件时，所使用的路径不相同

路径分类 符号 说明
同一级路径 只需输入图像文件名称即可
下一级路径 “/” 图片文件位于 HTML 文件同级文件夹下
上一级路径 “../” 在文件名之前加入 ”../”，如果是上两级，则需要使用 ”../../”

绝对路径

以 Web 站点根目录为参考基础的目录路径，指的是当所有网页引用同一个文件时，所使用的路径是一样的，符号是 ”” 而不是 ”/”

锚点定位

通过创建锚点链接，快速定位到目标内容
1、使用相应 id 名标注跳转目标的位置（找目标）

<h3 id="two"> 第 2 集 </h3>

2、使用 链接文本 创建链接文本（被点击的）（拉关系）

<a href="#two">

base 标签

<base target="_blabk">

base 可以设置整体链接的打开状态，base 写到 <head></head> 之间，把所有的链接都默认添加 target=”_blank”

预格式化文本 pre 标签

<pre>
    此例演示如何使用 pre 标签
    对空行和空格
    进行控制
</pre>

被包围在 <pre> 标签元素中的文本通常会保留空格和换行符，文本也会呈现为等宽字体，标签中的文字会按照书写的模式显示，不需要段落和换行标签，但比较少用，因为不好整体控制

特殊字符

特殊字符 描述 字符
空格符
< 小于号
> 大于号
& 和号
￥ 人民币
© 版权
® 注册商标
° 摄氏度
± 正负号
× 乘号
÷ 除号
² 平方 2（上标 2）
³ 立方 3（上标 3）

表格 table

常见显示、展示表格式数据，特别是后台展示数据的时候表格运用是否熟练显得很重要

创建表格

<table>
    <tr>
        <td> 单元格内的文字 </td>
        ...
    </tr>
    ...
</table>

table 用于定义一个表格标签，tr 标签用于定义表格中的行，必须嵌套在 table 标签中，td 用于定义表格中的单元格，必须嵌套在 <tr></tr> 标签中，字母 td 指的是表格数据，即数据单元格的内容
表格的主要目的的显示特殊数据

表格属性

属性名 含义 常用属性值
border 设置表格的边框（默认 border=”0″ 无边框） 像素值
cellspacing 设置单元格与单元格边框之间的空白间距 像素值（默认为 2 像素）
cellpadding 设置单元格内容与单元格边框之间的空白间距 像素值（默认为 1 的像素）
width 设置表格的宽度 像素值
height 设置表格的高度 像素值
align 设置表格在网页中的水平对齐方式 left、center、right

表头单元格标签 th

一般表头单元格位于表格的第一行或第一列，并且文本加粗居中，只需用表头标签 <th></th> 代替相应的 <td></td> 即可

表格标题 caption

<table>
    <captain> 表格标题 </caption>
</table>

captain 元素定义表格标题，通常这个标题会被居中且显示于表格之上，标签必须紧随 table 标签之后，只存在表格里才有意义

合并单元格

跨行合并：rowspan=” 合并单元格的个数 ”
跨列合并：colspan=” 合并单元格的个数 ”
合并顺序：先上后下、先左后右
合并三部曲：
1、确定跨行还是跨列
2、根据合并顺序找到目标单元格，然后写上合并方式还有要合并的单元格数量
3、删除多余单元格

表格划分结构

题头、正文和脚注，分别用：thead、tbody 和 tfoot 来标注

列表标签

容器里面装载着结构，样式一致的文字或图标的一种形式，叫列表，列表最大的特点就是整齐、整洁、有序，跟表格类似，可组合自由度更高

无序列表 ul

各个列表项之间没有顺序级别之分，是并列的

<ul>
    <li> 列表项 1 </li>
    <li> 列表项 2 </li>
    <li> 列表项 3 </li>
    ......
</ul>

<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 标签中输入其他标签或文字的做法是不被允许的，<li> 与 </li> 之间相当于一个容器，可以容纳所有元素，无序列表会带有自己样式属性

有序列表 ol

有排列顺序的列表，各个列表项按照一定的顺序排列定义

<ol>
    <li> 列表项 1 </li>
    <li> 列表项 2 </li>
    <li> 列表项 3 </li>
    ......
</ol>

所有特性基本与 ul 一致，但实际中比无序列表用的少很多

自定义列表

常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>
    <dt> 名词 1 </dt>
    <dd> 名词 1 解释 1 </dd>
    <dd> 名词 1 解释 2 </dd>
    ...
    <dt> 名词 2 </dt>
    <dd> 名词 2 解释 1 </dd>
    <dd> 名词 2 解释 2 </dd>
    ...
</dl>

表单标签

目的为了收集用户信息
通常由表单控件（也称为表单元素）、提示信息和表单域 3 个部分构成
表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的 url 地址，以及数据提交到服务器的方法，如果不定义表单域，表单中的数据无法传送到后台服务器

表单标签

input 控件

<input type="属性值" value="你好" />

input 是输入的意思
<input /> 标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型
除了 type 属性还有别的属性
常用属性：

属性 属性值 描述
text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
type button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name 由用户自定义 控件的名称
value 由用户自定义 input 控件中的默认文本值
size 正整数 input 控件在页面中的显示宽度
checked checked 定义选择控件默认被选中的项
maxlength 正整数 控件允许输入的最多字符数

type 属性通过改变值，决定属于哪种 input 表单
value 是 input 默认的初始值
后台可通过 name 属性找到表单，如果是一组，必须给他们命名相同的名字 name，可以实现多个选其中一个
label 标签
为了提高用户体验，为 input 元素定义标注（标签），用于绑定一个表单元素，当点击 label 标签的时候，被绑定的表单元素就会获得输入焦点
绑定元素方法：
1、用 label 只截包括 input 表单

<label> 用户名：<input type="radio" name="usename" value="请输入用户名" /> </label>

适用于单个表单选择
2、for 属性规定 label 与哪个表单元素绑定

<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />

textarea 控件（文本域）

<textarea>
文本内容
</textarea>

通过 textarea 控件可以轻松创建多行文本输入框
文本框和文本域区别

表单 名称 区别 默认值显示 用于场景
input type=”text” 文本框 只能显示一行文本 单标签，通过 value 显示默认值 用户名、昵称、密码等
textarea 文本域 可以显示多行文本 双标签，默认值写到标签中间 留言板

select 下拉列表

<select>
    <option> 选项 1 </option>
    <option> 选项 2 </option>
    <option> 选项 3 </option>
    ...
</select>

select 中至少包含一对 option
在 option 中定义 selected=”selected” 时，当前项即为默认选中项

form 表单域

form 标签被用于定义表单域，实现用户信息的收集和传递，form 中所有内容都会被提交给服务器

<form action="url 地址" method="提交方式" name="表单名称">
各种表单控件
</form>

常用属性：

属性 属性值 作用
action url 地址 用于指定接收并处理表单数据的服务器程序的 url 地址
method get/post 用于设置表单数据的提交方式，其取值为 get 或 post
name 名称 用于指定表单的名称，以区分同一个页面中的多个表单

每个表单都应该有自己的表单域，但 ajax 后台交互的时候，必须需要 form 表单域

正文完
html
发表至： html
2020-06-03
 0
关于html:聚光加载
关于html:HTML标签之表单标签
关于html:HTML语义化一图以蔽之
关于html:Python基础之数据类型和变量