HTML(基础标签)

1.span标签

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

用于编写文本,不会换行,span标签之间无空隙,换行后有。

2.h标签

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

有h1到h6字体逐渐变小。

3.div

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

4.p标签

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

5.a标签

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

href设置资源路径,target设置打开窗口方式(self本窗口,blank新窗口,窗口名指定窗口)。

6.锚点标签

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

name设置锚点值

7.图片标签

<img src="img/2.png" alt="这是一张图片">

src引用图片路径,alt图片不能显示时显示其中内容。

8.列表标签

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

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

前一种圆点式,后一种数字式。

9.表格标签

<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>

table容器

tr行  td单元格  th加粗居中

border有边框

cellpadding=“10px”单元格填充度

cellspacing=“0”单元格之间间距0表示挨在一起

rowspan  把行合并

colspan   把列合并

10.框架标签

<iframe src="https://www.bilibili.com/" width="200" height="200" frameborder="0"></iframe>

嵌套其他页面

11.音频

<audio src="音频/联盟.mp4" controls></audio>

controls  手动播放  autoplay  自动播放  loop  循环播放

12.视频

<video src="音频/联盟.mp4" width="200px" height="200px" controls></video>

controls  手动播放  autoplay  自动播放  loop  循环播放

12.收集用户信息标签

<form>
        <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><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="90">滑块<br><br>

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

        <select>
            <option value="">数学</option>
            <option value="">语文</option>
            <option value="">英语</option>
        </select>

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

        <input type="button" value="普通按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">




    </form>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值