web前端 -- html常用标签-CFANZ编程社区

body中常用标签

1) 文本标签：自带加粗效果，从h1到h6字体大小逐级减小

2) 段落标签：<p></p>

3) 普通文本标签：

<b></b>：加粗标签
<strong></strong>：强调标签，效果通b标签
<i></i>：斜体标签
<u></u>：删除线标签
<span></span>：行分区标签，用于对特殊文本特殊处理
<label></label>：普通文本标签，常与表单控件结合实现文本与控件的绑定

4) 换行标签：<br>

5) 水平线标签：<hr>

6) 字符实体：

< 在页面中显示"<"
> 在页面中显示">"
  在页面中显示一个空格
© 在页面中显示版权符号"©"
¥ 在页面中显示人名币符号"¥"

7) 容器标签：长用于页面结构划分，结合CSS实现网页布局

<div id="top">页面顶部区域</div>
<div id="main">页面主体区域</div>
<div id="bottom">页面底部区域</div>

8) 图片标签

<img src="">：用于在网页中插入一张图片。

属性src用于给出图片的URL，必填。
属性width/height用于设置图片尺寸，取像素值，默认按照图片的原始尺寸显示。
属性title用于设置图片标题，鼠标悬停在图片上时显示。
属性alt用于设置图片加载失败后的提示文本。

语法：<img src="" width="" height="" title="" alt="">

9) 超链接标签

用户可以点击链接实现跳转到其它页面

属性href用于设置目标文件的URL，必填。
属性target用于设置姆博阿文件的打开方式，默认在当前窗口打开，可以设置新建窗口打开目标文件(取"_blank")。
属性href也可以指向某个id好属性的元素

10) 常用结构标签
列表标签
无序列表<ul>-><li>：默认用实心圆点标识表项
<ul>
        <li>list item列表项</li>
        <li>list item列表项</li>
        <li>list item列表项</li>
</ul>

有序列表
默认使用阿拉伯数字标识每条数据，可以使用start属性设置起始值，莫i人为1
<ol>
<li>list item 列表项</li>
<li>list item 列表项</li>
<li>list item 列表项</li>
</ol>

11) 表格标签
表格由行和单元格组成，常用于直接的数据展示或辅助排版，基本结构：
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>

table创建表格标签
tr创建行标签
td行中创建单元格以显示数据

单元格合并：用于调整表格结构，分为跨行合并和跨列合并，合并之后需要删除被合并的单元格，保证表格结构完整。

**单元格合并**
单元格属性	作用	取值
colspan	跨列合并单元格	无单位数值
rowspan	跨行合并单元格	无单位数值

table标签示例：

   <table border="1" cellspacing="0" width="600px">
        <caption>课程表</caption>
        <tr>
            <td colspan="3">姓名：</td>
            <td colspan="3">班级：</td>
        </tr>
        <tr>
            <td>星期</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
        </tr>
        <tr>
            <td rowspan="4">上午</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
            <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="6">午休</td>
        </tr>
           <tr>
            <td rowspan="4">下午</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
            <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

浏览器效果：

12) 表单标签

表单用于采集用户的信息并提交给服务器，由表单元素和表单控件组成。表单元素form负责提交数据给服务器，表单控件负责收集数据。

表单使用<form></form>

属性取值
action 设置数据的提交地址
method 设置数据的提交方式，默认为get方式，可以设置为post
onsubmit 设置表单数据提交时触发事件的执行函数

格式：
<form>

</form>

表单控件使用：表单控件用于采集用户信息，可设置以下标签属性

属性	取值
action	设置数据的提交地址
method	设置数据的提交方式，默认为get方式，可以设置为post
onsubmit	设置表单数据提交时触发事件的执行函数

格式：
<form>

</form>

表单控件使用：表单控件用于采集用户信息，可设置以下标签属性

属性名	取值
type	设置控件类型
name	设置控件名称，最终与值一并发给服务器
value	设置控件的值
placeholder	设置输入框中的提示文字
maxlength	设置输入框中可输入的最大字符数
checked	设置单选按钮或复选按钮的默认选中
selected	设置下拉菜单的默认选中

表单示例：

   <form action="#">
        <div>
            <label for="name">用户名：</label>
            <!-- 文本输入   -->
            <input type="text" id="name" name="name" placeholder="请输入姓名">
        </div>
        <div>
            <!-- 密码输入 -->
            <label for="pass">密 码：</label>
            <input type="password" id="pass" name="passwd" placeholder="请输入密码">
        </div>
          <div>
            <label for="education">请选择学历：</label>
            <!-- 下拉列表框元素  option设置列表项 value设置列表值 -->
            <select name="xl" id="education">
                <option value="1">初中</option>
                <option value="2">高中</option>
                <option value="3">本科</option>
                <option value="4">硕士</option>
                <option value="5">博士</option>
            </select>
        </div>
        <div>
            <label for="sex">性别</label>
            <!-- 单选按钮元素 相互排斥，将name属性值设置为同一个-->
            <input type="radio" name="sex" checked value="1">男
            <input type="radio" name="sex" value="2">女
        </div>
        <div>
            <label for="hobby1">爱好：</label>
            <!-- 复选框元素 -->
            <input type="checkbox" name="hobby1">游戏
            <input type="checkbox" name="hobby2">电影
            <input type="checkbox" name="hobby3">编程
            <input type="checkbox" name="hobby4">阅读
        </div>
        <div>
            <label for="demo">介绍：</label>
            <!-- 文本输入区域 -->
            <textarea name="demo" id="demo" cols="30" rows="10"></textarea>
        </div>
        <div>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </div>
    </form>

浏览器效果：