一、本课堂重点内容：

• 前段的定义
• html的基础语法

二、详细知识点介绍

html的理解

- hypertext          markup language
超文本语言，可以具体    这里使用的是标签类语言
解释为图片、标题、
链接、表格

html的语法

1. html一些默认的规范

• 标签名一般都是小写
  

• input、meta这些标签本身里边不会再放其他内容的，可以不闭合。就是结尾可以用/>
  

• 属性值一般推荐使用双引号包裹
  

2. 列表

• <ol>表示有序列表，<li>表示表项
• <ul>表示无序列表<li>表示表项
• <dl>表示定义列表的框架<dt>表示表项前的标题<dd>表示具体的描述。
  • dl
    • dt
      • dd
      • dd
      • dd
    • dt

3.链接

使用a标签，这里有个常用的属性是href，就是放置跳转的链接。 还有一个属性target，它的值为“_blank”的时候，可以打开一个新的窗口链接

```html
<a href="https://www.bytedance.com">
字节跳动官网
</a>
<a href="https://www.bytedance.com" 
target="_blank">
字节跳动官网
</a>
```

4.多媒体

可以插入图片、语音、视频分别对应img、audio、video标签

• img标签

  alt的属性可以理解为，当网不好或者用户开启省流量模式，默认不加载图片的时候，我们不能让这个图片就这么空着，可以给这个图片一个名字，让用户知道这张图片的主题是什么。width属性可以设置图片的大小

  <img src="url" alt="description" width="400">
  

• audio标签和video标签

  它们的模版类似，设置controls可以理解为让用户拉进度条,注意是controls加s

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

5. 输入选择

input标签

• palceholder属性，类似于提示语
• type属性的值
  • 值为range时，表示可以拉进度条
  • 值为number时，输入类型是数字，可以设置min和max，表示可选数字区间
  • 值为date时，输入类型可以是日期，这里也可以设置最小输入时间

textarea标签

• 输入文本框

<input placeholder="请输入用户名">
<input type="range">
<input type="number" min='1' max='10'>
<input type="date" min="2018-02-10">
<textarea>Hey</textarea>

6. 多选项

• 复选框，令input的type为checkbox，如果想要默认选中，使用checked
• 单选框，令input的type为radio，起同一个名字达到互斥的效果
• 下拉选择，select标签，表项用option
• 想让用户下拉选项就可以进行模糊查询，使用input给他的属性list设置一个名字，让datalist标签的id和这个名字一致，用datalist代替select，表项还是option。需要用id。格式如下：

<p>
    <label><input type="checkbox"></label>
    <label><input type="checkbox" checked>平果</label>
</p>
<p>
    <label><input type="radio" name="sport">⚽️</label>
    <label><input type="radio" name="sport">🏀</label>
</p>

<p>
    <select>
        <option>🍌</option>
        <option>🍉</option>
        <option>🍊</option>
    </select>
</p>
<p>
    <input list="countries">
    <datalist id="countries">
        <option>希腊</option>
        <option>美国</option>
        <option>澳大利亚</option>
    </datalist>
</p>

7. 文本类的标签

关于引用的

• Blockquote常引用，直接引用别人的一段话
• cite标签，短引用，一般是名字，文章
• <q>标签，也是短引用，一般是内容
• <code>标签，代码的引用，也可以用长代码，用<pre><pre>括起来，展示会用等宽字体表示
• 强调的东西，strong/em，strong一般用于强调严重性，紧急性；em在语气方面表达强调，一般比如是用在一段话里需要重读的部分。

8.页面内容整体划分

header就是页头

main里面就是放主要内容

aside可以放的热点，推荐文章

footer标签放一些参考链接，备案信息

html的版本迭代，删除了许多标签，也增加了许多标签。