1.HTML 介绍
- HTML的英文全称是 Hyper Text Marked Language，即超文本标记语言。
- HTML是由Web的发明者Tim Berners-Lee和同事Daniel W. Connolly于1990年创立的一种标记语言。
- Tim Berners-Lee还成立了万维网联盟(W3C)，并担任万维网联盟的主席。万维网的主要工作也是围绕HTML开展。
2.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>
3.常用的表章节的标签介绍
-
- h1、h2、h3、h4、h5、h6
用来表示文章的标题，按照标题的等级，一共分成六级。
<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>。
-
- section
<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>。
-
- article
<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(<h1>到<h6>)。
-
- p
<p>标签是一个块级元素，代表文章的一个段落(paragraph)。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<p>元素。
-
- header
<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
-
- footer
<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。
-
- main
<main>标签表示页面的主体内容，一个页面只能有一个<main>。
-
- aside
<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置评论或注释。
-
- div
<div>是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。
4.全局属性介绍
-
- class(类属性)
class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。
-
- contenteditable（可编辑）
HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。
-
- hidden
hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。
-
- id
id属性是元素在网页内的唯一标识符。
-
- style
style属性用来指定当前元素的 CSS 样式。
-
- tableindex
网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停按下 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
这里就有一个问题，按下 Tab 键的时候，浏览器怎么知道跳到哪一个元素。HTML 提供了tabindex属性，解决这个问题。它的名字的含义，就是 Tab 的顺序（index）。
tabindex属性的值是一个整数，表示用户按下 Tab 键的时候，网页焦点转移的顺序。不同的属性值有不同的含义。
负整数：该元素可以获得焦点（比如使用 JavaScript 的focus()方法），但不参与 Tab 键对网页元素的遍历。这个值通常是-1。
0：该元素参与 Tab 键的遍历，顺序由浏览器指定，通常是按照其在网页里面出现的位置。
正整数：网页元素按照从小到大的顺序（1、2、3、……），参与 Tab 键的遍历。如果多个元素的tabindex属性相同，则按照在网页源码里面出现的顺序遍历。
-
- title
title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。
5.常用的内容标签介绍
-
- ol
<ol>标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。列表项的顺序有意义时，比如排名，就会采用这个标签。
-
- ul
<ul>标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。列表项的顺序无意义时，采用这个标签。
-
- dl+ dt + dd (description list + term + data)
<dl>标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由<dt>标签定义，术语解释（description detail）由<dd>标签定义。<dl>常用来定义词汇表。
-
- li
<li>表示列表项，用在<ol>或<ul>容器之中。
-
- pre (preview 的缩写)
<pre>是一个块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。
-
- hr
<hr>用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。
-
- br (break 的缩写)
<br>让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。
-
- a(anchor的缩写)
链接通过
<a>标签表示，用户点击后，浏览器会跳转到指定的网址,<a>标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。
-
- em(emphasis的缩写)
<em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。
-
- strong
<strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。
-
- code
<code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。
-
- q(quote 的缩写)
<q>是一个行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。
-
- blockquote
<blockquote>是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。
