html 5 插入广告_HTML入门笔记（1）

蔚落 2023-01-01 10:51 180阅读 0赞

**HTML发明者及介绍**

HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee（喜欢称呼他为李爵士）和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。

**HTML 起手详解**

![0a1d9f70f6627d64053308c622f74452.png][]

起手图

1、DOCTYPE是document type (文档类型) 的缩写，<！DOCTYPE xxx>主要作用是告诉浏览器的解析器使用哪种规范来解析页面这个文档。

2、lang="zh-CH"主要是页面语言的声明，我们一般是写zh-CH（代表简体中文），不会写zh因为像香港等他们会用中文繁体字，或者像新加坡等也有自己的中文写法（zh-SG），例如我们各省的方言，虽然都是说的中文但你有可能听不懂。

3、head标签是头部的意思，顾名思义标签用于定义文档的头部，它是所有头部元素的容器。head的默认属性是display:none代表其容器的内容不会显示在网页的页面上。

4、<meta charset="UTF-8"> 标签内的charset 属性规定 HTML 文档的字符编码，"UTF-8"是告诉浏览器此页面是什么字符编码格式。其他字符格式有：gb2312、gbk等。

5、viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。width=device-width代表页面宽度是客户端(电脑、手机等)的屏幕宽度，initial-scale用于设置Web页面的初始缩放比例，initial-scale=1.0代表客户端屏幕显示未见缩放的页面。简而言之就是禁止缩放，兼容手机。

6、X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。而"ie=edge"会告诉IE浏览器以最高版本内核来渲染页面。

7、<title>xxxx</title>中的xxxx代表网页的标题，可以按照自己的需求设置。

**HTML中常用的章节的标签**

<!DOCTYPE html>
    <html lang="zh-CH">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>起手式的写法</title>
    </head>
    <body>
        <header>我是头部，我很重要，可以发广告。</header>
        <div>
            <main>
                <section>
                    <h1>章节标签介绍（我是h1）</h1>
                    <section>
                        <p>这里是章节的正文了</p>
                        <h2>1.1 介绍（我是h2）</h2>
                    </section>
                    <section>
                        <p>这是第二次介绍了</p>
                        <h3>1.2 介绍</h3>
                    </section>
                </section>
                <aside>
                我是旁支内容，参考资料1 2 3
                </aside>
                <footer>©我可以写版权声明，我是底部标签</footer>
            </main>
        </div>
    </body>
    </html>

![baf7424f744c99b8699da370f00c1ae3.png][]

代码效果图

1、section 章节

2、article 文章

3、p 段落

4、header 头部

5、footer 脚部

6、main 主要内容

7、aside 旁支内容

8、div 换分

9、h1~h6 标题

**HTML中的全局属性（所有标签都有的属性）**

1、class 规定元素的类名（classname),如需为一个元素规定多个类，用空格分隔类名。就像物品的名称一样，通过这个名称可以对元素做很多是操作，增加工作效率。

2、contenteditable 作用于一个元素，可以让该元素变成可编辑的。我们就可以在浏览器输入我们想输入的内容。

<h1 contenteditable>章节标签介绍（我是h1）</h1>

结果是：我们可以改变 "*章节标签介绍（我是h1)*", 可以输入任意文字。

3、hidden 用这个命令元素会被隐藏，块元素也会折叠起来。

4、id 用于元素定义唯一标识符，是惟一的。但是不建议使用，除非你有洁癖，因为如果你对不同的两个元素定义了同一个ID，容易产生错误，而且有可能命名的id与windows冲突，除非你特别了解在使用。

5、style 改变元素的样式，例如大小、颜色等。

6、tabindex 可以设置键盘中的TAB键在控件中的移动顺序，及焦点的顺序，让用户可以用键盘操控界面。很有意思的事如果tabindex的属性为负数，则永远用键盘TAB键找不到它的位置，而如果tabindex为正数，当它是0是它会是最后一个被键盘TAB键找到的。而不是在最前面。

7、title 当我们在某个元素输入的内容被部分用省略号代替隐藏时，我们可以把所有内容放入title中（title=“所有内容”），当鼠标光标放在这个元素身上是它会显示出所有内容。

**HTML中的常用的内容标签**

1、a 实现超链接

2、strong 加粗

3、em 告诉浏览器把其中的文本表示为强调的内容

4、code <code>标签中的文本内容将显示为等宽、类似电传打字机样式的字体。

5、pre 在页面中显示代码中原有的样子，因为当你在代码中输入多个空格或者回车是而页面只会显示一个，而用pre则会显示原来的样子

6、ol+li 有序列表

7、ul+li 无序列表

8、dl+dt+dd <dl>标记定义了一个定义列表，<dt>给出了术语名，<dd>标记给出了术语的定义。

9、hr 分割线

10、br 强制换行

11、q（quote) q 元素用于简短的引用，如句子中的引用，仅仅是加上双引号而已。

12、blockquote blockquote 一般用于独立的、较长的引用块，浏览器会把 blockquote元素显示为一个独立的块，并为它插入换行和外边距。

[0a1d9f70f6627d64053308c622f74452.png]: /images/20221120/caef4cdb078446e9a7212752295237d8.png
[baf7424f744c99b8699da370f00c1ae3.png]: /images/20221120/6369c5ee45e944b891b66211555f80fe.png