HTML学习笔记整理（二）

最新推荐文章于 2024-06-15 21:20:00 发布

leeprprprpr

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量255

点赞数

分类专栏：在路上文章标签： html

本文链接：https://blog.csdn.net/weixin_51297067/article/details/109959015

版权

在路上专栏收录该内容

4 篇文章 0 订阅

订阅专栏

字符编码

用户向计算机输入字符，字符在计算机中显示出来让用户看到，这其中经历了两个过程：

编码（将字符转换为二进制码的过程）—> 解码（将二进制码转换为字符的过程）

如同破译密码，一个字符或者一个数字有一个特定的意思，中间存在着对应关系（密码本)，这个对应关系就称为字符集（charset）

当编码和解码所用的字符集不同，即密码本不对时，就会出现乱码现象（得不到有意义的信息）
常见的字符集：

ASCII

ISO88591

GB2312（可编码汉字）

UTF-8（开发时都使用这个）

可以在编辑器的右下角看到所用的字符集
为避免网页乱码问题，要在编写的网页中加上一个标签来声明所用的字符集：< meta charset = “字符集名称”>

放置位置如下：
```
<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>这是一个新的网页</title>
    </head>
```

P.S. 标签里面所输入的字符集名称要与编辑器所设置的字符集相同，否则网页会出现乱码

网页编写的完整结构

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>这是一个新的网页</title>
    </head>
    <body>
        <h1>这是<font size = "5">一级</font>标题</h1>
        <h2>这是二级标题，字体会比一级标题小</h2>
        试试看这样能不能换行
        可以吗
        可以吧
        <p>那这样可以了吗</p>
        <p>似乎可以了呢</p>
    </body>
</html>

文档标签的查询

下载Zeal可以离线查看；

