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

HTML基本知识

基本标签结构：

<标签名 属性名1="属性值1" 属性名2="属性值2" ...>内容</标签名>

例如：

<p>Hello, world!</p>
<img src="photo.jpg">

HTML基本结构

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>标题</title>
    </head>
    <body>
        ...
    </body>
    </body>
</html>

<head>下的标签：元数据
- <meta charset="UTF-8">: 字符集使用UTF-8
- <title>: 网页标题

DOM树：HTML会被浏览器解析为DOM树

语法要点

标签和属性不区分大小写，建议小写
属性值使用双引号包裹

开发原则

开发者应当遵从语义进行编写（解决代码可读性、可维护性、提升无障碍性、便于搜索引擎优化）
- 了解每个标签和属性的含义
- 思考什么标签最适合内容
- 不使用可视化工具生成代码

常用标签

内容相关

段落（paragraph）
```
<p>
    content
</p>
```

标题（heading）

<h1>first level title</h1>
<h6>the last level</h6>

有序列表（ordered list）
```
<ol>
    <li>item1</li>
    <li>item2</li>
</ol>
```
- li is short for list item

无序列表（unordered list）

<ul>
    <li>item</li>
    <li>litem</li>
</ul>

描述列表（description list）

<dl>
    <dt>item1</dt>
        <dd>description11</dd>
        <dd>description12</dd>
    <dt>item2</dt>
        <dd>description21<dd>
        <dd>description22</dd>
</dl>

dt for description terms
dd for description definition

链接（anchor）
```
<a href="url">content</a>
```

多媒体

<img src="url">
<video src="url"></video>
<audio src="url"></audio>

块引用

<blockquote cite="the reference url">
    something
</blockquote>

短引用
```
<cite>content</cite>
```
前文引用
```
<pre>content</pre>
```

强调

<strong>content</strong> <!-- 强调语义上的重要 -->
<em>content</em> <!--目的是突出显示-->

输入相关

单行输入
```
<input>
```
- 可选属性
  - placeholder控制输入框内显示的文字
  - type: 控制输入形式，默认为文本框输入，如type值为range时为滑动条输入，number为数字输入，date为日期输入，checkbox多选，radio单选
多行文本输入
```
<textarea>Hint here</textarea>
```

下拉选择器：

<select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

既支持输入，又支持选择的输入框

<input list="listname">
<datalist id="listname">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</datalist>

页面结构

html page.png

header: 页眉
- nav：导航栏
main：主页面（应当只有一个）
aside：侧边栏
footer：页脚

总结

HTML本身为一个用于结构化Web内的内容的标记语义，整体学习难度较低，重点在于掌握语义化编写的原则。为此，需要一些对标签的记忆以及对标签含义的理解。

HTML基础 | 青训营笔记