HTML 常用标签

最新推荐文章于 2024-08-09 15:13:41 发布

废柴前端

最新推荐文章于 2024-08-09 15:13:41 发布

阅读量437

点赞数

分类专栏： HTML基础

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/zhuxiandan/article/details/76584139

版权

HTML基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.1 无序列表标签

 标签名：<ul>
           <li>列表项</li>
        </ul>

属性：type —— 属性指定无序列表的符号，取值有以下几种“disc（实心圆点，默认值）/circle（空心得圆圈）/square（实心正方形）”

代码示例：

<ul >
   <li>江西</li>
   <li>广州</li>
   <li>深圳</li>
   <li>浙江</li>
</ul>

1.2 有序列表标签

 标签名：<ol>
          <li>列表项</li>
        </ol>

属性：type —— 指定有序列表的符号，常见的取值有“A（列表项从A开始，A，B，C）/a（列表项从a,b,c,d）/I（列表项以罗马数字开始，I，II，III，IV，V）/1（列表以阿拉伯数字开始，1，2，3，4）”； start —— 属性值指定从第几个开始，当取值为0或负值时，符号值从该值增加至0再以此加值；

代码示例：

<ol type="A" >
     <li>江西</li>
     <li>广州</li>
     <li>深圳</li>
</ol>

1.3 自定义列表标签

标签名：<dl>

</dl>

代码示例：

<dl>
    <dt>列表题</dt>
    <dd>列表描述</dd>
</dl>

1.4 表单

定义：表单收集用户填写的信息，并提交到后台服务器。

标签：<form  action="" method="post/get">
            <input type="">
     </form>

action属性：表单提交数据到服务器的url地址。

method属性： 1. post方法：浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。 2. get 方法：浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

类别：

1. 文本框text：当type值为“text”，input输入框为文本框。（即<input type="text" maxlength="12" size="30" value="你好">）

2.maxlength：指定文本框能接受的最大字符个数。

size：指定文本框的大小（宽度）。

value：指定初始值。

3. 密码框（<input type="password" maxlength="12" size="30">）:密码框和文本框是一样的文本框的属性同样适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性.

4.label标签

<label for=""></label>作用：（1）可以单独对其应用样式.（2）for属性可以使之和某个<input>关联，即当单击文本会激活对应的<inout>

例：

<form action="#" method="post">
    <label for="userId">账号：</label><input id="userId" type="text" maxlength="10" size="20" value="abc"/><br/>
    <label for="password">密码：</label><input id="password" type="password" maxlength="6" size="20"/>
</form>

5.单选按钮

<input id="student" name="role" type="radio" checked/><label for="student">学生</label>
<input id="teacher" name="role" type="radio"/><label for="teacher">教师</label>
<input id="admin" name="role" type="radio"/><label for="admin">管理员</label>

如果需要将若干个单选按钮编为一组（一组最多只有一个被选中），需要设置相同的name属性。

如果需要默认选中某个选项，需加上checked属性

标签属性的表现形式：

（1）键值对：属性名=“属性值”

type=“text”,maxlength=“6”

（2）一些取值为布尔类型的属性直接使用属性名

checked、readonly

6.多选按钮

你的兴趣爱好是：
<input id="music" type="checkbox"/><label for="music">音乐</label>
<input id="read" type="checkbox" checked/><label for="read">阅读</label>
<input id="game" type="checkbox" checked/><label for="game">游戏</label>
<input id="movie" type="checkbox"/><label for="movie">电影</label>
<input id="sleep" type="checkbox"/><label for="sleep">睡觉</label>

7.提交按钮（<input type="submit"/>）

（1）点击按钮之后跳转到from表单指定的Action

（2）value属性：value对应的值就是按钮上显示的文字

（3）点击按钮，将from表单中的input中name属性值（键）和用户输入的组成键值对（或input标签value属性对应的值），并拼接到from表单Action属性值的后面。

8.重置按钮（<input type="reset" value="刷新"/>）

（1）点击按钮，重置表单内部的输入框（单选复选按钮）。

（2）value属性：value对应的值就是按钮上显示的文字。

9.普通按钮（<input type="button" value="点击">）

（1）点击按钮。没有任何反应

（2）value属性：value对应的值就是按钮上显示的文字

10.图片按钮（<input type="image" src="" >）

（1）作用和submit按钮是一样的

