Html常用标签

来源：cnblogs　　作者：育良书记　　时间：2019/8/12 9:06:25　　对本文有异议

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	表单的名称

原文链接：http://www.cnblogs.com/gtx690/p/11326701.html

友情链接：直通硅谷　点职佳　北美留学生论坛

uni-app 微信小程序 picker 三级联动

记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓的bug(黑屏、错位等等)和解决方法

H5+ 操作手机日历

uni-app开发经验分享十五： uni-app 蓝牙打印功能

设计中的设计PDF下载高清完整扫描原版

前端canvas动画如何转成mp4视频的方法

antd通过 filterDropdown 自定义--按某天时间搜索

H5+ API 设置手机状态栏颜色以及沉浸式状态栏

elementui中el-input联想搜索框

HTML5推荐文章

canvas实现动态替换人物的背景颜色

form 表单恢复初始数据

canvas?中如何实现物体的框选

前端canvas中物体边框和控制点的实现示例

FileReader()读取文件、图片上传预览

跨域访问方法介绍(5)--使用 window.postMessage 传递数据

跨域访问方法介绍(3)--使用片段识别符传值

跨域访问方法介绍(4)--使用 window.name 传值

HTML

前端常用模板引擎- artTemplate