[https://zealdocs.org/]:
搜索W3school

[https://www.w3school.com.cn/tags/index.asp]:

实体（转义字符）

在HTML中有时不能直接书写一些带有特定含义的符号，如：小于/大于号（与标签的格式冲突），空格（若连续输入多个空格会被浏览器默认为一个）

如果需要输出这些字符，则需要使用html中的实体。

格式：&实体名称；（后面的分号不要忘记）

&nbsp – > 空格

&gt – > 大于号

&lt --> 小于号

… …

meta标签

meta主要用于设置网页中的一些元数据，元数据主要是给浏览器看的

元数据举例：

charset 指定网页的字符集（字符集看前面字符编码那块）

name 指定数据的名称

content 指定的数据的内容

使用方法：
```
<meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV">  
<meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有最及时的动漫新番，最棒的ACG氛围，最有创意的Up主。大家可以在这里找到许多欢乐。">
```
其中keywords表示网页的关键字，在搜索引擎上输入关键字内容时就会出现网页

content中可以输入多个关键字，每个关键字间用英文逗号隔开

description表示网页的描述，content中的内容出现在如图所示的地方：

在这里插入图片描述

http-equiv可用于网页的跳转（重定向到另一个网页）

<meta http-equiv="refresh" content="3";url=https://www.bilibili.com/>

一直到content=之前格式都不变，“3”表示在当前页面停留3秒，后面的;url也不变，加在这后面的网址就是3秒之后要跳转到的地方。

语义化标签

在使用标签的时候要关注标签的语义，而不是它的样式
之前提到过标题标签：
```
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
```
- 一共就有六个级别，从一到六重要性递减，一级标题最重要；
- 一个页面中一般就出现一个一级标题；
- 一般情况下就用到h3，往下很少用到
还提到了p标签，即< p >内容< /p >

为什么可以换行呢？因为p标签表示页面中的一个段落，p标签中的内容就表示一个段落（所以可以推测p标签即paragraph）；

块元素
- 在页面中独占一行的元素被称为块元素（block element），一般用于网页中的宏观布局
  
  举例：
  1. 标题标签；
  2. p标签；（注意在此标签中不能放任何的块元素，虽然有时网页中可以显示正常显示，但这是浏览器进行自动修正后的结果，有时浏览器的自动修正并不一定符合我们想要的效果）
  3. < blockquote > 引用内容< /blockquote >
    此标签用于表示引用内容，表示长引用，用于引用较长的内容；
```
<p>在书中他提到：</p>
        <blockquote>起初，在他还能矜持的时候，曾十分恭敬地向我祝酒，脸上带着暗示的笑容，祝我“前途顺利，达成宿愿”，这时，我觉得似乎可以高兴一点。到后来，随着钦量的增加，他的脸色越来越发青，情形就不对了。</blockquote>
```
  行内元素
  
  不会独占一行的元素叫做行内元素（line element），用于包裹文字
  
  举例：
  1. < em >强调内容< /em >用于表示语音语调的加重（反话、阴阳怪气什么的）；
```
 <p>你今天真<em>好看</em></p>
```

在这里插入图片描述
2. < strong >强调内容< /strong >用于强调重要内容，字体有加粗变化

<p>你今天真<strong>好看</strong></p>

在这里插入图片描述

< q >引用内容< /q >用于引用较短的内容，会给引用内容加上引号；

<body>
        他说：
        <q>你今天真好看。</q>
    </body>

在这里插入图片描述

一般只会在块元素中置放行内元素，而不会在行内元素中放块元素

布局标签（结构化语义标签）

< header >< /header >表示网页的头部；
< main >< /main >表示网页的主体（与c语言中的main函数相同，具有唯一性，一个页面中只有一个）；
< footer ></ footer >表示网页的底部（最下边）；
其中 < header > 和 < footer > 既可以表示整个网页的头部和底部，也可以表示网页中部分区域的头部和底部（在页面中不唯一）；
< nav >< /nav >表示网页中的导航（索引）；
< aside >< /aside >表示网页中的侧边栏；
< article >< /article >表示网页中独立的一篇文章；

~~（边看课边做笔记啪啪啪打完上面的内容以后说以上都不怎么使用的时候真的很崩溃呢：>）~~

important!!! < div > < / div >没有语义，用来表示一个区块，是主要的布局元素（随便点开一个网页的源代码看到最多的分区块的标签就是div）
< span >< /span > 是一个行内元素，没有语义，用于在网页中选中文字（？）

列表

无序列表（用的较多）

就像markdown里面的小黑点列下来的一串

在这里插入图片描述

标签名：< ul >< /ul >,结合< li >内容< /li >使用，有多少个< li >标签就有多少项

 <ul>
    <li>今天要做的事</li>
    <li>明天要做的事</li>
</ul>

在这里插入图片描述

有序列表

有序号的列表，就像这个：

在这里插入图片描述

标签名：< ol > < /ol >,同样和< li >内容< /li >一起使用，有多少个< li >标签就有多少项

<ol>
      <li>今天要做的事</li>
      <li>明天要做的事</li>
 </ol>

在这里插入图片描述

定义列表

顾名思义，要自己定义的列表，标签名：< dl >< /dl >

在< dl >中会使用< dt >表示定义的内容，用< dd >对定义的内容加以解释说明

<dl>
                <dt>今天要做的事</dt>
                <dd>吃饭</dd>
                <dd>吃饭</dd>
                <dd>吃饭</dd>
</dl>

在这里插入图片描述

列表之间可以相互嵌套

超链接

个人理解就是网页中鼠标光标移过去字体有变化，可以点击，点了以后就会跳转到下一个页面的东西

使用方法——< a >< /a >标签及其属性href,形式如下：

< a[空格]href=“跳转的页面的地址” >在此处输入你想要设置的被点击的文字< /a >
```
<body>
        <a href="https://www.bilibili.com/">快乐源泉</a>
    </body>
```

在这里插入图片描述

其中访问过的（点击过的）链接会变成紫色，没有访问过的会变成蓝色

当创建的好几个网页放在同一个目录下时，href等号后面的值也可以输入同一目录下的另一个网页，此时可以写成：

href=“文件名（带拓展名）”
```
<body>
        <a href="自制2.0.html">学习使我快乐</a>
    </body>
```

在这里插入图片描述

这里有一个相对路径的问题：

相对路径

用href跳转服务器内部（就我们自己弄的那些）的页面时，一般使用相对路径

相对路径以./(可以省略）和 …/（不可以省略）开头
用./或者不写时能跳转的只是当前文件所在的目录，而用…/可以跳转到上一级目录中的文件

example：当你的网页存放在文件夹1中的文件夹2中时，在这个网页中能跳转的只有文件夹2中的网页，而使用…/则可以跳转到文件夹1中的网页

写成这样时：

在这里插入图片描述

这时候点进去会这样

在这里插入图片描述

而改成这样时：

在这里插入图片描述

点进去就变成

在这里插入图片描述
若此时的网页在文件夹1中，想要跳转到放在文件夹1中的文件夹2中的网页时则可以这么写：

    <body>
        你好，我的朋友
        <a href="./文件夹2的名称/想点开的网页的文件名（带拓展名）">学习使我快乐</a>
    </body>

相对路径的其他用途

当想要跳转的页面出现在另一个标签页时就需要用到另一个属性——target，用来指定超链接打开的位置

当没有标target这个属性或者target值为_self时，则在当前页面中打开超链接
当值为_blank时则在另一个标签页中打开超链接，并且原来的页面不会消失

<body>
        <a href="../测试.html" target="blank">学习使我快乐</a>
    </body>

在这里插入图片描述

当想要快速回到顶部的效果时，则将href标签的属性设为#

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

则此时点击超链接“回到顶部”就可以实现

当想要快速到达某一特定位置时，则涉及到id属性的问题

id属性

每个标签都可以添加一个id属性，这个属性是唯一的

id属性是标签的特征标识，每个页面中一个id只能出现一次

快速到达某一特定位置的方法：

在以下代码中：

<!doctype html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <title>这是一个新的网页</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这是二级标题，字体会比一级标题小</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        试试看这样能不能换行
        可以吗
        可以吧
        <p>那这样可以了吗</p>
        <p>似乎可以了呢</p>
        <p>Let your heart guide you. It whispers, so listen closely. - The Land Before Time
            跟随你心的指引吧。它bai总是低诉du着前进的方向,所以请仔细聆听。《大脚板走天涯》</p>
        <p> If you live to be a hundred, I want to live to be a hundred minus one day, so I never have to live without you. - Winnie the Pooh考试大
            如果你要活到一百岁,那么我只要活到一百岁差一天,这样我就不用度过没有你陪伴的分分秒秒。《小熊维尼》</p>
        <p> If you live to be a hundred, I want to live to be a hundred minus one day, so I never have to live without you. - Winnie the Pooh考试大
            如果你要活到一百岁,那么我只要活到一百岁差一天,这样我就不用度过没有你陪伴的分分秒秒。《小熊维尼》</p>
        <p>Remember: Always let your conscience be your guide. - Pinocchio
            记住:要凭着你的良心做事。《木偶奇遇记》</p>
        <p>Remember: Always let your conscience be your guide. - Pinocchio
            记住:要凭着你的良心做事。《木偶奇遇记》</p>
        <p>Remember: Always let your conscience be your guide. - Pinocchio
            记住:要凭着你的良心做事。《木偶奇遇记》</p>
        <p>All it takes is Faith and Trust - Peter Pan
            只需要一些信仰和信念。《彼得．潘》</p>
        <p>All it takes is Faith and Trust - Peter Pan
            只需要一些信仰和信念。《彼得．潘》</p>
        <p>All it takes is Faith and Trust - Peter Pan
            只需要一些信仰和信念。《彼得．潘》</p>
        <p>ALICE'S ADVENTURES IN WONDERLANDLewis CarrollCHAPTER IDown the Rabbit-HoleAlice was beginning to get very tired of sitting by her sisteron the bank, and of having nothing to do: once or twice she hadpeeped into the book her sister was reading, but it had nopictures or conversations in it, `and what is the use of a book,'thought Alice `without pictures or conversation?'So she was considering in her own mind (as well as she could,for the hot day made her feel very sleepy and stupid), whetherthe pleasure of making a daisy-chain would be worth the troubleof getting up and picking the daisies, when suddenly a WhiteRabbit with pink eyes ran close by her.There was nothing so VERY remarkable in that; nor did Alicethink it so VERY much out of the way to hear the Rabbit say toitself, `Oh dear! </p>
    </body>
</html>

当你想从页面的最开始跳转到最后一句《彼得潘》那段时，则在那一段做如下处理：

给那一段的p标签设置一个id：

        <p id=“here”>All it takes is Faith and Trust - Peter Pan
            只需要一些信仰和信念。《彼得．潘》</p>

在你想跳转的最开始的地方设置超链接，并将其href的属性设为**#id名**：

<!doctype html>
<html lang = "en">
    <head>
        <meta charset="UTF-8">
        <title>这是一个新的网页</title>
    </head>
    <body>
        <a href="#here">彼得潘</a>
		… …
        <p id=“here”>All it takes is Faith and Trust - Peter Pan
            只需要一些信仰和信念。《彼得．潘》</p>
        … …
    </body>
</html>

效果如下：

在这里插入图片描述

开发者工具的使用

点开网页，在空白处右键 --> 检查，或者按键盘上的F12

在element处可以看到我们所设计的网页在内存中的结构，可用于观察不按要求写代码时网页对代码进行的修正，以及上述提到的标签在网页中的具体使用位置和效果

在这里插入图片描述

对上一次总结的补充

网页语言设置

<html lang = "en"><!-- 意为网页所用语言为英文 若改成中文则把“en”改成“zh” -->

leeprprprpr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
HTML学习笔记整理（二）

字符编码用户向计算机输入字符，字符在计算机中显示出来让用户看到，这其中经历了两个过程：编码（将字符转换为二进制码的过程）—> 解码（将二进制码转换为字符的过程）如同破译密码，一个字符或者一个数字有一个特定的意思，中间存在着对应关系（密码本)，这个对应关系就称为字符集（charset）当编码和解码所用的字符集不同，即密码本不对时，就会出现乱码现象（得不到有意义的信息）常见的字符集：ASCIIISO88591GB2312（可编码汉字）UTF-8（开发时都使用这个）可以在编辑器的
复制链接

扫一扫