HTML5基础知识点

VS Code代码编辑器(IDE)

1. Ctrl+鼠标滚轮缩放字号(设置中有相关选项，将其打开)
2. Sublime插件:在插件选项中安装
   • Ctrl+Shift+D:复制当前行
   • Ctrl+Shift+↑:上移当前行
   • Ctrl+Shift+↓:下移当前行
3. 多行编辑：按住鼠标滚轮，下拉。

HTML5基础语法

HTTP协议

  HTTP协议(超文本传输协议)：由一次HTTP事务由HTTP请求和HTTP响应构成

创建网页

  Ctrl+N：新建文件；!+Tab在html文件快捷创建HTML骨架

网页关键词和页面描述

  <DOCTYPE html>:文档类型声明(DTD)

  html文件第一行必须是DTD

  <meta>标签的两个属性：name用来设置meta的具体功能，content来设置网页的描述

<meta name="keywords" content="前端，后端，环境搭建">

<meta name="description" content="本篇文章描述了。。。。。">

HTML特性

空白折叠现象

1. 文字和文字之间的空格、换行会被折叠成一个空格。
2. 标签“内壁”与标签内文字之间的空格会被忽略。

转义字符

1. >大于号
2. <小于号
3.   空格
4. © 版权符号

HTML标签

列表标签

1. 有序列表(<ol>)：可以设置type属性，用来设置编号的类型

   • a: 小写英文
   • A: 大写英文
   • i: 小写的罗马数字
   • I: 大写的罗马数字
   • 1: 数字

2. start属性: 必须是一个整数，用来指定列表编号起始值；reversed属性：列表倒序显示。最好不要和start属性连用

3. 定义列表<dl>,<dt>,<dd>：只要语义上有“解释说明”的含义，并且为列表状态，最好使用定义列表。

超链接<a>

1. 在新窗口打开网页------设置属性target=blank
2. 页面内锚点
   • 先给想添加锚点的标签添加id属性(这种便签一般为h系列的标签)
   • a标签的href值设置为(#+id属性值)
   • 当a标签的href值为url时，我们也可以在这个url后面加上#+id属性值(目标url的页面锚点)。这样我们跳转到目标网页时可直接到达想要的目标位置，而不是目标网页的顶部。
   • href值为#top时，点击可直接到达页面顶部
3. 当href值指向index.zip等文件类型格式的链接，将自动变为下载链接。
4. 亦可以将a标签设置为邮件链接以及电话链接，当用户点击时，将自动调出相应功能的软件或程序。

//b.html
<h1 id='myname'>小宏</h1>

//a.html
<a href='b.html#myname'></a>

//点击直接到达顶部
<a href='#top'></a>

//邮件链接：自动打开email相关程序
<a href='mailto:12234556@qq.com'></a>

//电话链接：自动打开拨号盘(常用于手机端)
<a href='tel:17845459999'></a>

音频、视频标签

//音频标签
<audio src='1.mp3(这里也支持.ogg格式的文件)' controls>请升级浏览器(浏览器不支持时才会看到这句话)</audio>

//autoplay属性：不用设置属性值，意义为自动播放
//loop属性：不用设置属性值，意义为循环播放

//视频标签(与<audio>功能相似)
<video src='1.mp4'></video>

表单标签

<form action='a.php'>
    <input type="text" /> //单行文本框
    <input type="radio" /> //单选按钮
    <input type="checkbox" /> //复选框
</form>

常用的表单属性

  上面的3种为常用的表单标签，下面是一些常用的表单属性：

• value：已经填写的值。上面三种都需要设置，因为向服务器提交的就是它的值。
• placeholder：提示文字
• disabled：锁死，无法选中
• checked：用于radio、checkbox，表示默认被选中。
• name：很重要的属性值，要习惯给每个写的表单标签起个名字。比如：radio常常在一个form中会有很多个，所以我们要给他们设置不同的name值，以便于区分，也是为了防止它们相互影响。

HTML新控件

<input type='color' />//颜色选择控件
<input type='date' />//日期选择控件
<input type='time' />//时间选择控件
<input type='email' />//电子邮件控件(本质上还是text)
<input type='number' min='10' max='100' />//数字选择表单(可以设置最大最小值)
<input type='range' min='10' max='100' />//拖拽条(可以设置最大最小值)
<input type='search' />//搜索框(输入内容时，框内右侧会有清除按钮)

<datalist>控件

<input type="text" list="prolist" />
<datalist id="prolist">
    <option value="广东"></option>
    <option value="深圳"></option>
    <option value="澳门"></option>
    <option value="香港"></option>
</datalist>

表格标签

<table>
    <caption>价目表</caption>
    <tr>
        <td>苹果</td>
        <td>￥5.00</td>
    </tr>
    <tr>
        <th>橘子</th>
        <td>￥6.00</td>
    </tr>
</table>

• table有border属性，来控制是否显示表格边框(默认是不显示的)
• <caption>是表格的标题，通常写在所有tr之前。
• colspan属性：设置th或td的列跨度
• rowspan属性：设置th或td的行跨度