1.HTML核心

最新推荐文章于 2023-05-07 13:37:49 发布

ownclock~

最新推荐文章于 2023-05-07 13:37:49 发布

阅读量356

点赞数

分类专栏： HTML/CSS 文章标签： html

本文链接：https://blog.csdn.net/weixin_44756776/article/details/108434273

版权

HTML/CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

基本知识

第一个网页

Emmet插件：自动生成HTML代码片段

注释

注释为代码的阅读者提供帮助，注释不参与运行

在HTML中，注释使用如下格式书写：

<!-- 注释内容 -->

元素

其他叫法：标签、标记

<a href="http://www.duyiedu.com" title="黑龙江渡一教育有限公司">渡一教育</a>
<title>Document</title>

整体：element （元素）

元素 = 起始标记（begin tag） + 结束标记（end tag） + 元素内容 + 元素属性

属性 = 属性名 + 属性值

属性的分类：

局部属性：某些元素特有的属性
全局属性：所有元素通用

<meta charset="UTF-8">

有些元素没有结束标记，这样的元素叫做：空元素

空元素的两种写法：

<meta charset="UTF-8">
<meta charset="UTF-8" />

元素的嵌套

元素不能相互嵌套

父元素、子元素、祖先元素、后代元素、兄弟元素（拥有同一个父元素的两个元素）

标准的文档结构

HTML：页面、HTML文档

<!DOCTYPE html>

文档声明，告诉浏览器，当前文档使用的HTML标准是HTML5。

不写文档声明，将导致浏览器进入怪异渲染模式。

<html lang="en">
    <!--以前的写法 中文:lang = "zh-CN" -->
    <!-- 现在的写法,中文:lang = "cmn-hans" -->
</html>

根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。

HTML5版本中没有强制要求书写该元素

lang属性：language，全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

<head>

</head>

文档头，文档头内部的内容，不会显示到页面上。

<meta>

文档的元数据：附加信息。

charset：指定网页内容编码。

计算机中，低电平（0~2 V）0，高电平（2~5 V）1，如果想表示2，使用10

计算机中，只能存储数字

文字和数字进行对应

比如：a —— 97， A —— 64

该字典叫做字符编码表，大陆使用的是GB2312，台湾使用的是GBK

袁 —— GB2312 —— 100000(假设) —— GBK —— ？？(可能会导致乱码)

UTF-8 是 Unicode 编码的一个版本

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 适配手机端 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--  如果浏览器是IE,建议使用edge内核-->

<title>Document</title>

网页标题

<body>
</body>

文档体，页面上所有要参与显示的元素，都应该放置到文档体中。

语义化

语义化

什么是语义化

每一个HTML元素都有具体的含义

a元素：超链接
p元素：段落
h1元素：一级标题

所有元素与展示效果无关

元素展示到页面中的效果，应该由CSS决定。

因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。

重要：选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？

为了搜索引擎优化（SEO）

搜索引擎：百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

为了让浏览器理解网页

阅读模式、语音模式

文本元素

文本元素

HTML5中支持的元素：HTML5元素周期表

h

标题：head

h1-h6：表示1级标题~6级标题

p

段落，paragraphs

lorem，乱数假文，没有任何实际含义的文字

span【无语义】

没有语义，仅用于设置样式

以前：某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素）因为行级和块级代表的含义是展示效果，而前面说了展示效果只由CSS决定(也就是语义化的问题才删除了这两种说法);

到了HTML5，已经弃用这种说法.在HTML5里面，这种区别被更加复杂的内容代替,"块级"类别大致相当于HTML5中的流类别,而"行内"类别相当于HMTL中的措辞内容类别,不过除了这两个还有其他类别。

pre

预格式化文本元素

空白折叠：在源代码中的连续空白字符（空格、换行、制表），在页面显示时，会被折叠为一个空格

例外：在pre元素中的内容不会出现空白折叠

在pre元素内部出现的内容，会按照源代码格式显示到页面上。

该元素通常用于在网页中显示一些代码。

pre元素功能的本质：它有一个默认的css属性(white-space:pre)

显示代码时，通常外面套code元素，code表示代码区域。

<code>
    <pre>
        console.log("Hello world!");
    </pre>
</code>

<!-- 也可以这样写 -->
<code style = "white-space:pre">
    cosole.log("Hello world!")
</code>

html实体

HTML实体

实体字符， HTML Entity

实体字符通常用于在页面中显示一些特殊符号。

&单词;
&#数字;

第二种写法中的数字比较难记忆,可以查看MDN文档

小于符号

<

大于符号

>

空格符号

 non-breaking space

版权符号 ©

©

&符号

&

更多的实体字符可以查看html entity MDN

a元素

a元素

超链接

href属性

hyper reference：通常表示跳转地址

普通链接
锚链接(比如目录就是用锚链接制作的)

id属性：全局属性，表示元素在文档中的唯一编号

功能链接

点击后，触发某个功能

执行JS代码，javascript:
发送邮件，mailto:

要求用户计算机上安装有邮件发送软件：exchange

拨号，tel:

要求用户计算机上安装有拨号软件，或使用的是移动端访问

target属性