（2）需要设置src属性的值，如果src对应的路径没有找到图片，并且又没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性则显示alt的值。（类似img标签）

10.<button></button>标签

（1）内容可以是任意资源（eg：图片，段落，视频）

（2）当button标签放置在from内部，作用的submit一样。

11. 文件选择框（<input type="file" accept="">）

accpet属性：值为指定选择的文件类型。

例如你想选择的是图片文件，只需：
<input type="file" accept="image/*">

上传文件需指定对应表单的属性：

<input enctype="multipart/form-data">

12.下拉列表

使用下拉列表的好处：（1）节省页面空间，使得页面整洁。

（2）方便输入，规范输入。

代码示例：

<select name="province" id="" multiple="multiple" size="3">
    <optgroup label="省份" disabled>
       <option value="江西" checked>江西</option>
       <option value="湖南">湖南</option>
       <option value="浙江">浙江</option>
       <option value="上海">上海</option>
    </optgroup>
</select>

select定义了一个下拉列表，option定义了下拉列表的选项	name属性定义了提交数据的参数名。value定义了选择该选项时的参数值。
multiple属性定义了下拉列表可多重选择	size属性定义了下拉列表可视化个数
Optgroup的label属性值定义了该选项组的名称

13. Fieldset标签

<fieldset>标签可以将表单内的相关元素分组，会在相关表单元素周围绘制边框；它没有必须的或唯一的属性值。

 代码示例：

<fieldset>
   <legend>教育背景</legend>
   毕业院校：<inputtype="text"><br><br>
   毕业专业：<inputtype="text"><br><br>
   精攻：<inputtype="text"><br><br>
</fieldset>

<legend> 标签为 <fieldset> 元素定义标题。

14. textarea标签

<textarea> 标签定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）；可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。

代码示例：
<textarea  name="name"cols="30"rows="10"placeholder="描述信息..." autofocus></textarea>

属性New：HTML5 中的新属性。

属性	值	描述
autofocus New	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的列数。
disabled	disabled	规定禁用文本区域。
form New	form_id	定义文本区域所属的一个或多个表单。
maxlength New	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholder New	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
required New	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrap New	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

15. 隐藏域

当需要向服务器传递参数，且该参数无需由用户输入，甚至不需要用户看见，可以使用隐藏域来实现；

代码示例：
<form action="###">

    用户名：<input type="hidden" name="id" value="20140202468"><br><br>

    原密码：<input type="password"><br><br>

    新密码：<input type="password"><br><br>

    <input type="submit">

</form>

1.5 Table 表格标签

组成部分：标题、表头、表身、表尾。

{

<table>: 定义一个表格。

<caption>: 该标签为表格的标题部分。

<thead>: 该标签为表格的表头部分。

<tbody>: 该标签为表格的主体部分，也就是表身。

【 <tbody>部分由tr、td、th元素组成，th表示表格表头，tr表示表格的行，td表示表格的单元格。】

<tfoot>: 该标签为表格的表尾部分。

}

Table常用属性：

属性	值	作用
align	center left right	规定表格相对周围元素的对齐方式。不赞成使用，请用css样式代替
bgcolor	rgb(x,x,x) #xxxxxx colorname	规定表格的背景颜色。不赞成使用，请用css样式代替
cellpadding	pixels %	规定单元边沿与其内容之间的空白。
cellspacing	pixels %	规定单元格之间的空白。
frame	void above below hsides lhs rhs vsides box border	规定外侧边框的哪个部分是可见的。
rules	none groups rows cols all	规定内侧边框的哪个部分是可见的。
summary	text	规定表格的摘要。
width	pixels %	规定表格的宽度。
height	pixels %	规定表格的高度
rowspan(td元素的属性)	number	规定单元格可横跨的行数。
colspan（td元素的属性）	number	规定单元格可横跨的列数。

代码示例：

