web前端笔记 | HTML | HTML核心

最新推荐文章于 2024-07-09 19:50:17 发布

不想当画家的厨师不是好码农

最新推荐文章于 2024-07-09 19:50:17 发布

阅读量131

点赞数

分类专栏：前端学习日记文章标签： html 前端 css

本文链接：https://blog.csdn.net/qingrumingjing1998/article/details/129140958

版权

前端学习日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.第一个网页

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

注释

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

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

<!-- 注释内容-->

元素

其他叫法：标签、标记

整体：element(元素)

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

属性 = 属性名+ 属性值

属性的分类：、

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

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

空元素的两种写法：

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

元素的嵌套

元素不能相互嵌套

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

标准的文档结构

HTML:页面、HTML文档

文档声明

<!DOCTYPE html>

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

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

根元素

<html lang="en"> </html>
<html lang="cmn-hans"> </html>

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

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

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

head元素

<head>
</head>

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

meta元素

<meta charset="UTF-8">

  文档的元数据：附加信息

  charset : 指定网页内容编码

  计算机中，低压电（0-2v）0，高压电（2-5v）1,表示2，使用10

  计算中，只能存储数字，文字和数字进行对应，比如 a-97,A-64,该字典叫做字符编码表，GB2312，GBK，UTF-8是Unicode编码的一种

title元素

<title>Document</title>

  网页标题

body元素

<body></body>

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

第一个网页

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

注释

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

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

<!-- 注释内容-->

元素

其他叫法：标签、标记

整体：element(元素)

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

属性 = 属性名+ 属性值

属性的分类：、

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

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

空元素的两种写法：

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

元素的嵌套

元素不能相互嵌套

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

标准的文档结构

HTML:页面、HTML文档

文档声明

<!DOCTYPE html>

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

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

根元素

<html lang="en"> </html>
<html lang="cmn-hans"> </html>

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

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

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

head元素

<head>
</head>

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

meta元素

<meta charset="UTF-8">

  文档的元数据：附加信息

  charset : 指定网页内容编码

  计算机中，低压电（0-2v）0，高压电（2-5v）1,表示2，使用10

  计算中，只能存储数字，文字和数字进行对应，比如 a-97,A-64,该字典叫做字符编码表，GB2312，GBK，UTF-8是Unicode编码的一种

title元素

<title>Document</title>

  网页标题

body元素

<body></body>

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

2.语义化

什么是语义化

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

a元素：链接

p元素：段落

h1元素：一级标题
所有元素与展示效果无关

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

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

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

为什么要语义化？

为了搜索引擎优化（SEO）

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

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

阅读模式、语音模式、

3.文本元素

h元素

标题：head

和h1~h6元素

快捷写法
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
h$*6>{$级标题}

一级标题一定比二级标题大？不一定只能从含义比较，不能从样式比较

p元素

段落：paragraphs

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

p*6>lorem1
<p>lorem.</p>
<p>Ullam.</p>
<p>Accusamus!</p>
<p>Fugit.</p>
<p>Ipsum.</p>
<p>Autrm.</p>

span元素（无语义）

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

以前某些元素在现实时会独占一行(块级元素)，而某些元素不会（行级元素）
到了html5中，已经禁用块级元素和行级元素的说法。

pre元素

预格式化文本元素，该元素通常用于在网页中显示一些代码。功能的本质：它有一个默认的css属性

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

例外：在pre元素中的内容不会出现空白折叠，会按照源代码格式显示到页面上

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

实体字符

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

&单词

&lt—小于符号

&gt—大于符号

&nbsp—non-breaking space空格符号

&copy—版权符号

&amp—&符号00000000
&#数字

&#60—小于符号

4.a元素

超链接

href属性

hyper reference ：通常表示跳转地址

普通链接
锚链接

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

点击后触发某个功能

-执行js代码，JavaScript

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

-打电话 tel:（要求用户计算机上安装有拨号软件，或使用的是移动端访问）

