基础标签
h1~h6 标题标签
p 段落标签
a 标签
<a href="https://www.baidu.com"></a>
HTML元素汇总:
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element
- 双标签元素
html、body、head、h2、p、a元素；
-
单标签元素
br、img、hr、meta、input；
其他常见标签元素
文档类型声明
<!DOCTYPE html>
HTML文档声明，告诉浏览器当前页面是HTML5页面；
HTM4.0 和XHTML1.0
18c8185865c.png
html元素
-
<html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素
-
所有其他元素必须是此元素的后代
lang=“en”表示这个HTML文档的语言是英文；
lang=“zh-CN”表示这个HTML文档的语言是中文；
head元素
-
head 元素 规定文档相关的配置信息（也称之为元数据）
-
head常见配置
网页标题
<title>我的网页</title>网页编码
<meta charset="UTF-8">
body元素
body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。
大部分HTML元素都是在body中编写
<body>
<p>这是一条段落</p>
</body>
常用元素
- p元素、h元素；
- img元素、a元素、iframe元素；
- div元素、span元素；
- ul、ol、li元素；
- button元素、input元素；
- table、thead、tbody、thead、th、tr、td；
img元素
两种方式添加图片,一种绝对路径,一种相对路径
<img src="C:\Users\Administrator\Desktop\code\images\diqiu.jpg" alt="">
<img src="./images/diqiu.jpg" alt="">
a元素
两个属性:
href：Hypertext Reference的简称
✓ 指定要打开的URL地址；
✓ 也可以是一个本地地址；
target：该属性指定在何处显示链接的资源。
✓ _self：默认值，在当前窗口打开URL；
✓ _blank：在一个新的窗口中打开URL；
- 也可以跳转到指定的id属性上面
<a href="#one">跳转到第一段</a>
<a href="#two">跳转到第二段</a>
<a href="#three">跳转到第三段</a>
<p id="one">这是第一条段落</p>
<p id="two">这是第二条段落</p>
<p id="three">这是第三条段落</p>
-
图片链接
img元素跟a元素一起使用，可以实现图片链接；
<a href="https://www.baidu.com">
<img src="./images/diqiu.jpg" alt="跳转百度">
</a>
- 其他跳转
- 下载文件
- 发送邮件
<a href="https://t1.daumcdn.net/potplayer/PotPlayer/Version/Latest/PotPlayerSetup64.exe">下载文件</a>
<a href="mailto:123456@qq.com">发送邮件</a>
a元素target的其他值:
-
_parent：在父窗口中打开URL
-
_top：在顶层窗口中打开URL
(当有多层iframe嵌套时效果明显)
iframe元素
利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
-
frameborder属性
用于规定是否显示边框
✓ 1：显示
✓ 0：不显示
特殊元素
div元素：division，分开、分配的意思；
span元素：跨域、涵盖的意思；
- div元素：多个div元素包裹的内容会在不同的行显示；默认独占一行
✓ 一般作为其他元素的父容器，把其他元素包住，代表一个整体
✓ 用于把网页分割为多个独立的部分
-
span元素：多个span元素包裹的内容会在同一行显示；
✓ 默认情况下，跟普通文本几乎没差别
✓ 用于区分特殊文本和普通文本，比如用来显示一些关键字
不常用元素
strong元素：内容加粗、强调；
i元素：内容倾斜；
code元素：用于显示代码,偶尔会使用用来显示等宽字体
br元素：换行元素
全局属性
- id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
- class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；
- style：给元素添加内联样式；
- title：包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户，但不是必须的。
额外补充
常见的字符实体
18c81b635fc.png
SEO相关过程
搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式
18c81a65b17.png
link元素
◼ link元素是外部资源链接元素，规范了文档与外部资源的关系
- link元素通常是在head元素中
◼ 最常用的链接是样式表（CSS）；
- 此外也可以被用来创建站点图标（比如 “favicon” 图标）；
◼ link元素常见的属性：
- href：此属性指定被链接资源的URL。 URL 可以是绝对的，也可以是相对的
- rel：指定链接类型，常见的链接类型：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
- icon：站点图标；
- stylesheet：CSS样式；
颜色的表示方法
◼ RGB颜色可以通过以#为前缀的十六进制字符和函数（rgb()、rgba()）标记表示。
◼ 方式一：十六进制符号：#RRGGBB[AA]
-
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；A是可选的。
✓ 比如，#ff0000等价于#ff0000ff；
◼ 方式二：十六进制符号：#RGB[A]
-
R（红）、G（绿）、B （蓝）和A （alpha）是十六进制字符（0–9、A–F）；
-
三位数符号（#RGB）是六位数形式（#RRGGBB）的减缩版。
✓ 比如，#f09和#ff0099表示同一颜色。 -
四位数符号（#RGBA）是八位数形式（#RRGGBBAA）的减缩版。
✓ 比如，#0f38和#00ff3388表示相同颜色。
◼ 方式三：函数符： rgb[a](R, G, B[, A])
- R（红）、G（绿）、B （蓝）可以是<number>（数字），或者<percentage>（百分比），255相当于100%。
- A（alpha）可以是0到1之间的数字，或者百分比，数字1相当于100%（完全不透明）。
Chrome浏览器开发者工具
◼ 其他技巧：
- 快捷键：ctrl+ 可以调整页面或者调试工具的字体大小；
- 可以通过删除某些元素来查看网页结构;
- 可以通过增删css来调试网页样式;
网友评论