Html常用标签

1.排版标签

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><h7></h7> 标题标签,从左到右依次变小

<p> </p>段落标签

<hr> 水平线标签

<br/> 换行标签

<div></div>  没有语义,布局标签

<span> </span>没有语义,布局标签

<strong> </strong>文字加粗

<em> </em>文字倾斜

<del> </del>文字加删除线

<ins> </ins>文字加下划线
<img src=" " alt=" " title=" " width=" " height=" "> 图片标签

src

图片的url地址
alt 图片不存在时显示的文本信息
title 鼠标悬停在图片上时显示的文字
width 图片的宽度
height 图片的高度
<base target="_blank"/> 所有链接标签,设置为在新的窗口打开链接,一般设置在<head></head>中,全局使用。

 

<a href=" " target=" ">文本或者图片</a>  链接标签
href  目标的url地址
target 链接的打开方式,分为self和blank,self在自己的窗口打开,默认为self,blank是在新的窗口打开链接

2.列表标签

无序列表

<ul>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ul>

有序列表

<ol>

  <li>列表项1</li>

  <li>列表项2</li>

  <li>列表项3</li>

  ......

</ol>

自定义列表

定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:

<dl>

  <dt>名词1</dt>

  <dd>名词1解释1</dd>

  <dd>名词1解释2</dd>

  ...

  <dt>名词2</dt>

  <dd>名词2解释1</dd>

  <dd>名词2解释2</dd>

  ...

</dl>

3.表单标签

<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">

<caption>个人信息表</caption>

  <thead>

<tr>

  <th>姓名</th>

  <th>性别</th>

  <th>电话</th>

</tr>

  </thead>

  <tbody>

<tr>

  <td>小王</td>

  <td></td>

  <td>110</td>

</tr>

<tr>

  <td>小明</td>

  <td></td>

  <td>120</td>

</tr>

  </tbody>

</table>
<thread> 表格的头部
<tbody> 表格的主体
<caption> 表格的标题,一般放在<table>标签下面
<tr> 表格的行
<th> 表格的表头
<td> 表格的单元格
border 表示表格的边框
align 表示表格的位置,默认为left
cellspacing 表示单元格和单元格之间的间距
cellpadding 表示单元格和单元格中的内容的间距

 

表格跨行合并:rowspan,跨列合并:colspan

<table cellpadding="0" cellspacing="0" border="1" width="400">
        <tr>
            <td colspan="3" align="center">123</td>
            <!-- <td>123</td> -->
            <!-- <td>123</td> -->
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

<table cellpadding="0" cellspacing="0" border="1" width="400">
        <tr>
            <td rowspan="3" align="center">123</td>
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <!-- <td>123</td> -->
            <td>123</td>
            <td>123</td>
        </tr>
        <tr>
            <!-- <td>123</td> -->
            <td>123</td>
            <td>123</td>
        </tr>
    </table>

跨行从上往下看,跨列从左往右看。

 Input控件

type text 单行文本输入框
password 密码输入框
radio 单选按钮
checkbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像提交按钮
file 文件上传按钮
name   控件的名称
value   默认文本值
size   在页面显示的宽度
checked   选择控件默认被选中的项
maxLength   允许输入的最多字符数

 

 

Label标签

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea文本域

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单

<select>
  <option selected="selected">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

在option 中定义selected =" selected "时,当前项即为默认选中项。

表单域

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
action 向服务器提交表单的url地址
method 向服务器提交表单的方式,一般分为get和post
name 表单的名称
原文地址:https://www.cnblogs.com/gtx690/p/11326701.html