目录
一、符号实体:
在网页中编写多个空格默认情况会自动被浏览器解析为一个空格,在HTML中有些时候,我们需要写一些特殊符号。
比如我们需要:多个连续的空格,比如字母符号的大于和小于号。如果我们需要在网页中写这些特殊符号则需要使用HTML中的实体(转义字符)
实体语法:是以&开头;(分号)结尾:
空格
> 大于号
< 小于号
© 版权符号
HTML符号实体参考手册:
二、HTML头部:
1.HEAD 标签:
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。
2.META标签:
<meta>元素描述了一些基本的元数据。<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
<meta> 一般放置于 <head> 区域
HTML 头部 | 菜鸟教程HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <base> - 定义了所有链接的URL 使用 <base> 定义页面中所有链接默认的链接目标地址。 <meta> - 提供了HT..https://www.runoob.com/html/html-head.html META中声明的元素对于浏览器客户端是不可见的,也就是用户访问页面时无法直观看到META标签中的设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
<meta http-equiv="refresh" content="3;url=https"//www.baidu.com">
将页面重定向到另一个网站
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="HTML5学习记录">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个学习HTML记录的HTML页面!">
<!--
meta 主要用于设置网页中的一些元数据,元数据不是给用户看的
charset 指定网页的字符集
name 指定数据的名称
keywords关键字
description网站描述
content 指定数据的内容
title 内容会作为搜索结果的链接上的文字显示
-->
<title>HTML学习页面</title>
</head>
<body>
<!--
在网页中编写多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候,我们需要写一些特殊符号:
比如我们需要:多个连续的空格,比如字母符号的大于和小于号
如果我们需要在网页中写这些特殊符号则需要使用HTML中的实体(转义字符)
实体语法:
是以&开头;(分号)结尾:
空格
> 大于号
< 小于号
© 版权符号
-->
</body>
</html>
三、语义化标签元素:
- 在页面中独占一行的元素称为块元素(block element)。
- 在页面中不会独占一行的元素称为行内元素,内联元素(inline element)。
HTML 标签列表(字母排序) | 菜鸟教程 (runoob.com)https://www.runoob.com/tags/html-reference.html
1.语义标签:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML学习页面</title>
</head>
<body>
<!--
hgroup标签用来为标题分组,可以将一组相关的标题同时放到hgroup
-->
<hgroup>
<h1>一级标题</h1>
<h2>二级标题</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p标签定义的是一个块元素!
-->
<p>
这是定义在段落标签中的一个段落
</p>
<!--
em标签:用于表示语音语调的加重
strong标签:表示强调重要内容,粗体表示
blockquote标签:表示一个长引用。(块元素)
q标签:表示一个短引用。(行内元素)
-->
</body>
</html>
2.块和行内元素:
通过使用块元素(block element)对页面进行布局,行内元素(inline element)一般进行修饰。一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素。
p元素中不能放任何元素!
3.布局标签:
结构化语义标签
HTML5 语义元素 | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html5-semantic-elements.html
- header:表示网页头部
- main:表示网页主体部分,一个页面只有一个main
- footer:表示网页底部
4.列表标签:
HTML 支持有序、无序和定义列表:HTML 列表 | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html-lists.html
- 无序列表
- 有序列表
- 自定义列表:自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
5.超链接标签:
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
使用href属性,指定跳转路径或者内部页面。
使用 target 属性,你可以定义被链接的文档在何处显示。
HTML 链接 | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html-links.html 锚点链接:使用 target 属性和id属性,你可以定义被链接的文档在何处显示。超链接中可以使用#进行占位,默认跳转到当前页面顶部;也可以使用javascript:;进行占位,点击超链接不会发生任何操作!
a标签属性:
HTML https://www.runoob.com/tags/tag-a.html部分H5属性:
6.相对路径&绝对路径:
相对路径是指目标相对于当前文件的路径,网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法,其表示的意义不尽相同。表示方法如下:
- ./ :代表文件所在的目录(可以省略不写)
- ../ :代表文件所在的父级目录(上一级目录)
- ../../ :代表文件所在的父级目录的父级目录(上上一级目录)
- / :代表文件所在的根目录
绝对路径是指完整的网址,假设图一中项目的网站域名为www.test.com,那么000.css的绝对路径应该是:https://www.test.com/HelloHBuilder/html/css/css1/000.css。
7.图片标签:
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。
src 指 "source"。源属性的值是图像的 URL 地址。
alt属性:用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当页面中的图片无法正常加载时,alt属性中定义的文本会替换图片进行展示;浏览器会根据alt属性中的文本对图片进行定义。
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度,页面加载时就会保留指定的尺寸(保证图片等比例缩放)。如果没有指定图片的大小,加载页面时有可能会破坏HTML页面的整体布局。
HTML 图像 | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html-images.html
img标签属性:
HTML 标签 | 菜鸟教程 (runoob.com)https://www.runoob.com/tags/tag-img.html
图片格式:
- jpeg(jpg):支持的颜色比较丰富,不支持透明效果,不支持动图。
- gif:支持颜色少,支持简单透明度,支持动图。
- png:支持颜色丰富,支持复杂透明度,不支持动图。
- webp:这是谷歌退出的专门为网页图片而生的格式,拥有以上格式所有优点,文件小。缺点在于目前适配少!
- base64:将图片进行base64编码,这样可以将图片转换为字符,通过引入字符的方式引入图片。一般适用于需要图片和页面一起加载的情况!
8.内联框架:
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
HTML 框架 | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html-iframes.html内联框架语法:
<iframe src="URL"></iframe>
- height 和 width 属性用来定义iframe标签的高度与宽度。属性默认以像素为单位。
-
frameborder 属性用于定义iframe表示是否显示边框。设置属性值为 "0" 移除iframe的边框。
iframe属性:
HTML <iframe> 标签 | 菜鸟教程 (runoob.com)
9.音频标签:
HTML5 提供了播放音频文件的标准:
HTML5 Audio(音频) | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html5-audio.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML学习页面</title>
</head>
<body>
<!--
audio标签:
用来向页面中引入一个外部的音频文件,音频文件引入时,默认情况是不允许用户进行控制
属性:
controls 是否允许用户控制播放
autoplay 音频文件在打开页面时,是否自定播放(由于适配问题部分浏览器不会自动播放)
-->
<audio src="./media/就算你活在二次元.mp3" controls></audio>
</body>
</html>
audio标签属性:
HTML 标签 | 菜鸟教程 (runoob.com)https://www.runoob.com/tags/tag-audio.htmlH5提供的标签:
source标签:
HTML <source> 标签 | 菜鸟教程 (runoob.com)
带有两个源文件的音频播放器。浏览器需要选择它所支持的源文件(如果都支持则任选一个)
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
HTML 全局属性 | 菜鸟教程 (runoob.com)https://www.runoob.com/tags/ref-standardattributes.html
10.视频标签:
HTML5 提供了展示视频的标准。
HTML5 Video(视频) | 菜鸟教程 (runoob.com)https://www.runoob.com/html/html5-video.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML学习页面</title>
</head>
<body>
<!--
使用video标签引入视频文件到页面中
-->
<video src="./media/demo.mp4" width="1000px" controls></video>
</body>
</html>