html标签

---

html

一、展示信息类标签
二、收集用户信息的标签

---

一、展示信息类标签

1、文本标签 span

 <span style="color: red;">hello</span>
 <span>demohtml</span>

2、标题标签 h1~h6

    <h1>标题标签</h1>
    <h2>标题标签</h2>
    <h3>标题标签</h3>
    <h4>标题标签</h4>
    <h5>标题标签</h5>
    <h6>标题标签</h6>

3、div竖着布局的标签

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

4、段落标签 p

    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>

5、超链接标签 a

href 设置资源路径
target 设置打开窗口的方式
再加上 _self默认的，在本窗口打开
再加上 _blank在新窗口打开
再加上 窗口名 就是在指定窗口打开

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

6、锚点标签

name锚点值

    <a name="aaaa">锚点</a>
    <a href="#aaaa" style="position: fixed;right: 200px;bottom: 200px;">跳转到h1</a>
    <a href="#bbbb" style="position: fixed;right: 200px;bottom: 150px;">跳转到div</a>
    <a href="#cccc" style="position: fixed;right: 200px;bottom: 100px;">跳转到p</a>

7、图片标签

src:引用的图片资源
路径：
相对路径： 访问资源与被访问资源的关系
兄弟关系 src=“OIP-C.jpg”
叔侄关系 src=“img/OIP-C.jpg”
表兄弟关系 src=“…/img/OIP-C.jpg”
绝对路径： 资源的绝对位置
alt：当图片资源不能正常展示时，显示alt里边的内容
width=“100px”
height=“400px”

    <img src="img/OIP-C.jpg" alt="这是一张猫咪图片" style="object-fit: cover;width: 200px;height: 400px;">

8、 列表标签

<ul>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ul>

    <ol>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
        <li>列表标签</li>
    </ol>

9、表格标签

放表格的容器 行

单元格	加粗居中 border表格有边框 width="500px" height="400px" cellpadding="10px" 单元格填充度 cellspacing="0" 单元格之间的间距 0 表示挨在一起 thead tbody tfoot rowspan 把行合并 colspan 把列合并

    <table border="1">

        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>

        <tr>
            <td>1</td>
            <td colspan="2">张宇一</td>

            <td>男</td>
        </tr>
        <tr>
            <td rowspan="2">2</td>
            <td>李明名</td>
            <td>20</td>
            <td>男</td>
        </tr>

        <tr>
            <td>李华</td>
            <td>20</td>
            <td>女</td>
        </tr>

    </table>

10、框架标签

iframe 嵌套其他页面
窗口标签
src:嵌套的资源
width:“800px”
height:“400px”
frameborder='0’去掉边框，把任意页面嵌入的更真实
和第五个跳转窗口的知识点链接起来

<a href="https://www.baidu.com/" target="aaa">跳转到百度</a>
    <iframe src="https://sports.cctv.cn/Paris2024/" name="aaa"></iframe>

11、音频 audio

加了controls才能看见音频键 =“true"或者"false”，其实写了controls就是true，不写就是false
autoplay：加了这个就能一进页面就播放
loop 循环播放

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

12、视频

<!-- controls 播放按钮，手动播放 -->
<!-- autoplay：加了这个就能一进页面就播放 -->
<!-- loop 循环播放 -->

还有设置宽和高
width:“800px”
height:“400px”

    <video src=""></video>

二、收集用户信息的标签

<!-- 以下是收集用户信息的标签 -->
<form >
<input type="text">单行文本框<br><br><br><br> 
<input type="password">密码框<br><br><br><br> 

<input type="radio">单选框<br><br><br><br> 
<input type="radio" name="sex">男生
<input type="radio" name="sex">女生<br><br><br><br> 
<!-- 属性值相同的视为一组，一组里面只能选一个 -->

<input type="checkbox" >篮球
<input type="checkbox" >足球
<input type="checkbox" >乒乓球
复选框

<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="90" >滑块<br><br>
<input type="number" min="0" max="20" value="10" step="5">数字<br><br>
<!-- step 是步长 -->

<!-- 下拉框：select -->
<!-- 下拉框里面的选项用option -->
<select>
    <option value="">数学</option>
    <option value="">语文</option>
    <option value="">英语</option>
</select><br>

<!-- 多行文本域 -->
<textarea rows="10" cols="50"></textarea>多行文本域
<!-- rows="10"放多少行 ，再多会出现滚动条-->
<!-- cols="50"放多少字符 -->

<!-- 按钮 -->
<input type="button" value="普通按钮">
<input type="reset" value="重置按钮">
<input type="submit" value="提交按钮">
<!-- 提交按钮使用的时候需要把收集用户信息的所有的东西放到表单标签里面 -->
</form>

总结

html标签