HTML常用标签

1,789 阅读2分钟

基本

<html></html>      定义 HTML 文档

<head></head>   文档的信息

<meta>                    HTML 文档的元信息

<title></title>        文档的标题

<link>                      文档与外部资源的关系

<style></style>    文档的样式信息

<body></body>   可见的页面内容

<!--…-->           注释  

文本

<h1>...</h1>               标题字大小(h1~h6)

<b>...</b>                   粗体字

<strong>...</strong>   粗体字(强调) 

<i>...</i>                      斜体字 

<em>...</em>              斜体字(强调)

<center></center>   居中文本

<ul></ul>                 无序列表 

<ol></ol>                 有序列表

<li></li>                    列表项目

<a href=”…”></a>    超链接

<font>                         定义文本字体尺寸、颜色、大小

<sub>                         下标

<sup>                         上标

<br>                           换行
<p>                            段落

表格

表格格式
<table>  //定义一个表格
    <tr>   //行标签
        <th>列标题</th>  //文字自动加粗并居中
    </tr>
    <tr>   //定义行
        <td>单元格标签(列)</td>  //定义列
    </tr>
</table>
table标签属性:

(1)border:设置表格边框的宽度
(2)cellpadding: 单元内容和边框线之间的空白距离
(3)cellspacing:单元格之间的距离
(4)frame:外侧边框的哪个部分是可见的
(5)rules:内侧边框的哪个部分是可见的
(6)summary:表格的摘要
(7)width:表格宽度
(8)height:表格高度
(9)bordercolor:设置表格边框颜色

行标签属性:

(1)align:水平对齐方式
(2)bgcolor:行的背景色

语义标签(读代码时便于区分代码的头部和主体,对表格的显示不起作用)
<thead></thead> //表示表格的头部 
<tbody></tbody> //表示表格的主体 
<tfoot></tfoot> //表示页脚

合并单元格:
(1)单元格跨列:colspan=“列数”
(2)单元格跨行:rowspan=“行数”
例:

表单

表单域:所有表单控件都要放在表单域里

<form action="URL" method="get/post" name="表单名">
        内容	   
 </form>
 action:提交表单时向何处发送表单数据
 method:发送form-data的HTTP方法
表单控件:
姓名:<input type="text" placeholder="请输入您的姓名">
密码:<input type="password" placeholder="请输入您的密码">
年龄:<input type="number" max="120" min="1"> //规定年龄范围
生日:<input type="data">
颜色:<input type="color">
照片:<input type="file">
所在城市:
    <select>
        <option>请选择</option>
        <option>上海</option>
        <option>北京</option>
        <option>广州</option>
        <option>深圳</option>
    </select>
性别:<input type="radio" name="sex" checked>男  //性别默认男
        <input type="radio" name="sex">女 
喜欢的类型:<input type="checkbox">可爱
            <input type="checkbox" checked>性感
            <input type="checkbox" checked>御姐
            <input type="checkbox">萝莉
个人介绍:
<textarea name="" id="" cols="60" rows="10"></textarea>
<input type="submit" value="免费注册">
<input type="reset">

22.png