HTML入门笔记

LLLLxto
119 阅读3分钟

提要：

  1. HTML简介
  2. HTML起手式
  3. 常用的章节标签
  4. 全局属性
  5. 常用的内容标签

1. HTML简介

超文本标记语言 (HyperText Markup Language, 简称: HTML)，是一种用于创建网页的标准标记语言。
网页浏览器可以读取HTML文件，并将其渲染成可视化网页。
HTML的首个公开描述出现于一个名为HTML Tags的文件中，由蒂姆·伯纳斯-李于1991年底提及。
文件扩展名为.html或.htm。

2. HTML起手式

VScode
→ 新建文件：index.html
→ 输入：!(Tab/回车)
返回：

<!DOCTYPE html>                                             文档类型为html
<html lang="en">                                            语言为英语
<head>
    <meta charset="UTF-8">   字符类型为UTF-8
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   IE升级至最新版
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  防止页面缩放
    <title>Document</title>                                 标题
</head>
<body>
    
</body>
</html>

3. 常用的章节标签

1) h1,h2,h3,h4,h5,h6

标题元素

h1级别最高，h6级别最低

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

2) header

表示页头，用于展示介绍性内容

可能包含一些标题元素，也可能包含其他元素，如 Logo、搜索框等。

3) footer

表示页脚

通常包含版权数据、与文档相关的链接等。

4) main

主体元素，呈现主体部分

5) aside

表示一个和其余内容无关的部分

通常表现为侧边栏或标注框。

6) article

表示文档或应用中一个可独立分配的或可复用的独立结构。

可能是论坛帖子、新闻文章、博客、用户提交的评论、交互式组件等。

7) section

表示一个独立章节

一般会包含一个标题。
如果内容可以单独在多个媒体上发表，应该使用article而不是section。
不要把section元素作为一个普通的容器来使用，这是本应该是div的用法。

8) div

文档划分元素，一个通用的内容容器

9) p

段落元素m，表示文本的一个段落

4. 全局属性

全局属性是所有标签共有的属性。

1) class

给元素做分类标记，用以选择或访问

<div class="middle blue">
    ……
</div>

调用：

[class="middle blue"]{      必须写全称
    background:blue;
}

或者

.middle{                   只要含middle就能选中 
    background:blue;
}

2) id （不推荐）

定义一个全文档惟一的标识符(ID)，用以选择或访问

<header id="xxx">
    ……
</header>

调用：

[id="xxx"]{
    ……
}

或者

#xxx {
    ……
}

3) contenteditable

可在用户页面编辑

<div contenteditable>
    ……
</div>

4) hidden

不显示此元素

<header hidden>
    ……
</header>

5) style

CSS样式声明

样式最好定义在单独的文件中，style属性、style标签的主要目的是快速装饰。
style属性优先级高于style标签。

<header id="xxx" style="border: 2px solid blue;">
    ……
</header>

6) tabindex

实现用Tab键聚焦到指定元素

tabindex = 1
tabindex = 2
tabindex = 3
……
特殊值：
tabindex = 0 聚焦顺序上的最后
tabindex = -1 不聚焦到此元素

<header tabindex=1>
    ……
</header>

7) title

作为提示信息 (不是必要)

提供一种使用场景：
一行文字过长，设置不自动换行，并省略超出长度的内容，令鼠标停留在此行时显示完整内容。

<header id="xxx" title="balabal……">
    balabal……
</header>

#xxx {
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
}

5. 常用的内容标签

1) ol + li

有序列表

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

2) ul + li

无序列表

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

3) dl + dt + dd

描述列表

<dl>
    <dt>描述对象</dt>
    <dd>描述内容</dd>
</dl>

4) pre

空白符（空格/换行/Tab）显示

连续空白符会在用户页面自动缩为一个空格。

5) code

代码呈现

默认情况下，以浏览器的默认等宽字体显示。
code通常结合pre以保留换行。

<pre>
    <code>
        var a = 1;
        console.log(a)
    </code>
</pre>

6) hr

分隔线

……
<hr>

7) br

生成一个换行 (回车) 符号

在写诗和地址时很有用。

……<br>
……

8) a

超链接

<a href="//taobao.com">
    TB
</a>

9) em

需要着重阅读，语气强调，显示为斜体

10) strong

内容重要，显示为加粗

<p>
我们 <em> 期末考试 </em> 的重点是 <strong> HTML </strong>
</p>

11) q

行内引用

12) blockquote

块级引用

<blockquote>
    这是引用的段落
</blockquote>
avatar
文章
阅读
粉丝