学习HTML最好的方式就是边学边做实验
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值:
- 为正整数时Tab键按顺序访问
- 为0时表示最后被访问
- 为负整数时不参与访问
HTML 默认样式
- 不同浏览器拥有各自的默认样式
- 怎么看默认样式
在Chrome开发者工具中查看
Elements->Styles->user agent stylesheet
- User Agent
就是浏览器
- CSS reset
默认样式已经不符合我们的需求了。
常见的CSS reset
- 方方经常用的代码
- 抄大厂代码
- 进入大厂首页
- Chrome开发者工具,找到类似代码
- 复制到自己的项目
- 命名为reset.css
HTML 内容标签(常用)
+- 有序列表
(ordered list+list item)
<ol>
<li>知乎</li>
<li>B站</li>
<li>微博</li>
</ol>
- +
- 无序列表
(unordered list + list item)
<ul>
<li>橘子</li>
<li>葡萄</li>
<li>西瓜</li>
</ul>
- +
- +
- 描述列表
(description list + term + data)
<dl>
<dt>CPU</dt>
<dd>中央处理器</dd>
<dt>Memory</dt>
<dd>内存</dd>
<dt>Hard Disk</dt>
<dd>硬盘</dd>
</dl>
- 预格式化文本 (preformatted)
保留空格和换行符、字体等宽。
<pre>
此例演示如何使用 pre 标签
对空行
和 空格
进行控制
</pre>
水平线
换行 (break)超链接 (anchor)
表示强调,默认样式斜体 (emphasis)
<p>我们<em>已经</em>讨论过这件事情了。</p>
表示内容本身的强调,浏览器默认样式粗体
<p>开会时间是<strong>下午两点</strong>。</p>
代码
如果要表示多行代码,
标签必须放在
内部。
本身仅表示一行代码。
```html
alert()
的作用是让网页弹出一个提示框。
let a = 1;
console.log(a);
-
<a name="MDTfF"></a>
#### <blockquote> 块引用
- <blockquote>标签有一个cite属性,它的值是一个网址,表示引言来源,不会显示在网页上。
```html
<blockquote cite="https://quote.example.com">
<p>天才就是 1% 的天赋和99%的汗水。</p>
</blockquote>
行引用 (quote)
- 它与
的区别,就是它不会产生换行。<p>
莎士比亚的《哈姆雷特》有一句著名的台词:
<q cite="https://quote.example.com">活着还是死亡,这是一个问题。</q>
</p>