阅读 35

HTML入门笔记

提要:

  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>
复制代码
文章分类
前端
文章标签