HTML+CSS学习 Chapter2

Fxrain

已于 2024-04-29 13:01:14 修改

阅读量273

点赞数 3

文章标签： html css 学习

于 2024-04-05 14:56:00 首次发布

本文链接：https://blog.csdn.net/weixin_73049545/article/details/137397293

版权

本文详细介绍了HTML的基础知识，包括文档声明的作用、不同字符编码的选择、设置语言对SEO的影响、排版标签的使用规则、HTML语义化的优点以及块级和行内元素的区别。同时提到了文本标签的运用和一些不常用的标签如blockquote和address。

摘要由CSDN通过智能技术生成

一、HTML文档声明

文档声明的作用：告诉浏览器当前网页的版本

H5对应标准声明，文档声明必须写在网页的第一行

<!DOCTYPE html>

H4文档声明

二、HTML字符编码

ASCII 对应大写字母、小写字母、数字、一些符号，共计128个

ISO 8859-1 在ASCII基础上，扩充了一些希腊字符等，共计256个

GB2312 继续扩充，收录了6763个常用汉字，682个字符

GBK 收录了汉字和符号达到20000+，支持繁体中文

UTF-8 万国码包含世界上所有语言的文字和符号

字符编码的原则：

（1）存储时需要采用合适的字符编码

（2）采用哪种方式编码，需采用相同方式解码，否则会乱码

编码时统一使用UTF-8编码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>HTML网页</title>
    </head>
    <body>
        <input>
    </body>
</html>

三、HTML设置语言

主要作用：

让浏览器显示对应的翻译提示

有利于搜索引擎优化

具体写法：

<html lang="en">

四、HTML帮助手册

MDN Web / W3school 网站

五、HTML排版标签

h1-h6 标题标签双标签

p 段落标签双标签

div 没有任何含义（语义），用于整体布局双标签

h1-h6不能互相嵌套

p标签很特殊，它里面不能有：h1-h6、p、div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1><!-- h1标签最重要 一般只有一个-->
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <p>段落标签0</p>
    <div>
        <p>段落标签1</p>
        <p>段落标签2</p>
    </div>
</body>
</html>

六、HTML语义化标签

语义化：用特定的标签表达特定的含义

语义化的优点：

1.代码可读性强、清晰

2.有利于SEO（搜索引擎优化） eg。爬虫

3.方便设备解析（屏幕阅读器）

七、块级元素与行内元素

排版标签都是块级元素

规则：

（1）块级元素中能写行内元素，也能再写块级元素（几乎什么都能写）

（2）行内元素中能再写行内元素，但是不能写块级元素

特殊规则：

（1）h1-h6不能互相嵌套

（2）p标签中不能写块级元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--块级元素,特点：独占一行-->
    <marquee></marquee>
    <h1>HTML</h1>
    <p>HTML</p>
    <p>HTML</p>
    <div>HTML</div>
    <div>HTML</div>
    
    <!--行内元素，特点：不独占一行-->
    <input type="text">
    <input type="text">
    <span>HTML</span>
    <span>HTML</span>
</body>
</html>

marquee元素设计的初衷是让文字具有动画效果，现在可以通过CSS实现，因此marquee标签已经过时，不推荐使用。

八、常用的文本标签

文本标签用于包裹词汇、短语等，通常写在排版标签里面。排版标签更宏观（大段的文字），文本标签更微观（词汇、短语等）。文本标签通常都是行内元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span{
            color:red
        }
    </style>
</head>
<body>
    <p>
        学习 <em>学习的英文：study</em>
    </p>
    <p>
        当出门时，<strong>一定要关好门窗！</strong>
    </p>
    <p>
        前端的三个框架为：<span>Angular、React、Vue</span>
    </p>
</body>
</html>

九、不常用的文本标签

下表中 blockquote和address属于块级元素