<a href="javacsript:alert('你好！)">
  弹出
</a>

<a href="mailto:1335893435@qq.com">
  点击发送邮件
</a>

<a href="tel: 13101603939">
  点击发拨打电话
</a>

target属性

表示跳转窗口位置。

target的取值：

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

<a href="https://www.baidu.com">
  百度
</a>

_ blank:在新窗口打开


<a href="mailto:1335893435@qq.com" target="_blank">
  百度
</a>

5.路径的写法

站内资源和站外资源

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

绝对路径和相对路径

站外资源：绝对路径

绝对路径的书写格式：url地址

、、、

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

schema://host:port/path

、、、

协议名： http、https、file

主机名：域名、ip地址

端口号：如果协议是http协议默认端口号是80
```
            如果协议是https协议 默认端口号是443
```
当跳转目标和当前页面的协议相同时，可以省略协议

<a href="//renren.com">
  百度
</a>

站内资源：相对路径（也可以使用绝对路径）

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

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

相对路径中 ./可以省略

6.图片元素

image缩写，空元素

img元素

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

和a元素联用

<a href ="https://www.baidu.com">
  <img src="./img/baidu.jpg" alt="这是一张百度的图片">
</a>

和map元素联用

map :地图

map的子元素：area

衡量坐标时间，为了避免衡量误差，需要使用专业的衡量更具：ps、pxcook

<map name="baiduMap">
  <area shape="circle" coords="360,204,48" href="https://www.baidu.com"></area>
</map>

和figure元素联用

指代、定义、通常用于把图片、图片标题、图片描述

子元素：figcaption

<figure>
  <a>
    <img>
  </a>
  <figcaption>
    <h2>
      标题
    </h2>
  </figcaption>
  <p>
      描述
  </p>
</figure>

7.多媒体元素

video 视频 audio音频

video元素

<video controls="controls" src=""></video>
<video controls src=""></video>

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

布尔属性：某些属性，只有两种状态：1. 不写 2.取值为属性名这种属性叫做布尔属性，在html5中可以不用书写属性值

<video controls src=""></video>

autoplay ：布尔属性，自动播放

muted ：布尔属性，静音播放

loop ：布尔属性，循环播放

audio元素

和视频完全一致

兼容性

旧版本的浏览器不支持这两个元素
不同的浏览器支持的音视频格式可能不一致，通常视频：MP4、webm 音频：MP3

<video controls >
  <source src ="123,mp4"></source>
  <source src ="123.webm"></source>
  <p>
    不支持，请下载flash
  </p>
</video>

8.列表元素

有序列表

ol : ordered list

li : list item(列表项)

把大象装进冰箱，总共分几步
<ol>
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>冰箱门关上</li>
</ol>

type属性

type = "a" 以abc为序号也可以等于1 A i 。这个属性再HTML4中启用，但是在HTML5中被重新引入，除非列表中的序号很重要，否则请使用 CSS中的 list-style-type

<ol type="a">
  <li>打开冰箱门</li>
  <li>把大象放进去</li>
  <li>冰箱门关上</li>
</ol>

reversed属性反序

从语义上看，逻辑上列表是倒着的。

无序列表

把ol改成ul 常用于制作菜单或者新闻列表

ul : unordered list

今日菜系

<ul>
  <li>锅包肉</li>
  <li>水煮鱼</li>
  <li>木须柿子</li>
  <li>素拍黄瓜</li>
<ul>

定义列表

通常用于一些术语的定义

dl ：definition list

dt : definition title 术语标题

dd : definition description 术语描述

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
</dl>

9.容器元素

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

div元素

没有语义

<div>
  <div>
    Lorem
  </div>
</div>

语义化容器元素

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

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

article : 通常用于表示文章内容

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

adide : 通常用于表示附加信息（侧边栏）

<header></header>
<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <section>
    <p>文章第一章节</p>
  </section>
</article>
<aside>侧边栏</aside>
<footer></footer>