阅读 133

HTML入门笔记1

HTML 的全名是超文本标记语言(HyperText Markup Language),是万维网之父 Tim Berners-Lee 在上世纪90年代发明的,一种用来结构化 Web 网页及其内容的标记语言。浏览器访问网页,就是从服务器下载 HTML 代码,然后渲染出网页的过程。

HTML起手式

在编辑器中新建一个 HTML 文件,输入 ! 按下 Tab 键,Emmet 会自动补全 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>
复制代码

<!DOCTYPE html> 表示文档类型声明,告诉浏览器该如何解析这个网页。

<html> 标签是网页的根元素,其他元素都是它的子元素。一个网页只能有一个 <html> 标签。该标签的 lang 表示网页内容的默认语言,若要默认显示中文,将 enzh-CN 即可。

<head> 于放置网页的一些元信息,一般不会出现在网页上。

  • <meta> 来设置网页的一些元数据,<meta charset="UTF-8"> 明了当前文档的字符编码(字符编码声明应与该文档实际使用的字符编码一致,否则将会出现乱码)。
  • <meta http-equiv="X-UA-Compatible" content="IE=edge"> 示告诉IE使用最新的浏览器内核。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 示禁用缩放,兼容手机。user-scalable=no 这个 content 表示禁用缩放,name=viewportmeta 标签是用来作视口设置的。

*<title> 是网页的标题,会显示在浏览器窗口的标题栏。

常用的标签

表章节的标签

用来表示网页层级,下面是一些常用的表章节的标签:

  1. <h1> ~ <h6> 定义了从大到小的标题。

  2. <section> 表示一个包含主题的独立部分,通常表示网页的一个章节。

  3. <article> 表示文档、页面、应用或网站中的独立结构。

  4. <header> 用来表示网页的头部或者一个文章或者区块的头部,一个页面可以包含多个 <header>,但一个具体的场景只能包含一个 <header>

  5. <fooer> 表示网页或者文章尾部。

  6. <main> 表示网页的主体,一个网页只能有一个。

  7. <p> 表示文本中的一个段落。

  8. <aside> 表示旁支内容,与页面其他内容几乎无关,可以单独拆分出来而整体不受影响。通常表现为侧边栏或者标注框。

  9. <div> 用来做划分,语义上不表示任何特定内容。

表内容的标签

  1. <ol><li>

有序列表,两个标签要嵌套使用

<ol>
  <li>列表内容1</li>
  <li>列表内容2</li>
  <li>列表内容3</li>
</ol>
复制代码

渲染结果如下

有序列表.jpg

  1. <ul><li>

无序列表,两个标签要嵌套使用

<ol>
  <li>列表内容1</li>
  <li>列表内容2</li>
  <li>列表内容3</li>
</ol>
复制代码

渲染结果如下

image.png

  1. <dl>,<dt>,<dd>

<dl> 标签是描述列表,术语名由 <dl> 定义,术语解释由 <dd> 定义。

<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

  <dt>Memory</dt>
  <dd>内存</dd>

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>
复制代码

渲染结果如下

image.png

  1. <pre>

HTML会将多个连续的空格或回车缩减成一个空格,若想保留这些空格,放在<pre>内部即可。

  1. <code>

用来展示计算机代码,默认等宽字体显示。若想展示多行代码,需放在 <pre> 内部。

  1. <hr> 表示分隔线。

  2. <br> 用来换行

  3. <a> 标签用来表示一个跳转链接。

  4. <em><strong>

均表示强调,区别是 <em> 表示语气上的强调,<strong> 表示内容上的强调。

  1. <quote><blockquote>

均表示引用,区别是 <quote> 是内联引用,<blockquote> 是块级引用。

全局属性

全局属性是任何标签都具有的属性。以下是常用的一些全局属性:

  1. class 属性用来对标签分类,一个标签可以有多个 class,它们中间用空格隔开。
  2. contenteditable 属性允许用户修改网页内容(HTML网页的内容默认是用户不可编辑)。
  3. hidden,一个元素设置了这个属性,它就不会被显示。
  4. id 属性定义了一个全文档唯一的标识符。可以用来在 CSS 中加样式,也可以用来在 JS 中获取元素。
  5. style 属性用来指定当前元素的 CSS 样式。优先级高于 CSS,但会被 JS 覆盖。
  6. tabindex 属性可以使用户使用tab键来遍历网页元素。属性为正整数,会按照1、2、3... 的顺序来遍历;属性值为0,表示最后访问;属性值为负整数时,表示不访问。
  7. title 属性用来为元素添加附加说明,鼠标浮在元素上面,就会显示 title 的属性值。
文章分类
前端
文章标签