HTML入门笔记1

174 阅读3分钟

HTML入门笔记1

HTML是网页使用的语言,定义了网页的结构和内容。

全名是超文本标记语言(HyperText Markup Language),由李爵士(Tim Berners-Lee)发明于上世纪90年代。现在正在使用的版本是HTML 5,发布于2014年。

基本概念

<p>是一个标签,绝大部分的标签成对出现。

<p>这里是内容</p> 就是一个元素,所以元素是由开始标签和结束标签组成,用来包含一些内容的。

为HTML提供各种附加信息的就是属性

网页的基本标签

HTML代码的缩进和换行,对于浏览器不产生作用。所以分行写只是为了提高代码可读性。

HTML起手式

<!DOCTYPE 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>

1. <!DOCTYPE>

文档类型,通常是网页的第一个标签,告诉浏览器如何解析网页。

2. <html>

网页的顶层容器,一个网页只能有一个<html>标签。

lang属性,表示网页内容的默认语言,en表示英文,zh-CN表示简体中文。

3. <head>

容器标签,放置网页的元信息。它包起来的内容不会出现在网页上。

4. <meta>

<meta>必须放在<head>里面,用于设置或说明网页的元数据。

charset="UTF-8"表示网页的字符编码为UTF-8,基本上我们总是应该采用UTF-8。

5. <title>

用于指定网页的标题,标签内部只能放置无格式的纯文本。

6. <body>

紧跟在<head>后面,用于放置网页的主体内容。

章节标签

1. <h1>~<h6>

一级标题到六级标题,字体从大到小。

2.<section>

一个章节。

3.<article>

通常用来表示一篇文章。

4.<p>

paragraph,块级元素,表示一个段落。

5.<header>

头部,可以放置顶部广告,导航栏等。

6.<footer>

底部,可放置版权信息申明等。

7.<main>

主要内容。

8.<aside>

旁支内容。

9.<div>

通用标签,表示一个区块。

全局属性

所有元素都可以使用的属性。

1. class

对网页元素进行分类。

2. contenteditable

允许用户修改网页内容。

3. hidden

布尔属性,用来隐藏当前网页的元素。

4. id

id属性的值必须是全局唯一的,但问题在于就算出现两个相同的id也不会有报错提示,并且容易冲突,所以能不用就不用。

5. style

用于指定当前元素的CSS样式。

6. tabindex

Tab的顺序,值为整数,可以不连续。-1表示不参与Tab键的遍历,0表示最后一个访问。

7. title

为元素作附加说明,当鼠标停留在元素上时,值浮现。

常用内容标签

1. <ol>+<li>

ordered list + list item,有序列表。

2. <ul>+<li>

unordered list + list item,无序列表。

3. <dl>+<dt>+<dd>

description list 描述。

4. <pre>

保留空格、回车、Tab。

5. <hr>

水平分隔线。

6. <br>

break 换行。

7. <a>

超链接。

8. <em>

emphasis 语气强调。

9. <strong>

本质强调,默认以粗体显示。

10. <code>

代码,与<pre>标签一起使用可分行写。

11. <quote>

引用。

12. <blockquote>

块级引用。

部分内容引用自> wangdoc.com/html/index.…