HTML 标签入门

TK
152 阅读2分钟

HTML 是谁发明的?

HTML超文本标记语言，是一种用于创建网页标准的标记语言。由蒂姆·伯纳斯-李（Tim Berners-Lee）1990年创立。

HTML 起手应该写什么

<!DOCTYPE html>	表示指定文档类型为HTML5
<html lang="en">	设定主语言，中文需把en改为"zh-CN"
<head>
    <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">	禁用缩放，兼容手机
    <title>Document</title>
</head>
<body>
    
</body>
</html>

HTML 章节标签（常用）

  • 标题 h1~h6
  • 章节 section
  • 文章 article
  • 段落 p
  • 头部 header
  • 脚部 footer
  • 主要内容 main
  • 旁支内容 aside
  • 划分 div (块级元素)

HTML 全局属性

所有标签都有属性

属性描述
class给标签分类（标记）
contenteditable可以使任何元素可以被编辑
hidden对元素进行隐藏
id元素唯一的id
style元素的行内样式
tabindex设置元素的 Tab 键控制次序
title规定元素的额外信息（可在工具提示中显示）

【注】最好别用 id，因为它不报错，CSS和 Javascript 里用 class 就够了。

【注】tabindex 值：

  1. 为正整数时Tab键按顺序访问
  2. 为0时表示最后被访问
  1. 为负整数时不参与访问

HTML 默认样式

  • 不同浏览器拥有各自的默认样式
  • 怎么看默认样式

在Chrome开发者工具中查看

Elements->Styles->user agent stylesheet

  • User Agent

就是浏览器

  • CSS reset

默认样式已经不符合我们的需求了。

HTML 内容标签（常用）

<ol>+<li> 有序列表

  • （ ordered list+list item )
<ol>
  <li>知乎</li>
  <li>B站</li>
  <li>微博</li>
</ol>

#### <ul>+<li> 无序列表

  • (unordered list + list item)
<ul>
	<li>橘子</li>
	<li>葡萄</li>
	<li>西瓜</li>
</ul>

<dl>+<dt>+<dd> 描述列表

  • (description list + term + data)
<dl>
  <dt>CPU</dt>
  <dd>中央处理器</dd>

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

  <dt>Hard Disk</dt>
  <dd>硬盘</dd>
</dl>

<pre> 预格式化文本 （preformatted）

  • 保留空格和换行符、字体等宽。
<pre>
此例演示如何使用 pre 标签
对空行
和     空格
进行控制
</pre>

<hr> 水平线

<br> 换行 (break)

<a> 超链接 (anchor)

<a href="https://wikipedia.org/">维基百科</a>

<em> 表示强调，默认样式斜体 (emphasis)

<p>我们<em>已经</em>讨论过这件事情了。</p>

<strong> 表示内容本身的强调，浏览器默认样式粗体

<p>开会时间是<strong>下午两点</strong>。</p>

<code> 代码

  • 如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。
<code>alert()</code>的作用是让网页弹出一个提示框。

<pre>
<code>
  let a = 1;
  console.log(a);
</code>
</pre>

<blockquote> 块引用

  • <blockquote>标签有一个cite属性，它的值是一个网址，表示引言来源，不会显示在网页上。
<blockquote cite="https://quote.example.com">
  <p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>

<q> 行引用 (quote)

  • 它与<blockquote>的区别，就是它不会产生换行。
<p>
  莎士比亚的《哈姆雷特》有一句著名的台词：
  <q cite="https://quote.example.com">活着还是死亡，这是一个问题。</q>
</p>
avatar
文章
阅读
粉丝