非淡泊无以明志，非宁静无以致远

说明: vscode插件安装

　　打开网络插件：安装 open in browser 打开浏览器插件

　　之后使用右击即有打开浏览器选项

　　汉化菜单插件： Chinese

　　缩放代码字号: Command -/+(mac中)

一、标签语法

1. 默认html页面格式

vscode中使用!+回车默认生成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2. 标签一览

双标签和单标签

<!-- --> 注释， mac中可以使用Command + /

<br>  换行

<hr>  水平单实线

<h1></h1> (h1~h2) 标题标签

<p></p> 段落标签，独占一行

# 文字标签
<strong></strong>  <b></b> 文字加粗
<em></em> <i></i>   文字倾斜
<ins></ins>  <u></u>  下划线
<del></del> <s></s>  删除线

# 图像标签
<img src=""> 插入图片  
name名称, alt替换文本(图片无法显示的时候显示的文字), title提示文本(鼠标悬停提示文件)
width图片的高度，height图片的高度

# 超链接标签
<a href=""> </a> 超链接。可以跳转到网页，或者跳转到本地页面。#为空连接
target= _blank(新窗口打开) _top(在上层窗口打开) _self(当前窗口打开，默认) _parent(在父级窗口打开)

# 音频/视频标签
<audio src="音频的url"></audio> 支持MP3、Ogg、Wav
controls 显示音频控制板   loop 循环播放   autopaly 自动播放

<vudio src="视频的url"></vudio>
controls 显示视频控制板   loop 循环播放  muted 静音播放 autopaly 自动播放

二、列表、表格、表单

1. 列表

无序列表。ul无序列表，li是列表头目

    <ul>
        <li>1</li>
        <li>2</li>
        ...
    </ul>

有序列表。ol有序列表，li是列表头目

    <ol>
        <li>1</li>
        <li>2</li>
        ...
    </ol>

定义列表(类似帮助中心)。dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义内容

dl里面只能包含dt和dd，dt和dd里面可以包含任何内容

    <dl>
        <dt>帮助中心</dt>
        <dd>申请售后</dd>
        <dd>在线提问</dd>
    </dl>

2. 表格

table嵌套 tr， tr嵌套td/th。th是表头，tr是行，td是内容

border添加边框线，默认没有。

　　<table border="1">
        <tr>
            <th>科目/分数</th>
            <th>语文</th>
            <th>数学</th>
        </tr>
        <tr>                           - - - - - - - - - - - - - 
            <td>赵一一</td>             | 科目/分数 |  语文   数学 |
            <td>129</td>               | 赵一一    |  129   113 |
            <td>113</td>               | 赵二二    |  143   149 |
        </tr>                          - - - - - - - - - - - - - 
        <tr>
            <td>赵二二</td>
            <td>143</td>
            <td>149</td>
        </tr>
    </table>

补充：

thead 表格头部，tbody 表格主体，tfoot 表格底部

 <table border="1">
        <thead>
            <tr>
                <th>科目/分数</th>
                <th>语文</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>赵一一</td>          
                <td>129</td>             
                <td>113</td>               
            </tr>
            <tr>
                <td>赵二二</td>
                <td>143</td>
                <td>149</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>排行</td>
                <td>9</td>
                <td>14</td>
            </tr>
        </tfoot>
    </table>

合并单元格

<跨行合并，跨列合并>

保留最左最上的单元格，添加属性(取值是数字，表示需要合并单元格的数量)

- 跨行合并，保留最上单元格，添加属性rowspan

- 跨列合并，保留最左单元格，添加属性colspan

<td rowspan="2"> </td>

3. 表单

<登录页面、注册页面、搜索区域>

# input输入框
<input type="">
type=text单行文本框 password密码 radio单选框 checkbox多选框 file上传文件

# 占位文本提示信息
placeholder="提示信息"

# 单选框属性
name="" 同组只能选中一个
checked 默认选中

# 文件多选
<input type="file" multiple>

# 复选框
checked 默认选中

4.下拉菜单

标签: select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项

默认选中 selected

 <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>
        <option selected>合肥</option>
 </select>

5. 文本域

作用：多行输入文本的表单控件

<textarea> </textarea>

6. Label标签

作用：说明的。可以增加选中的内容的范围

方式一：label标签只包裹内容，不包裹表单控件，设置label标签的for属性值和表单空间的id属性值相同

    <input type="checkbox" id="lq"> 
        <label for="lq">篮球</label>

方式二：直接用label包裹

<label><input type="checkbox" id="zq"> 足球 </label>

7. 按钮标签button

<button type=""> 按钮 </button>

type属性值。submit提交(默认)，reset重置，button普通按钮，配置js使用

8. 无语义的布局标签

<div>独占一行</div>
<span>不换行</span>

9. 字符实体

空格 &nbsp
< &lt
> &gt

526互联

WEB前端01-HTML基础