HTML——标签

目录

形成独立空间

标题

竖着布局的标签

段落标签

超链接标签

图片标签

列表标签

表格标签

换行

供收集用户信息的标签

音频

视频

---

<!-- 所有标签都有的属性 style id class -->

形成独立空间

<span>

<!-- 形成独立空间 -->

<span style="color:red;font-size:50px">demo</span>

<span style="color:yellow;font-size:40px">testindex</span>

<span>index</span>

标题

<h1~h6>

<!-- 标题标签 h1~h6 -->

<h1>文章的标题</h1>

<h2>文章的标题</h2>

<h3>文章的标题</h3>

<h4>文章的标题</h4>

<h5>文章的标题</h5>

<h6>文章的标题</h6>

竖着布局的标签

<div>

<!-- div竖着布局的标签 -->

<div>竖着布局的标签</div>

段落标签

<p>

<!-- 段落标签p -->        

<p>段落标签</p>

超链接标签

<a>

<!-- 超链接标签 a href 设置资源路径 target设置资源打开方式 _self在本窗口打开 _blank在新窗口打开 -->

<a href="https://cloud.tencent.com/act/campus" target="aa">点击跳转</a>

<!-- 锚点标签 -->

<a href="#aa">返回顶部</a>

<a href="#bb">跳转到div标签</a>

<a href="#cc">跳转到p标签</a>

<!-- 窗口标签  嵌套资源 -->

<a href="https://www.bilibili.com" target="aa">点击跳转bilibili</a>

 <a href="https://www.processon.com" target="aa">点击跳转processon</a>

图片标签

<img>

<!-- 图片标签 src资源路径 alt当图片无法加载时展示alt里边的内容 width图片的高 height图片的高 -->

<!-- 绝对路径 被访问资源在磁盘当中的绝对位置 -->

<!-- 相对路径 访问资源与被访问资源之间的关系 -->

<img src="../7081104f40524987b7df940c9360f837.jpg" alt="" width="100px" height="100px">

列表标签

<ul><li>

<!-- 列表标签 -->

<ul>

        <li>111</li>

</ul>

表格标签

<table><tr><td>

<!-- 表格标签

            border="1"表示表格有边框

            width height

            cellpadding单元格的填充度

            cellspacing单元格之间的距离  0表示单元格挨在一起

            thead   tfoot   tbody

            单元格合并

            rowspan  行合并

            colspan  列合并

-->

<table border="1" cellspacing="0">

        <tr>

                <td>id</td>

                <td>name</td>

                <td>age</td>

                <td>sex</td>

        </tr>

</table>

换行

<br>

<!-- 换行 -->

<br><br><br><br><br>

供收集用户信息的标签

<input>

<!-- 供收集用户信息的标签 -->

<input type="text">单行文本框<br><br>

<input type="password">密码框<br><br>

<input type="radio" name="sex">男生 <input type="radio" name="sex">女生 单选框<br><br>

<input type="checkbox">篮球 <input type="checkbox">足球 <input type="checkbox">羽毛球 <br>

<input type="file">文件选择器 <br><br>

<input type="color">颜色选择器 <br><br>

<input type="date">日期 <br><br>

<input type="datetime-local">日期时间 <br><br>

<input type="week">周选择器 <br><br>

<input type="range" min="0" max="100" value="10">滑块 <br><br>

<input type="number" min="0" max="100" value="50" step="5">数字 <br><br>

<select>

        <option value="">数学</option>

        <option value="">语文</option>

        <option value="">英语</option>

</select> 下拉框 <br><br>

<textarea cols="40" rows="10"></textarea> 多行文本域 <br><br>

<input type="button" value="普通按钮">

<input type="submit" value="提交按钮">

<input type="reset" value="重置按钮">

音频

<audio>

<!-- 音频  controls手动播放 autoplay自动播放 loop循环播放 -->

<audio src="" controls></audio> <br><br>

视频

<video>

<!-- 视频  controls自动播放 autoplay自动播放 loop循环播放 -->

<video src="" controls width="200px" height="300px"></video>