第一周周报-CSDN博客

本文链接：https://blog.csdn.net/m0_62225285/article/details/121449833

第一个网页

注释

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

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

注释如何写？ ctrl键+？键 (再按一次就取消了)

```html



```

元素

>其他叫法:标签,标记

```html

<a href="http://www.baidu.com">渡一教育</a>

```

整体叫元素(element)

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

属性= 属性名 + 属性值

```





```

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

空元素的两种写法：

1.```<meta charset="UTF-8">```

2.```<meta charset="UTF-8"/>```

元素的嵌套

元素不能相互嵌套

父元素，子元素，祖先元素，后代元素，兄弟元素(拥有同一个父元素的两个元素)

标椎的文档格式

HTML：页面，HTML文档

```html

<!DOCTYPE html>

```

文档声明，告诉浏览器，我现在使用的HTML标椎是HTML5。

不写的话，将导致浏览器进入怪异渲染模式。

```html

<html lang="en">

</html>

```

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

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

```html

<head>

</head>

```

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

```html

<title>Document</title>

```

网页标题

```html

<body>

</body>

```

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

语义化

什么是语义化

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

a元素：超链接

p元素：段落

h1元素：一级标题

2.所有元素与展示效果无关

元素显示出来的效果，应该由css决定。

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

只能因为你要用一个一级标题，所以你才选择h1元素，而不能因为你要加大加粗，所以才选择h1元素。

任何的元素它都是可以加大加粗的，这个是由css控制的，只要你调整了css，它就可以变了

为什么需要语义化？

1.为了搜索引擎优化

2.为了让浏览器理解网页

文本元素

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

h

h1~h6: 表示一级标题到六级标题

p

段落

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

span 【无语义】

没有语义，仅设置样式

pre

预格式化文本元素

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

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

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

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

pre元素功能本质: 它有一个默认的css属性

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

HTML实体

实体字符， HTML Entity

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

1.&单词;

2.&#数字;

-小于符号

< <

-大于符号

-空格符号

-版权符号

-&符号

a元素

超链接

href属性

表示跳转地址

1.跳转地址(普通链接)

2.跳转到某个锚点(锚链接)

```

例:a[href="chapter$"]*6>{章节$}

((h2[id="chapter$"]>{章节$})+p>lorem1000)*6

<a href="#">回到顶部</a>

```

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

3.功能链接

点击后，触发某个功能

- 执行JS代码，Javascript:

- 发送邮件，mailto:

- 拨号，tel:

target属性

表示跳转窗口位置。

target的取值:

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

-_blank: 在新窗口中打开

路径的写法

站内资源和站外资源

站内资源: 当前网站的资源(自己网站的东西)

站外资源: 非当前网站的资源(别人网站的东西)

## 绝对路径和相对路径

站外资源: 绝对路径

站内资源: 相对路径

1. 绝对路径

绝对路径的书写格式:

url地址:

```

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

```

协议名: http、https、file

主机名：域名、IP地址

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

2.相对路径

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

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

图片元素

img元素

image缩写，空元素

src属性: source(资源) 则会用到路径(路径的写法)

alt属性: 当图片资源失效时，将使用该属性的文字替代图片

```

如果能显示更好，万一显示不了，那么就会显示alt里面你写的汉字

```

和a元素联用(img充当a元素内容)

和map元素

map:地图

map子元素:area

figure元素(语义化)

多媒体元素

video 视频

audio 音频

video

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

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

布尔属性: 在HTML5中，可以不用书写属性值

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

```

例如 <video controls autoplay muted loop src="写链接地址"></video>

```

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

loop: 布尔属性，循环播放。

audio

和视频完全一致

兼容性

1.旧版本的浏览器不支持这两个元素

2.不同的浏览器支持的音视频格式可能不一致

列表元素

有序列表

ol: ordered list

li: list item

```

先写一个ol元素然后把li元素放在里面就可以了

例如 <ol>

<li>打开冰箱门</li>

<li>大象进去</li>

<li>冰箱门关上</li>

</ol>

```

ol里面的type属性

1: 指的是用数字来排列的

i: 指的是用罗马数字来排列的

a: 指的是用小写字母来排列的

A: 指的是用大写字母来排列的

```

<ol type="">

<li>打开冰箱门</li>

<li>大象进去</li>

<li>冰箱门关上</li>

</ol>

```

ol里面的reversed属性(倒序)

无序列表

把ol改成ul

ul: (无序列表)

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

定义列表

通常用于一些术语的定义

dl: (定义列表的英文简写)

dt:(术语标题)

dd:(术语描述)

容器元素

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

div元素

没有语义

语义化容器元素

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

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

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

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

aside: 通常用于表示侧边栏