html简略版

标签

    <h1>1级标签</h1>
    <h2>2级标签</h2>
    <h3>3级标签</h3>
    <h4>4级标签</h4>
    <h5>5级标签</h5>
    <h6>6级标签</h6>

加粗、下划线、倾斜、删除线

    <b>加粗</b>
    <strong>jiacu</strong>
    <u>下划线</u>
    <ins>xiahuaxian</ins>
    <i>倾斜</i>
    <em>qingxie</em>
    <s>删除线</s>
    <del>shanchuxian</del>

插入图片、视频、音频

<!-- 只设置width或height，另一个值会等比例缩放，好处是图片不会变形 -->

<!-- control 显示播放的控件   autoplay 自动播放（部分浏览器不支持）  loop 循环播放 -->

<!-- 音频标签支持的格式：MP3 Wav Ogg -->

<!-- control 显示播放的控件   autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）  loop 循环播放 -->

    <img src="./image/find.png" alt="find图标" title="鼠标悬停" width="100px">
    <!-- 只设置width或height，另一个值会等比例缩放，好处是图片不会变形 -->
    <audio src="./image/music.mp3" controls autoplay loop></audio>
    <!-- control 显示播放的控件   autoplay 自动播放（部分浏览器不支持）  loop 循环播放 -->
    <!-- 音频标签支持的格式：MP3 Wav Ogg -->
    <br>
    <video src="./image/animal.mp4" width="400px" controls autoplay muted loop></video>
    <!-- control 显示播放的控件   autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）  loop 循环播放 -->

超链接

<!-- 链接标签的target属性值 _self当前窗口跳转 _blank新窗口跳转 -->

    <a href="https://www.baidu.com/">超链接</a>
    <br>
    <a href="./跳转页面.html">跳转页面</a>
    <br>
    <a href="#">空链接</a>
    <br>
    <a href="https://www.baidu.com/" target="_blank">新窗口超链接</a>
    <!-- 链接标签的target属性值 _self当前窗口跳转 _blank新窗口跳转 -->

列表标签： 有序列表 无序列表 自定义列表

<!-- 无序列表 ul标签中只能包含li标签 -->

<!-- 有序列表 ol标签中只能包含li标签 -->

<!--自定义列表 dl dt dd

dd前会默认显示缩进效果

dl标签中只能包含dt、dd标签

dt、dd标签可以包含任意内容-->

    <!-- 无序列表 ul标签中只能包含li标签 -->
    <br>
    <h3>水果列表</h3>
    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>桃子</li>
    </ul>
    <!-- 有序列表 ol标签中只能包含li标签 -->
    <br>
    <h3>成绩排名</h3>
    <ol>
        <li>100</li>
        <li>90</li>
        <li>80</li>
        <li>70</li>
    </ol>
    <!-- 
        自定义列表 dl dt dd
        dd前会默认显示缩进效果
        dl标签中只能包含dt、dd标签
        dt、dd标签可以包含任意内容
    -->
    <br>
    <dl>
        <dt><a href="https://www.baidu.com/">帮助中心</a>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        </dt>
        <dt><a href="https://www.baidu.com/">帮助中心</a>
            <dd>账户管理</dd>
            <dd>购物指南</dd>
            <dd>订单操作</dd>
        </dt>
    </dl>

表格 table

        tr行 td单元格 th表头

        结构标签：thead头部 tbody主体 tfoot底部

<!--

        跨行合并rowspan 跨列合并colspan（左上原则）

        只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

     -->

    <table border="1" width="500" height="300">
    <caption><h3>学生成绩表</h3></caption>
    <thead>
         <tr>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </tr>
    </thead>
    <tbody>
           <tr>
            <td>小哥哥</td>
            <td rowspan="2">100分</td>
            <td>小哥哥真帅气</td>
        </tr>
        <tr>
            <td>小姐姐</td>
            <!-- <td>100分</td> -->
            <td>小姐姐真漂亮</td>
        </tr> 
    </tbody> 
    <tfoot>
        <tr>
            <td>总结</td>
            <td colspan="2">郎才女貌</td>
            <!-- <td>郎才女貌</td> -->
        </tr>
    </tfoot>
   
    </table>

表单form

        标签名    type属性值                     说明

        input       text                     文本框，用于输入单行文本

        input       password              密码框，用于输入密码

        input       radio                         单选框，用于多选一

        input       checkbox                  多选框，用于多选多

        input       file                      文件选择，用于之后上传文件

        input       submit                      提交按钮，用于提交

        input       reset                        重置按钮，用于重置

        input       button        普通按钮，默认无功能，之后配合js添加功能

常用属性

        placeholder         占位符

    <form>
        <br>
        文本框：<input type="text" placeholder="文本框">
        <br>
        密码框：<input type="password">
        <br>
        性别：<input type="radio" name="gender" checked>男  <input type="radio" name="gender" >女
        <!-- 单选框与name配合使用 -->
        <!-- 默认选项checked -->
        <br>
        多选框：<input type="checkbox" checked>同意本网站使用xxx
        <br>
        文件选择：<input type="file" multiple>
        <!-- 多文件选择mutiple -->
        <br>
        <input type="submit">
        <input type="reset">
        <input type="button" value="普通按钮"> 
        <button>button按钮</button>
        <button type="submit">重置按钮</button>
        <button type="reset">重置按钮</button>
    </form>

select标签 下拉菜单

<!-- select option -->

<!-- selected默认选中 -->

    所在城市：
    <select>
        <option>上海</option>
        <option>深圳</option>
        <option selected>北京</option>
        <!-- selected默认选中 -->
    </select>

testarea文本域标签

<textarea cols="60" rows="20"></textarea>

label标签

常用于绑定内容与表单标签的关系

<!-- 实现：点击文字时也可以选中 -->

 

    <!-- 方法一 -->
    性别：<input type="radio" name="gender" id="man"><label for="man">男</label>  
    <!-- 方法二 -->
         <label><input type="radio" name="gender">女</label>  

语义化标签

    <!--

        没有语义的布局标签

        分行<div>

        不分行<span>

    -->

    <!--

        有语义的布局标签（手机端网页使用）

        header nav footer aside section article

    -->

字符实体：

网页不认识多个空格 空格用&nbsp;表示

 

<p>这是HTML文档，现在要学习&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;字符实体</p>