表示跳转窗口位置。

target的取值：

_self：在当前页面窗口中打开，默认值
_blank: 在新窗口中打开

路径

路径的写法

站内资源和站外资源

站内资源：当前网站的资源

站外资源：非当前网站的资源

绝对路径和相对路径

站外资源：绝对路径

站内资源：相对路径

绝对路径

绝对路径的书写格式：

url地址：

协议名://主机名:端口号/路径

schema://host:port/path

协议名:http(安全性没有https高)、https、file

主机名:域名、IP地址

端口号:如果协议是http协议，默认端口号为80,如果是https协议，默认端口号为443

当跳转目标和当前页面的协议相同时，可以省略协议名

相对路径

以./开头，./表示当前资源所在的目录

可以书写…/表示返回上一级目录

相对路径中：./可以省略

图片元素

图片元素

img元素

image缩写，空元素

src属性：source

alt属性：当图片资源失效时，将使用该属性的文字替代图片(当图片可以正常使用时，不会显示alt的内容)

title属性:当鼠标移到图片所在的位置时，会显示title的内容

和a元素联用

和map元素联用

给map加上name属性
在img元素里写上usemap属性"#name"

<a target = "_blank" href = "">
    <img usemap = "#某某某" src = "" alt = "">
</a>

<map name = "某某某">
    <area shape = "circle" coords = "x, y, r" href = "">
    <!-- x y r分别表示圆心坐标点以及该圆的半径 -->
    <area shape = "rectangle" coords = "x1, y1, x2, y2" href = "">
    <!-- 矩形可以简写为rect, x1 y1和x2 y2分别表示左上角坐标点的横坐标值和右下角坐标点的纵坐标点 -->
    <area shape = "polygon" coords = "x, y..." href = "">
    <!-- 多边形的shanpe可以简写为ploy,依次描述每一个顶点的位置 -->

</map>

map：地图

map的子元素：area

衡量坐标时，为了避免衡量误差，需要使用专业的衡量工具：

ps、pxcook、cutpro（本人开发）

和figure元素联用(便于语义化)

指代、定义，通常用于把图片、图片标题、描述包裹起来

子元素：figcaption

多媒体元素

多媒体元素

video 视频
src属性:视频地址

audio 音频

video

controls: 控制控件的显示，取值只能为controls
controls = “controls”

某些属性，只有两种状态：1. 不写 2. 取值为属性名，这种属性叫做布尔属性

布尔属性，在HTML5中，可以不用书写属性值，只需要书写属性名即可;

autoplay: 布尔属性，自动播放。

muted: 布尔属性，静音播放。

loop: 布尔属性，循环播放

audio

和视频完全一致

兼容性

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致

mp4、webm

列表元素
ul和ol 常常和li联合使用

列表元素

有序列表

ol: ordered list

li：list item

属性(最好不要直接书写type，建议用list-style-type控制)
type = “disc” discircle 实心圆
type = “square” 实心方块
type = “circle” 圈(空心圆)
type = “1” start = “开始的数字”
type = “Ⅰ” start = “开始的数字”
type = “a/A” start = “开始的数字”
reversed = “reversed” 表示倒序

MDN note:ol这个属性在 HTML4中弃用，但是在 HTML5 中被重新引入。除非列表中序号很重要（比如，在法律或者技术文件中条目通常被需要所引用），否则请使用 CSS list-style-type 属性替代。(还是前面说的语义化问题,样式由CSS决定)

无序列表

把ol改成ul

ul：unordered list

在ul和li元素中不要使用type这个属性，它已经被废弃了,可以通过CSS的list-style-type控制;

无序列表常用于制作菜单或新闻列表。

定义列表

通常用于一些术语的定义

dl: definition list

dt: definition title

dd: definition description

容器元素

容器元素

容器元素：该元素代表一个块区域，内部用于放置其他元素

div元素

没有语义

语义化容器元素(HTML5中加入)

header: 通常用于表示页头，也可以用于表示文章的头部

footer: 通常用于表示页脚，也可以用于表示文章的尾部

article: 通常用于表示整篇文章

section: 通常用于表示文章的章节

aside: 通常用于表示侧边栏(附加信息)

nav:通常只用于导航

元素包含关系

元素包含关系

以前：块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外

元素的包含关系由元素的内容类别决定。(由于现在更重视语义化所以元素包含关系变得更加复杂)

查看内容类别MDN

例如，查看h1元素中是否可以包含p元素(查看h1 MDN)

总结：

容器元素中可以包含任何元素
a元素中几乎可以包含任何元素
某些元素有固定的子元素（ul>li，ol>li，dl>dt+dd）
标题元素和段落元素不能相互嵌套，并且不能包含容器元素

ownclock~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.HTML核心

基本知识第一个网页Emmet插件：自动生成HTML代码片段注释注释为代码的阅读者提供帮助，注释不参与运行在HTML中，注释使用如下格式书写：元素其他叫法：标签、标记<a href="http://www.duyiedu.com" title="黑龙江渡一教育有限公司">渡一教育</a><title>Document</title>整体：element （元素）元素 = 起始标记（begi.
复制链接

扫一扫