HTML常用标签

最新推荐文章于 2022-07-26 17:07:39 发布

雨醉东风

最新推荐文章于 2022-07-26 17:07:39 发布

阅读量105

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/zhangxuelong461/article/details/103681417

版权

WEB 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML

常见的文本标签

内容标题h1-h6
自带上下间距，字体加粗，独占一行
段落标签p
自带上下间距，独占一行
换行 br
水平分割线 hr
加粗b
斜体i
小字small

列表标签

无序列表：没有顺序列表 ul：type控制图标类型 li

<h3>无序列表</h3>
<ul type="square">
    <li>刘备</li>
    <li>孙权</li>
    <li>曹操</li>
</ul>

有序列表： ol:type控制序号类型 start起始值 reversed降序 li

<h3>有序列表</h3>
<ol type="1" start="10" reversed="reversed">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
</ol>

定义列表： dl定义列表 dt定义标题 dd 定义描述

<h3>定义列表</h3>
<dl>
    <dt>凉菜</dt>
    <dd>排黄瓜</dd>
    <dd>皮蛋</dd>
    <dd>东北拉皮</dd>
    <dt>炒菜</dt>
    <dd>红烧肉</dd>
    <dd>红烧鸡块</dd>
    <dd>红烧狮子头</dd>
</dl>

列表嵌套：有序和无序可以任意无限嵌套

图片标签img

支持的图片格式： 1. jpg/jpeg 2. png 3. gif动图
src路径：
1. 相对路径：访问站内资源使用
2. 绝对路径：访问站外资源使用，图片盗链，好处：节省资源坏处：有可能找不到图片
alt：图片不能显示时显示的文本
title: 鼠标在图片上悬停时显示的文本
width/height: 两种赋值方式 1. 像素 2. 上级元素的百分比如果只设置宽度高度会等比例缩放

<img alt="这是个钻石图片" src="./diamonds.png">
<img width="50%" title="鼠标在图片上悬停显示的文本" src="./diamonds.jpg">

超链接a

可以访问站内资源和站外资源
访问的资源如果浏览器支持浏览则直接显示，不支持浏览的则下载
如果a标签包裹的是文本则是文本超链接如果包裹的是图片则是图片超链接

<a>超链接1：没有herf属性</a><br>
<a href="./demo01.html">超链接2：本地页面</a><br>
<a href="http://www.baidu.com">超链接3：站外页面(百度)</a><br>
<a href="./http.zip">超链接4：压缩包(浏览器不支持的会直接下载)</a><br>
<a href="./diamonds.png">超链接5：图片超链接</a>

表格table

标签： table tr行 td列 th表头（加粗并居中） caption标题
属性： table:border边框粗细 cellspacing单元格间距 td:跨行rowspn 跨列colspan

表单form

常用控件？文本框、密码框、提交按钮、单选、多选、下拉选等

<!-- action 提交的服务器地址
    所有控件必须写name属性，不写则不提交参数
    placeholder 占位文本
    value 默认值
    radio 单选
    checked 默认选择
    checkbox 多选
    date 日期选择器
    select 下拉选择框
    按钮：submit、reset、button
-->
<form action="#">
    用户名：<input type="text" name="username" placeholder="请输入用户名信息" value="张三丰">
    <br>
    密码：<input type="password" name="pwd" placeholder="请输入密码">
    <br>
    性别：<input type="radio" name="gender" value="man" checked="checked" id="man">
            <label for="man">男</label>
        <input type="radio" name="gender" value="woman" id="woman">
            <!-- 点击男女这个字的时候也可以选择 -->
            <label for="woman">女</label>
    <br>
    爱好：<input type="checkbox" name="hobby" value="smoking" checked="checked">抽烟
        <input type="checkbox" name="hobby" value="drink">喝酒
        <input type="checkbox" name="hobby" value="hotHead">烫头
    <br>
    生日：<input type="date" name="birthday">
    <br>
    头像：<input type="file" name="pic">
    <br>
    城市：<select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen" selected="selected">深圳</option>
        </select>
    <br>
    <!-- 提交按钮 -->
    <input type="submit" value="注册">
    <!-- 重置按钮 -->
    <input type="reset">
    <!-- 自定义按钮 -->
    <input type="button" value="点击">
</form>