HTML入门 | 青训营(一)HTML 1. 简介 HTML （Hyper Text Markup Language

(一)HTML

1. 简介

HTML （Hyper Text Markup Language）是超文本标记语言，用于描述网页的结构和内容。通过使用不同的标签，可以定义网页中的标题、段落、图像、链接、表格等元素HTML 提供了一种层次结构来组织网页内容，并且是所有网页的基础。HTML 的作用仅仅是将信息进行语义化，使浏览器能够正确解析并显示网页的内容。

2. 语法（大概）

标签和属性不区分大小写，但推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

3. 语法（详情）

3.1 标题

标题 h1~h6

3.2 列表

order list

<ol>
  	<li> 一号</li>
  	<li> 二号</li>
</ol>

unorder list

<ul>
	<li> 一号</li>
	<li> 二号</li>
</ul>

definition list

<dl>
	<dt>导演</dt>
	<dd>A</dd>
	<dt>主演阵容</dt>
	<dd>演员1</dd>
	<dd>演员2</dd>
</dl>

3.3 链接

直接跳转

<a herf="https://www.baidu.com/">
百度网站
</a>

打开新窗口跳转

<a herf="https://www.baidu.com/"
target="_blank"><!--非替换，重新打开一个窗口-->
百度网站
</a>

3.4 图音视

图片

<img
  src="https://th.bing.com/th?id=ABT8BB316930B2E37C6DE5A58AD69E8B1D44BBBE68F8C5A21E31C40BE8047B4298B&w=608&h=160&c=2&rs=1&o=6&dpr=2&pid=SANGAM"
  alt="巴拿马圣布拉斯群岛"<!--当图片无法展示时代替显示的文本-->
  width="400"
/>

音频

<audio 
  src="/assets/music.ogg"
  controls
></audio>

视频

<video
       src="https://www.bilibili.com/video/BV1PP41167PY/?spm_id_from=333.1007.tianma.18-3-69.click&vd_source=2cd7f3cd3cf3acdc90380e6fd24c9690"
	  controls
></video>

3.5 输入

```html

<input placeholder="请输入用户名"> 
<input type="range"> 
<input type="number" min="1" max="10">
<input type="date" min="2003-08-19">
<textarea>Hey</textarea>
```

***

3.6 选择

多选

<p>
    <label><input type="checkbox"/>小苹果</label>
    <label><input type="checkbox" checked />小梨子</label>
</p>

<p>
        <label><input type="checkbox" />小苹果</label>
        <label><input type="checkbox"  />小梨子</label>
</p>

单选
```
<p>
        <label><input type="radio" name="fruits" />小苹果</label>
        <label><input type="radio" name="fruits" />小梨子</label>
</p>
```
注：
- 把标签的 type 属性设置为 ==radio== 可以表示==单选按钮==
- 单选按钮要想被正确提交，也必须设置 ==name== 属性，当 ==name 属性值相同==而且 ==type 属性为 radio== 时，浏览器会认为是相同字段，默认只能选择一个

下拉选择

<p>
    <select>
        <option>淀粉</option>
        <option>蛋白质</option>
        <option>碳水</option>    
    </select>
</p>

自由输入，给提示

<input list="country"/>
<datalist id="country">
	<option>Greece</option>
	<option>UK</option>	
    <option>US</option>
</datalist>

3.7 文本处理

3.7.1 文本引用

块级引用元素blockquote

德纳利山，也被称为麦金利山，是北美最高的山峰，位于阿拉斯加中南部。德纳利的山峰海拔6，190米（20，310英尺），是七座山峰（七大洲最高的山峰）中的第三高峰

<blockquote cite="https://education.nationalgeographic.org/resource/denali/">
    <p>德纳利山，也被称为麦金利山，是北美最高的山峰，位于阿拉斯加中南部。德纳利的山峰海拔6，190米（20，310英尺），是七座山峰（七大洲最高的山峰）中的第三高峰</p>
</blockquote>

标签

我喜欢读的书是小王子
```
<p>我喜欢读的书是<cite>小王子</cite></p>
```
- 按照惯例，引用的文本将以==斜体==显示。
- 一般表示作品和章节
标签：引号

nothing or anything
```
<q>nothing or anything</q>
```

3.7.2 代码

<p><code></code></p>短代码标签

const声明创建只读常量

<p><code>const</code>声明创建只读常量</p>

长代码




con=1



<pre><code>
con=1
</code></pre>


3.7.3 强调


事件强调
<p><strong></strong></p>

<p>生活很<strong>重要</strong></p>



语气强调
<p><em></em></p>

<p>cats <em>are</em> our friends</p>



推荐阅读mdn