《HTML入门笔记1》

135 阅读5分钟

Q: HTML的发明人?

A: Tim Berners-Lee和同事 Daniel W. Connolly

Q: HTML 起手应该写什么

常用的表示章节的标签

1.1<header>

header标签可以用在多个场景,既可以表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。

2.<footer>

footer标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息。

3.<main>

main标签表示页面的主体内容,一个页面只能有一个。

4.<article>

article标签表示页面里面一段完整的内容,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。

5.<aside>

aside标签用来放置与网页或文章主要内容间接相关的部分。

6.<section>

section标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节,比如

可以包含多个。总是多个一起使用,一个页面不能只有一个。

7.h1 ~ h6

HTML 提供了6个标签,用来表示文章的标题。按照标题的等级,一共分成六级。

8.<hgroup>

如果主标题包含多级标题(比如带有副标题),那么可以使用

标签,将多级标题放在其中。

9.<div>

div是一个通用标签,表示一个区块(division)。它没有语义,如果网页需要一个块级元素容器,又没有其他合适的标签,就可以使用这个标签。

10.<p>

<p>标签是一个块级元素,代表文章的一个段落(paragraph)。不仅是文本,任何想以段落显示的内容,比如图片和表单项,都可以放进<p>元素。

全局属性

1.id

id属性是元素在网页内的唯一标识符。比如,网页可能包含多个

标签,id属性可以指定每个

标签的唯一标识符。

2.class

class属性用来对网页元素进行分类。如果不同元素的class属性值相同,就表示它们是一类的。

3.title

title属性用来为元素添加附加说明。大多数浏览器中,鼠标悬浮在元素上面时,会将title属性值作为浮动提示,显示出来。

4.tabindex

网页通常使用鼠标操作,但是某些情况下,用户可能希望使用键盘,或者只有键盘可以用。因此,浏览器允许使用 Tab 键,遍历网页元素。也就是说,只要不停按下 Tab 键,网页的焦点就会从一个元素转移到另一个元素,选定焦点元素以后,就可以进行下一步操作,比如按下回车键访问某个链接,或者直接在某个输入框输入文字。这里就有一个问题,按下 Tab 键的时候,浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性,解决这个问题。它的名字的含义,就是 Tab 的顺序(index)。

5.accesskey

accesskey属性指定网页元素获得焦点的快捷键,该属性的值必须是单个的可打印字符。只要按下快捷键,该元素就会得到焦点。

6.style

style属性用来指定当前元素的 CSS 样式。

7.hidden

hidden是一个布尔属性,表示当前的网页元素不再跟页面相关,因此浏览器不会渲染这个元素,所以就不会在网页中看到它。

8.lang,dir

lang属性指定网页元素使用的语言。

9.contenteditable

HTML 网页的内容默认是用户不能编辑,contenteditable属性允许用户修改内容。它有两个可能的值。

10.spellcheck

浏览器一般会自带拼写检查功能,编辑内容时,拼错的单词下面会显示红色的波浪线。spellcheck属性就表示,是否打开拼写检查。

11 data-属性

data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据,就可以放在data-属性。

常用的内容标签

1.<ol> + <li>

<ol>标签是一个有序列表容器(ordered list),会在内部的列表项前面产生数字编号。列表项的顺序有意义时,比如排名,就会采用这个标签。

2.<ul> + <li>

<ul>标签是一个无序列表容器(unordered list),会在内部的列表项前面产生实心小圆点,作为列表符号。列表项的顺序无意义时,采用这个标签。

3.<li>

<li>表示列表项,用在<ol><ul>容器之中。

4.<dl><dt><dd>

<dl>标签是一个块级元素,表示一组术语的列表(description list)。术语名(description term)由<dt>标签定义,术语解释(description detail)由<dd>标签定义。<dl>常用来定义词汇表。

5.<pre>

<pre>是一个块级元素,表示保留原来的格式(preformatted),即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

6.<hr>

<hr>用来在一篇文章中分隔两个不同的主题,浏览器会将其渲染为一根水平线。该标签是单独使用的,没有闭合标签。

7.<br>

<br>让网页产生一个换行效果。该标签是单独使用的,没有闭合标签。

8.<a>

链接通过<a>标签表示,用户点击后,浏览器会跳转到指定的网址。

9.<em>

<em>是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容。

10.<strong>

<strong>是一个行内元素,表示它包含的内容具有很强的重要性,需要引起注意。浏览器会以粗体显示内容。

11 <code>

<code>标签是一个行内元素,表示标签内容是计算机代码,浏览器默认会以等宽字体显示。

12 <q>

<q>是一个行内标签,也表示引用。

13 <blockquote>

<blockquote>是一个块级标签,表示引用他人的话。浏览器会在样式上,与正常文本区别显示。