2020-12-02HTML及标签_浏览器打印显示html标签-CSDN博客

本文链接：https://blog.csdn.net/weixin_53125679/article/details/110497690

一、HTML是什么？

html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。

普通文本：只包含文字。

富文本：图片，文字简单的样式。

超文本：可以连接到其他文档的文本（音频，视频，图片等）。
标记：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成 标记内容的语义。

作用：HTML是负责描述文档语义的语言。

注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。

2、HTML是负责描述文档语义的语言

html中，除了语义，其他什么都没有。

html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。
所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。

3、HTML的网络术语

网页：由各种标记组成的一个页面就叫网页。
- 网页是一个包含html标签的纯文本文件。
主页(首页) : 一个网站的起始页面或者导航页面。
标记： <p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
xhtml：符合XML语法标准的HTML。

<!DOCTYPE html>
<!--文档声明类型，声明这是一个html5文件  -->
<html>
<!-- 当前网页 -->

<head>
    <!-- 网页的头部，里面的内容是给浏览器看的，主要是一些网页的配置 -->
    <title>我是一个标题</title>
</head>

<body>
    <!--网页的的主体，里面的内容是给用户看的  -->

</body>

</html>

二、标签

1、计算机编码介绍

计算机，不能直接存储文字，存储的是编码。

计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。

ASCII码：
美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。
美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。

ANSI编码：
每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如：
中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。
日本的ANSI编码是JIS编码。
台湾的ANSI编码是BIG5编码（繁体）。

GBK：
对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。

Unicode编码(统一编码)：
用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000

UTF-8(Unicode Transform Format)编码：
根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。

毫无疑问，开发中，都用UTF-8编码吧，准没错。

中文能够使用的字符集两种：

第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。

字库规模： UTF-8（字全） > gb2312（只有汉字）
重点1：避免乱码

我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码！（重点）。

当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)。

重点2：UTF-8和gb2312的比较

保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）

总结：

UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。

<!-- 设置文件的编码格式为UTF-8
        常见的编码格式：
            gb2312 只包含简体和一些特殊字符
            gbk  包含简体与繁体，还有古汉语文字，还有日本片假名 特殊字符。
            UTF-8 几乎包含所有人类语言。

            gb2312与UTF-8比较
            UTF-8更臃肿，加载更慢 gb2312 更小巧，加载速度更快
            同样显示5000个汉字，UTF-8会比gb2312多5kb。

            假如：
                你们公司做中文网页，追求网页的加载速度，要使用gb2312.
                你们公司做外贸，要显示一些外文，要使用uft-8。
     -->
    <meta charset="UTF-8">

2、单、双标签

<!-- 标签
    格式：
    双标签 <标签名>标签体</标签名>
    单标签 <标签名 />

    注释： 用户不会看到，主要是给程序员看的，在页面中查看网页源代码可以看到、
    作用：
    1.说明当前代码的功能
    2.当前代码暂时不需要
    
    格式：
    -->
    <!--  -->
    <!-- 
    
    快捷键 ctrl+/

    -->

3.语法特性

（1）HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

（2）空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

（3）标签要严格封闭

标签不封闭是灾难性的。

<!-- 特性：空白折叠现象
    合理使用空格 换行 缩进 可以调高代码的可阅读性.
    -->
    张老师真帅！

4.h系列标签

h系列标签
作用：告诉浏览器这些内容是标题，给内容添加标题语义
容量级标签
什么是容量级标签？
几乎可以放置所有标签
什么是文本级标签？
只能放置文字，图片，超链接，表单元素等。
格式：

<h1></h1>
...
<h6></h6>

知识点：
1.级别依次降低，重要性也随之降低。
2.都会被加粗，字体从大到小。
3.会独占一行
4.h标签虽然是一个容器级标签，但是最好不要加嵌套关系。
5.h标签慎用，特别是h1标签。一个网页最多只能出现一个。会影响网站的SEO。

seo：网站在搜索引擎中的自然排名。
想要提高SEO：
1.交钱给百度按照点击量（按照IP，以及浏览时间）
2.页面代码要规范。

    <h1>题都城南庄</h1>
    <h2>题都城南庄</h2>
    <h3>题都城南庄</h3>
    <h4>题都城南庄</h4>
    <h5>题都城南庄</h5>
    <h6>题都城南庄</h6>
    作者：崔户 去年今日此门中人面桃花相映红人面不知何处去桃花依旧笑春风

5.p系列标签

p标签作用：
给文本添加一个段落的语义。告诉浏览器，哪些文字是一个段落
格式：

    <p> 内容 </p>

知识点：
1.首尾都会换行。
2.特殊的文本级标签。只存放文字/图片/超链接。

    <h1>题都城南庄</h1>
    <h3>作者：崔户</h3>
    <p>去年今日此门中</p>
    <p>人面桃花相映红</p>
    <p>人面不知何处去</p>
    <p>桃花依旧笑春风</p>你好啊，世界我不好

6.em、strong、delete、ins标签

em标签

作用：给文本添加一个强调的语义。
效果：斜体。

 <em>这上面是一首唐诗。</em>

strong标签

作用：给文本添加一个语气更强的强调作用。

<strong>上面是一句废话</strong>

del标签（delete ）：

作用：给文本添加一个删除的语义。
效果：文字中间添加了一条删除线。

<del>我被删除了</del>

ins标签
（insert 插入）
作用：给文本添加一个插入的语义。
效果：文字底部有一条底线。

 <ins>我是插入文本</ins>

7.hr标签

