HTML文档学习(1) | 青训营笔记HTML(HyperText Markup Language)不是一门编程语言，而

这是我参与「第四届青训营」笔记创作活动的的第3天

什么是HTML

HTML(HyperText Markup Language)不是一门编程语言，而是一种用来镐子浏览器如何组织页面的标记语言它由一系列元素(elements)组成。

剖析一个 HTML 元素

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。
内容（Content）：元素的内容，本例中就是所输入的文本本身。
元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。

元素类别

在HTML中有两种重要元素类别，块级元素和内联元素。

块级元素

在页面中以块的形式展现，他独占的一行。通常用于展示页面上结构化的内容，段落<p>,列表<ul>,导航菜单<nav>,页脚<footer>等

内联元素

内联元素通常出现在块级元素中，不是一整个段落或一组内容。内联元素不会导致文本换行，通常出现在一堆文字之间超链接<a>,强调<em>

例如

<em>第一</em><em>第二</em><em>第三</em>
<p>第四</p><p>第五</p><p>第六</p>

`<head>`标签里有什么？

在页面加载完成的时候，<head>标签里的内容，是不会在页面中显示出来的。它包含了其他标签比如<titel><link><meta>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>我是标题元素</title>
  </head>
  <body>
    <p>我是段落元素</p>
  </body>
</html>

`<title>`

为网页添加标题，在网页搜索中，和网页收藏中作为结果

`<meta>`

charset="utf-8"
指定文档的字符编码，尽量使用utf-8，一些其他的字符集会导致页面出现乱码
name和content属性
name指定meta元素的类型，content指定实际内容

<meta name="author" content="Chris Mills">

例如提供作者名字，当页面遇到一些问题时可以联系作者

<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">

提供页面描述，可以在搜索引擎散出现更多描述(SEO)

`<link>`

现在HTML，CSS与JavaScrpt 几乎不会分开，都会一起使用让网页有更多交互和特效 <link>元素一般出现在文档的标签内，有两个属性

rel
rel="stylesheet"表明这是文档样式表
href
href="src/style.css"指向样式表的路径

<link rel="stylesheet" href="src/style.css">

HTML文字处理

html中有很多不同的内容标签，内容结构化会始得读者浏览更轻松

标题元素标签

<h1><h2><h3><h4><h5><h6>
一共有六种，从1到6一次表示文档的不同级别内容，<h1>表示主标题,<h2>表示二级标题等等。

列表Lists

列表大致分为三类

无序Unordered

<ul>
  <li>吃饭</li>
  <li>睡觉</li>
  <li>打豆豆</li>
</ul>

有序Ordered

<ol>
  <li>起床</li>
  <li>洗脸</li>
  <li>刷牙</li>
  <li>吃早饭</li>
</ol>

自定义Definition

<dl>
  <dt>西瓜</dt>
  <dd>一种甜甜的水果</dd>
  <dt>薯片</dt>
  <dd>一种高热量零食</dd>
</dl>

强调

`<em>`emphasis

<span>你今天真是太<em>准时</em>了!</span>
你今天真是太准时了!

`<strong>`strong importance

<p>长期接触放射性元素，会导致<strong>死亡</strong></p>

长期接触放射性元素，会导致死亡

`<a>`超链接

超链接可以跳转到其他网页，也能定位到网页某个位置

超链接解析

使用href属性来创建几个基本链接 <a>href="https://juejin.cn/user/2626096100815336" title ="急鲨车的主页">我的掘金首页</a>
我的掘金首页

使用title属性添加信息
鼠标悬停在链接上，会出现title信息

块级链接

你可以把一些块级元素比如<img><div>放到<a>标签中，这时点击块元素也可以跳转

<a href="" title="点我试一试">
    <img src="" alt="">
</a>

文档片段

给要链接的元素设置一个id属性，然后即可跳转

<a href='#start'>点我回到开始</a>

点我回到开始

HTML文档学习(1) | 青训营笔记