HTML基础标签详解-优快云博客

以下图举例: 内容显示到网页用 HTML 内容的样式比如字体用 CSS
一.HTML

常见html标签使用demo

<!DOCTYPE html>
<html lang="en">
<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>

<style>

    img{
        height: 100px;
        width: 120px;
    }

    li{
        list-style: none;
    }
</style>

<input>

    <!-- 1.超文本标记语言 页面基本元素就用它 -->

    <!-- 2.工具用vscode 创建html文件基本结构 快捷方式 ! + 回车 -->

    <!-- 3.注释 ctrl + / -->

    <!-- 4.vscode打开网页快捷键 alt + B -->

    <!-- 5.标题标签 -->
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
    
    <!-- 6.vscode打开网页快捷键 alt + B -->
    <p>我是段落 我是段落 我是段落  我是段落 我是段落</p>
    <p>我是段落 我是段落 我是段落  我是段落 我是段落</p>

    <!-- 7.换行 让文字强制换行 即使在段落标签中也会换行 -->
    <br>
    
    <!-- 8.分割不同主题内容的水平线 -->
    <hr>

    <!-- 9.img图片标签 src:图片路径 alt:图片加载不出来时的替换文本 title:鼠标悬停图片上时显示文字 -->
    <img src="idea壁纸7.jpg" alt="我是替换文本" title="我是标题">

    <!-- 10:audio音频标签 src:音频路径 controls:是否显示播放控件 默认为否 页面啥也看不到，所以一般要置为true
         auto:是否自动播放 loop:是否循环播放 -->
    <audio src="面试录音.mp3" controls="true"></audio> <br>

    <!-- 11.video视频标签,其属性与上面的音频标签完全一样  -->
    <video src="Hadoop介绍.mp4" controls="true"></video> <br>

    <!-- 12.a链接标签 从当前页面跳到到另一个页面 href:链接地址 target属性:是否在当前页面打开 ——self 在 _blank 不在 -->
    <a href="http://jd.com" target="_blank">京东</a>


    <!-- 13.ul li无序列表 前面会带黑点 li加 list-style: none 样式去除-->
    <ul>
        <li>无序列表内容1</li>
        <li>无序列表内容2</li>
        <li>无序列表内容3</li>
    </ul>
    <!-- 14.ol li有序列表 -->
    <ol>
        <li>有序列表内容1</li>
        <li>有序列表内容2</li>
        <li>有序列表内容3</li>
    </ol>

    <!-- 14.dl dt dd自定义列表整体 标题 各项内容 -->
    <dl>
        <dt><strong>我是自定义列表</strong></dt>
        <dd>自定义列表内容1</dd>
        <dd>自定义列表内容2</dd>
        <dd>自定义列表内容3</dd>
    </dl>

    <!-- 15.table表格标签 tr行 td单元格 border:边宽 width:表宽 height：表高-->
    <!-- 16.caption标签 表格整体大标题 默认居中显示 th标签 表头 默认加粗 -->
    <!-- 17.thead tbody tfoot 结构化标签 可以省去 -->
    <table border="1px" width="300px" height="200px">
        <caption>表格整体大标题 默认居中显示</caption>
        <thead>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </thead>
        <tbody>
        <tr>
            <td>一行一列内容</td>
            <td>一行二列内容</td>
        </tr>
        <tr>
            <td>二行一列内容</td>
            <td>二行二列内容</td>
        </tr>
        <tr>
            <td>三行一列内容</td>
            <td>三行二列内容</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结1</td>
            <td>总结2</td>
        </tr>    
    </tfoot>
    </table>
    <br>
    <!-- 18.合并单元格，简单 规则就三步 1.明确合并哪些单元格 只保留 左上的那个单元格 删除其它所有被合并的 -->
    <h1>把上面表格 的第二行的第二列 与第三行的第二列合并</h1>
    <table border="1px" width="300px" height="200px">
        <caption>表格整体大标题 默认居中显示</caption>
        <thead>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </thead>
        <tbody>
        <tr>
            <td>一行一列内容</td>
            <td>一行二列内容</td>
        </tr>
        <tr>
            <td>二行一列内容</td>
            <td rowspan="2">二行二列内容</td>
        </tr>
        <tr >
            <td>三行一列内容</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>总结1</td>
            <td>总结2</td>
        </tr>    
    </tfoot>
    </table>

    <br>
    <!-- 19.input标签 根据type属性值的不同可以展示不同的效果 
        type为text文本框，用于输入单行文本 password密码框输入会变成星号 radio单选框默认圆形
         checkbox多选框默认正方形 file文件选择框mutiple属性置为true可同时选择多个
         submit提交按钮 reset重置按钮 button普通按钮一般配合js
        分别为文本框-->
        <!-- checked 默认选中 -->
        <input type="text" name="" id="" placeholder="我是占位符"><br>
        <input type="radio" value="女" name="sex" checked>男</input>
        <input type="radio" value="男" name="sex">女</input>
    <br>

    <!-- 20.select标签下拉菜单 option下拉菜单的每一项  -->
        <select name="省份" id="">
                <option value="湖南">湖南</option>
                <option value="湖北">湖北</option>
                <option value="广东">广东</option>
                <option value="云南">云南</option>
        </select>
    <br>

    <!-- 21.label标签 除了绑定内容与表单标签的关系 -->
    <label for="nan">男</label>
    <label for="nv">女</label>

    <!-- 22.div标签独占一行 span标签 可以多个span占一行 -->
    <div>我div内容独占一行</div>

    <br>

    <span>我是第一个span的内容</span>
    <span>我是第二个span的内容</span>


    <!-- 23.常见字符实体 空格:&nbsp; 如果有多个空格必须写成这个串不然会变成一个空格  小于号:&lt; 大于号：&gt; 引号：&quot; -->
    <br>
    <h1>我后面有多个空格&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格结束</h1>

</body>
</html>