<table border="1" cellspacing="0" >        <!--cellspacing 表示单元格间距-->
   <caption>华鑫信息科技有限公司</caption>   <!--表格标题-->
   <thead>   <!--表头部分-->
      <tr>
         <td>姓名</td>
         <td>性别</td>
         <td>出生年月</td>
         <td>职务</td>
         <td>电话</td>
         <td >部门</td>
      </tr>
   </thead>
  <tbody>   <!--表格主题部分开始-->
     <tr>
        <td>小明</td>
        <td>男</td>
        <td>1999-11-02</td>
        <td>总经理</td>
        <td>400-820-8820</td>
        <td rowspan="3">办公室</td>
     </tr>
     <tr>
        <td>张三</td>
        <td>男</td>
        <td>1995-11-09</td>
        <td>主管</td>
        <td>182-7024-4820</td>
     </tr>
     <tr>
        <td>小花</td>
        <td>女</td>
        <td>1994-02-05</td>
        <td>财务总监</td>
        <td>185-7750-0052</td>
     </tr>
     <tr>
        <td>小花1</td>
        <td>女</td>
        <td>1994-02-05</td>
        <td>财务总监</td>
        <td>185-7750-0052</td>
        <td rowspan="2">外交部</td>
     </tr>
     <tr>
        <td>小花2</td>
        <td>女</td>
        <td>1994-02-05</td>
        <td>财务总监</td>
        <td>185-7750-0052</td>
     </tr>
  </tbody>  <!--表格主题部分结束-->
  <tfoot>
     <tr>
        <td colspan="6">总计38人</td>
     </tr>
  </tfoot>
</table>

css样式代码：

<style>
      table,tr,td
     {
         border-collapse: collapse;
         width:800px;
         text-align: center;
         margin:auto ;
         font-size: 17px;
      }
</style>

效果图：

表格的其他作用：可以使用表格来进行网页的简单布局，太复杂的网页不建议用TABle来布局，建议用div+css,因为太复杂的网页用表格布局，浏览器的解析速度会大大的减慢，导致网页加载很慢，同时后期的网站维护也会很困难。一般来说政府的官方网站、其他的一些老网站都是用table来进行网页布局。

table布局的结构特点：从上往下，从左往右，一般每一行的高度是一样的。

例如：用table来布局鹤壁汽车工程职业学院（部分内容使用截图）

源代码

<body>
<table border="0" id="nav">
   <tbody>
   <tr>
      <td colspan="3">
         <img src="logo.png" alt="鹤壁汽车工程职业学院" width="1030">
      </td>
   </tr>
   <tr>
      <td colspan="3">
         <table>
            <tbody>
            <tr style="background: #0897ff" height="45">
               <td width="494"></td>
               <td width="40"><a href="" >首页</a></td>
               <td width="80"><a href="">学院概况</a></td>
               <td width="80"><a href="">机构设置</a></td>
               <td width="80"><a href="">新闻公告</a></td>
               <td width="80"><a href="">教学科研</a></td>
               <td width="80"><a href="">招生就业</a></td>
               <td width="80"><a href="">数字校园</a></td>
            </tr>
            </tbody>
         </table>
      </td>
   </tr>
   <tr>
      <td colspan="3">
         <span>2017年7月11日</span> <sup>星期二</sup>
      </td>
   </tr>
   <tr>
      <td>
         <table border="0" cellspacing="10">
            <tbody >
               <tr>
                  <td width="116" height="26" align="center">学习平台</td>
                  <td width="116" height="26" align="center">教务系统</td>
               </tr>
               <tr>
                  <td width="116" height="26" align="center">招生网</td>
                  <td width="116" height="26" align="center">就业网</td>
               </tr>
               <tr>
                  <td width="116" height="26" align="center">教学机构</td>
                  <td width="116" height="26" align="center">管理机构</td>
               </tr>
               <tr>
                  <td width="116" height="26" align="center">专业建设</td>
                  <td width="116" height="26" align="center">学院风采</td>
               </tr>
               <tr>
                  <td colspan="2">
                     <form action="">
                        <input type="text" placeholder="请输入关键词">
                        <button>站内搜索</button>
                     </form>
                     
                  </td>
               </tr>
            </tbody>
         </table>
      </td>
      <td colspan="3">
         <img src="row_2_right.png" alt="">
      </td>
   </tr>
   <tr>
      <td>
         <img src="row_3_links.png" alt="">
      </td>
      <td>
         <img src="row_3_new.png" alt="">
      </td>
      <td>
         <img src="row_3_info.png" alt="">
      </td>
   </tr>
   </tbody>
</table>
</body>

简易css样式代码

<style>
      table
      {
         border-collapse: collapse;
      }
      #nav
      {
         position: relative;
         left:10%;
      }
      a{
         color:#fff;
         text-decoration: none;
         font-size: 15px;
      }
</style>

效果图