hr标签（少用）
作用：在网页中添加一个分割线
格式：<hr />
h：headline

    <h1>题都城南庄</h1>
    <h3>作者：崔户</h3>
    <hr>
    <p>去年今日此门中</p>
    <p>人面桃花相映红</p>
    <p>人面不知何处去</p>
    <p>桃花依旧笑春风</p>

8.sub、sup、pre标签

sub标签

b=bottom 底部
作用：定义下标字。

水分子：h<sub>2</sub>o

sup标签

作用：定义上标字。

勾股定理：a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>

i标签

效果：显示斜体文本效果。 -->

<i>我是i标签</i>

pre标签：
将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行）

<pre>
    去年今日此门中
    人面桃花相映红
    人面不知何处去
    桃花依旧笑春风
</pre>

9.标签属性

什么是标签属性？

对于人来说，性别，年龄，名字都是他的属性。
每一个标签都有自己特定的属性。

位置：双标签的开始标签中或单标签中。
格式：

<标签名属性名=“属性值”></标签名>
<标签名属性名=“属性值”>
1.属性名与标签名中间用空格隔开，与其他属性也用空格隔开。
2.属性名与属性值用=连接，中间不能有空格。
3.属性值必须用双引号包括起来。
4.一个标签内，可以有一个或多个属性。

11.img标签

img标签
image的缩写
作用：在当前页面中引入一个外部的图片。单标签。
可插入的图片的类型：jpg,png,gif。
src：source的缩写，来源。表示图片的来源或路径。必须的属性。
alt：当前图片的说明。当图片资源加载不出来的时候，才会显示出来。搜索引擎会根据alt的内容去收录图片。
width：宽指定图片的宽度。属性值是数字，单位是px（像素）。
height：高指定图片的高度。属性值是数字，单位是px（像素）。
若不指定图片的宽高，浏览器会根据图片本身的宽高去加载图片、
若想要等比例缩放图片，只需要指定图片的宽或者高，浏览器会根据图片本身的宽高比例，自动计算剩下的宽或高。
title：标题当鼠标悬停时显示的内容。

    <!-- <img src="../img/1.gif">
    <img src="../img/1.jpeg">
    <img src="../img/5.png" alt=""> -->
    <img src="../img/2.jpg" alt="这是党妹" height="500px" title="把你爪子拿开">

12.路径问题

1.相对路径

从当前文件出发，查找目标文件。
（1）同级查询当前文件与目标文件在同一个文件夹下。只需要在src中写入文件的全称即可。src=“图片全称”
（2）子级查询当前文件与目标文件的父文件夹在同一个文件夹下。 src=“文件夹1/文件夹2…/图片全称”
（3）父级查询当前文件的父文件夹与目标文件在同一个文件夹下。 …相当于上一级文件夹。.相当于当前文件夹
2.绝对路径

（1）从盘符出发，查找目标文件。
（2）以https或者http开头的网络路径也是绝对路径的一种。
注意点：

1.企业开发中，尽量使用相对路径和网络地址形式的绝对路径。绝对路径的本地形式可移植性不好。在部署到服务器或与别人共同开发时，可能会出现问题。
2.尽量使用反斜杠去书写路径。因为有些系统比如linux，它不支持使用正斜杠去书写路径。

    <!-- 绝对路径(本地) -->
    <img src="E:\img\2.jpg" alt="">
    <!-- 绝对路径（网络）  -->
    <!-- <img src="https://inews.gtimg.com/newsapp_bt/0/12850987582/1000" alt=""> -->
    <!-- <img src="3.jpeg" alt=""> -->

    <!-- 相对路径 -->
    <img src="../img/1.jpeg" alt="">
    <!-- <img src="./img/1.gif" alt=""> -->

13.ol标签

ol order list 有序列表排行榜

作用：定义一个有序列表。给网页的内容添加一个有序列表的语义。
li 作用：定义一个列表项。
格式：

<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

type: 排序的类型

1 阿拉伯数字默认值
a 英文字母
A 大写的英文字母
i 罗马数字
I 大写的罗马数字
start:定义从哪里开始排序。

使用场景：

知识点：不常用。

 百度热搜：
    <ol>
        <li>嫦娥五号完成月球钻取采样及封装</li>
        <li>黄之锋涉非法集结被判13.5个月</li>
        <li>丁真妈妈回应儿子入职国企</li>
        <li>胡锡进回应被举报“有俩私生子”</li>
        <li>澳总理:不会削弱与中国人民友谊</li>
    </ol>

    喜欢的电影排行榜：
    <ol type="1" start="2">
        <li>肖申克的救赎</li>
        <li>海上钢琴师</li>
        <li>时间规划局</li>
        <li>复仇者联盟</li>
        <li>暮光之城</li>
    </ol>

14.ul无序列表、li列表项

ul:unorder list
作用：定义一个无序的列表。容器级标签
li：list item 列表项。容器级标签
格式：

    <ul>
        <li></li>
    </ul>

应用场景：
主要是用来放置一些功能和样式相同，只是文字描述不同的元素。
1.导航栏
2.新闻列表
注意点：
1.ul和li标签是一个组合。一起使用，不能单独使用。
2.ul标签中不要包含其他标签。
3.li中可以嵌套其他标签甚至可以嵌套ul和ol

<ul>
    <li>肖申克的救赎</li>
    <li>海上钢琴师</li>
    <li>
        小时代系列
        <ul>
            <li>小时代1</li>
            <li>小时代2</li>
            <li>
                <ol>
                    <li>小时代3.1</li>
                    <li>小时代3.2</li>
                    <li>小时代3.3</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>复仇者联盟</li>
    <li>暮光之城</li>