今天在视频里面学习了万维网的历史,还有HTML的演化和常用标签。主要内容如下:
HTML的诞生
HTML全称为超文本标记语言,由蒂姆·伯纳斯-李爵士发明。
HTML起手式
在vscode编辑器中,打感叹号和tab键,即可生成HTML的初始格式:
<!--文档类型-->
<!DOCTYPE html>
<!--HTML语标签,表示语言为中文-->
<html lang="zh-CN">
<!--子元素head-->
<head>
<!--文件的字符编码为UTF-8-->
<meta charset="UTF-8" />
<!--可以防止页面缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!--网页标题-->
<title>my-index-page</title>
</head>
<!--子元素body-->
<body></body>
</html>
常用表章节标签
- 标题:
<h1>~<h6> - 章节:
<section> - 文章:
<article> - 段落:
<p> - 头部:
<header> - 脚注:
<footer> - 主要内容:
<main> - 旁支内容:
<aside> - 划分单元:
<div>
全局属性
即所有标签都拥有的属性,它们可以用于所有元素:
<!--contenteditable="true"即为标签属性-->
<blockquote contenteditable="true">
<p>Edit this content to add your own quote</p>
</blockquote>
常用的属性如下:
class:给标签分类。contenteditable:表示元素可以被用户编辑。hidden:隐藏某个标签。id:给标签添加id。style:给标签添加样式(颜色、字体等)。tabindex:标签中的元素是否可以聚焦,通常用户使用tab键来选择不同的元素。
常用的内容标签
<ol>+<li>:表示多个有序列表项。<ul>+<li>:表示多个无序列表项。<dl>+<dt>+<dd>:包含属于定义和描述的列表。
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.
</dd>
</dl>
<pre>:文本中的空白符(比如空格和换行符)都会显示出来。<hr>:内容中间插入一条水平线。<br>:在文本中换行。<a>:可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
<a href="https://example.com">Website</a>
<em>:在语气上强调,用于改变一个句子的意思(比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>",分别强调喜欢和胡萝卜),通常会被浏览器展示为斜体<strong>:在内容上做强调对一个句子的部分增加重要性(比如 "警告! 这非常危险。"),通常被浏览器展示为粗体。<code>:呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示。<quote>和<blockquote>:代表其中的文字是引用内容。