HTML入门笔记1

HTML是谁发明的？
HTML起手应该写什么？
常用的章节标签有哪些？它们又分别是什么意思？用法是什么？
HTML的全局属性有哪些？
默认样式是什么？以及如何去修改默认样式？
常用的内容标签有哪些？它们有什么意思？

HTML是谁发明的？

HTML全程为：Hyper Text Marked Language，中文译为超文本标记语言，它是在1990年由蒂姆·伯纳斯·李爵士在一个HTML Tags的文件中被提及，当时只有18元素。现在已经有114个被标准化的标签了。

HTML起手应该写什么？

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<!DOCTYPE html>——表示文档类型

<html lang="en">——这个是一个html标签，可以把lang里面的en改成zh-CN

<head>——head标签里面主要放“看不见的东西”

<meta charset="UTF-8">——确认编码，一般都是使用UTF-8，因为这是全人类都通用的编码

<meta name="viewport" content="width=device-width, initial-scale=1.0">——这是防止页面缩放，并兼容手机页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge">——这个表示告诉IE使用最新的内核。

<title>Document</title>——title标签是标题，表示网页的主题

<body>——body标签是主体，接下来的html标签都是写在body里面。

使用VScode的emmet功能可以使用！+tab键自动写出起手式。

常用的章节标签有哪些？它们又分别是什么意思？用法是什么？

常用的章节标签有哪些？

h1~h6：标题
section：章节
p：段落
header：头部
footer：脚步
main：主要部分
aside：旁支部分
div：划分不同部分

常用章节标签的用法

h1~h6 <h1>标题1</h1>
section <section></section>
p <p></p>
header <header></header>
footer <footer></footer>
main <main></main>
aside <aside></aside>
div <div></div>

例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML章节标签的用法</title>
</head>
<body>
    <header>HTML章节标签</header>
    <div>
        <main>
            <h1>章节标签的用法</h1>
            <section>
                <h2>第一章节</h2>
                <p>章节标签有哪些？</p>
            </section>
            <section>
                <h2>第二章节</h2>
                <p>章节标签的用法</p>
            </section>
        </main>
        <aside>此文章参考了XXX</aside>
    </div>
    <footer>HTML章节标签</footer>
</body>
</html>

HTML的全局属性有哪些？

class 类
contenteditable 任意元素可编辑
style 样式这个元素一般是放在head标签里面的，所以无法显示。如何显示“style”：将其放到body标签中，再加上display:block和contenteditable 即可显示并可编辑。
hidden 隐藏
id id属性具有全局唯一性，但是其唯一性不可靠。不到万不得已不要使用id属性。
tadindex 控制tab的顺序。tabindex=1>tabindex=2>tabindex=100 ；tabindex=0——表示最后一个tab；tabindex=-1表示不tab
title 显示完整内容

默认样式

为什么会出现默认样式？

因为在HTML被发明之前，CSS还没有被发明。如果没有默认样式，那HTML的字体和格式就会变成一样的，非常的不美观，所以就出现了默认样式。

默认样式如何查看和修改？

首先打开页面的开发者工具，在Elements这一栏中找到Styles，在找到user agent stylesheet 这个里面的CSS就是默认样式了。user agent就是浏览器。由于默认样式一般都是不太美观，所以我们做前端开发的时候都是需要改掉这个默认样式，也就是CSSreset。一般我们使用两种方式设置CSSreset，一种是老师自己使用的；一种是大厂使用的，比如淘宝页面之类的。例如：

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        *::after, *::before{
            box-sizing: border-box;
        }
        h1,h2,h3,h4,h5,h6{
            font-weight: normal;
        }
        a{
            color: inherit;
            text-decoration: none;
        }
        ul,ol{
            list-style: none;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>

做这么一个CSSreset.css的文件作为你的CSSreset的配置。

常用的内容标签有哪些？它们有什么意思？

ol+li——有序列表

<ol>
    <li>有序列表</li>
</ol>

ul+li——无序列表

<ul>
    <li>无序列表</li>
</ul>

dl+dt+dd——描述列表

<dl>
    <dt>北京</dt>
    <dd>首都</dd>
</dl>

pre——保留空格和回车，使用方法为包裹住目标标签。
code——包裹住代码，使其等宽。
hr——分割线 <hr>自闭合
br——回车 <br>自闭合
em——强调，注重语气的强调，strong标签是注重内容的重要强调
quote——引用（内联）
blockquote——块级引用（换行）