首页 > 其他 > 详细

常见标签

时间：2019-10-27 16:01:54      阅读：168      评论：0      收藏：0      [点我收藏+]

---恢复内容开始---

HTML简介

　　　　HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。技术分享图片

<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

　　　　<html></html> 称为根标签，所有的网页标签都在<html></html>中。

　　　　  <head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。

　　　　在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。

HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

head头部信息相关内容

　　　　<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。　　　　

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是title</title>
</head>
<body>
    <h1>title标签：在title标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题</h1>
</body>
</html>

title标签

 link标签：定义文档与外部资源的关系。

　　　　<link rel="stylesheet" href="../csstes.css" type="text/css">

　　　　<link rel="icon" href="2.png"> 网站的图标

 

　　　　rel="stylesheet"： 它描述了这个link标签引入的资源与当前文档的关系。

　　　　href="../csstes.css"： 链接文档的位置。

　　　　type="text/css 浏览器解析方式

script标签：定义客服端脚本。

　　<script type="text/css" src="index.js"></script>

　　src="index.js" 链接脚本的位置

stylet标签：用于HTML文档定义样式信息。

　　<style type="text/css"></style>

mate标签：元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

　　　　http-equiv属性:浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
　　　　　　　　　　　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 指定文档的内容类型和编码类型

　　　　　　　　　　　　<meta http-equiv="x-ua-compatible" content="IE=edge"> 告诉IE浏览器以最高级模式渲染当前网页


　　　　　　　　　　　　<meta http-equiv="refresh" content="2; url=https://home.firefoxchina.cn/"> 重定向 2秒后跳转到对应的网址

　　　　name属性：主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

　　　　　　　　　　<meta name="keywords" content="火狐主页,网址导航,网址大全,火狐浏览器, 火狐官方社区, Firefox, Mozilla Firefox, Mozilla, 火狐, 互联网, 网络浏览器, 上网软件,谋智, 谋智网络">

　　　　　　　　　　<meta name="description" content="火狐主页为您提供最新最全的搜索、网址导航、新闻资讯、网络购物等服务。">

body常见标签：
　　del标签：删除文本，内容会显示一道换线。
　　

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <del>我已经被删除了</del>
</body>
</html>

View Code

　　标题标签h1~h6

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我是中国人</h1>
    <h2>我是中国人</h2>
    <h3>我是中国人</h3>
    <h4>我是中国人</h4>
    <h5>我是中国人</h5>
    <h6>我是中国人</h6>
</body>
</html>

View Code

　　段落标签p

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>人工智能等互联网最前沿技术,开启职业生涯新可能</p>
</body>
</html>

View Code

　　图片标签img

　　语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" / >

                        src设置的图片地址可以是本地的地址也可以是一个网络地址。

                        图片的格式可以是png、jpg和gif。

                         alt属性的值会在图片加载失败时显示在网页上。

                        还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度

　　　　

       绝对路径和相对路径

                     　　像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

                              绝对地址：相对于磁盘的位置去定位文件的地址

                              相对地址：相对于引用文件本身去定位被引用的文件地址

                               绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧

   　　　　　　　 “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

　　　　　　　　 “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

　　超链接标签a　　　　

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
    <a href="#d1">第一章</a>
    <a href="#d2">第二章</a>
    <a href="#d3">第三章</a>
    <a href="http://www.baidu.com" title="百度">百度</a>
    <a href="http://www.baidu.com" title="百度" target="_blank">百度</a>
    <a href="z.zip">下载包</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="d1">第一章</h3>
    <p>7月30日上午，重庆渝北区两路附近，一位驾驶红色保时捷的女子在掉头时与另一辆车的男司机发生口角。视频显示，女子先出手给了男司机一耳光，男子反手扇了该女子一耳光，女子的帽子也被扇飞。</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="d2">第二章</h3>
    <p>7月30日上午，重庆渝北区两路附近，一位驾驶红色保时捷的女子在掉头时与另一辆车的男司机发生口角。视频显示，女子先出手给了男司机一耳光，男子反手扇了该女子一耳光，女子的帽子也被扇飞。</p>
<br />

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="d3">第三章</h3>
    <p>7月30日上午，重庆渝北区两路附近，一位驾驶红色保时捷的女子在掉头时与另一辆车的男司机发生口角。视频显示，女子先出手给了男司机一耳光，男子反手扇了该女子一耳光，女子的帽子也被扇飞。</p>
    <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
    <a href="#">停止到顶部</a>
    <!--
    javascript是表示在触发<a>默认动作时，执行一段javascript代码，而javascript:;表示什么都不执行，这样点击<a>时就没有任何反应，把a的默认动作取消了
    -->
    <a href="javascript:alert(1)">内容</a>
    <a href="javascript:;">内容</a>
</body>
</html>

View Code

　　　　target属性：规定在何处打开链接文档

　　　　　　_blank    在新标签中打开

　　　　　　_parent  在父标签中打开

　　　　　　_top     清除所有框架，载入到浏览器窗口

　　　　　　_self     默认在自己窗口打开

 

　　　　锚点，要设置id，使用时让其跳转。

　　　　

　　　　链接其他表现形式：

　　　　　　　　目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)

　　　　　　　　电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：<a href="mailto:zhaoxu@tedu.cn">联系我们</a>

　　　　　　　　返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a>

　　　　　　　　javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a>

　　　　　　　　javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a

 

　　　pre标签

　　　　　　被包围在pre标签中的文本会保留空格和换行符。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <pre>
            春眠不觉晓，
              处处闻啼鸟。
                夜来风雨声，
                  花落知多少。
        </pre>
</body>
</html>

View Code

　　　strong标签

　　　　　　用于强调文本，和<em>标签一样。但不同：strong的强调程度更强一些，正常加粗显示，em斜体显示。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    我是strong标签
    </br>
    <strong>
        我是strong标签
    </strong>
    </br>
    我是em标签
    </br>
    <em>
        我是em标签
    </em>
</body>
</html>

View Code

　　u标签

　　　　　　文本下加下划线

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <u>
        哈哈哈，别误会，我不是a标签，不要点我，我怕痛
    </u>
</body>
</html>

View Code

　　列表　　

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <ul type="none">
        <h3>无序列表</h3>
        <li>我的账号&nbsp;&nbsp;&gt;</li>
        <li>我的订单&nbsp;&nbsp;&gt;</li>
        <li>我的收藏&nbsp;&nbsp;&gt;</li>
        <li>我的优惠劵&nbsp;&nbsp;&gt;</li>
        <li>退出</li>

    </ul>
    <br />
    <br />
    <ol style="list-style: none">
        <h3>有序列表</h3>
        <li>我的账号&nbsp;&nbsp;&gt;</li>
        <li>我的订单&nbsp;&nbsp;&gt;</li>
        <li>我的收藏&nbsp;&nbsp;&gt;</li>
        <li>我的优惠劵&nbsp;&nbsp;&gt;</li>
        <li>退出</li>
    </ol>
<!--type可以选择类型-->
</body>
</html>

View Code

　　　

　　　　ol标签的属性：

　　　　　　type：列表标识的类型

　　　　　　　　　　1：数字

　　　　　　　　　　a：小写字母

　　　　　　　　　　A：大写字母

　　　　　　　　　　i：小写罗马字符

　　　　　　　　　　I：大写罗马字符

　　　　　　列表标识的起始编号

　　　　　　　　　　默认为1

　　　　　　ul标签的属性： type：列表标识的类型

　　　　　　　　　　disc：实心圆(默认值)

　　　　　　　　　　circle：空心圆

　　　　　　　　　　square：实心矩形

　　　　　　　　　　none：不显示标识

　　定义列表：通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>前端三大块</h3>
        <dl>
            <dt>html</dt>
            <dd>负责页面的结构</dd>

            <dt>css</dt>
            <dd>负责页面的表现</dd>

            <dt>javascript</dt>
            <dd>负责页面的行为</dd>

        </dl>
</body>
</html>

View Code

　　address标签

　　　　　　定义文档或文章的作者联系信息

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <address>
        上海浦东
    </address>
</body>
</html>

View Code

　　small标签

　　　　　　小号字体效果，如果是最小字体，就不会有任何效果

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <small>
        小号字体
    </small>
</body>
</html>

View Code

　　big标签

　　　　　　small大约是13号字体，big18号字体

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <big>
        small大约是13号字体，big18号字体
    </big>
</body>
</html>

View Code

　　表格标签table

　　　　　　表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义,定义表格中的一行），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。th表示表头单元格。

技术分享图片

 

 　　　　

　　table常用属性：

　　　　　　　　　　1、border 定义表格的边框

　　　　　　　　　　2、cellpadding 定义单元格内内容与边框的距离

　　　　　　　　　　3、cellspacing 定义单元格与单元格之间的距离

　　　　　　　　　　4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

　　　　　　　　　　5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

　　　　　　　　　　6、colspan 设置单元格水平合并

　　　　　　　　　　7、rowspan 设置单元格垂直合并

 

　　

　　传统布局：

　　　　　　传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

　　　　　　1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

　　　　　　2、单元格里面嵌套表格

　　　　　　3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

　　　　　　4、通过属性或者css样式设置单元格中元素的样式

　　传统布局目前应用：

　　　　　　1、快速制作用于演示的html页面

　　　　　　2、商业推广EDM制作(广告邮件)

　　

　　表格常用样式属性

　　　　　　border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <thead>
            /*表格行*/
            <tr>
                <!--表格列，【注意】这里使用的是th-->
                <th></th>
            </tr>
        </thead>
        <tbody>
            /*表格主体*/
            <tr>
                <!--表格列，【注意】这里使用的是td-->
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <!--表格底部-->
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>

View Code

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" cellspacing="0" align="center" cellpadding="10px">
        <thead>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody>
            <tr >
                <td rowspan="4">上午</td>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>
                
                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

View Code

 

 

　表单标签form

　　　　　　表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）

　　　属性：　　　　　技术分享图片

 

　　 控件：

　　技术分享图片

 

 

　　　一个表单包含三个基本组成部分：　　

　　　　　　　　　　　　表单标签   它是一个包含表单元素的区域，使用<form></form>定义

　　　　　　　　　　　　表单域   收集用户输入的每一项，用input标签来定义。

　　　　　　　　　　　　 表单按钮     用来提交表单中所有信息到服务器

 

　表单元素（input组元素）

　　单行文本框  <input type="text"> 

　　多行文本框   <textarea></textarea>   文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定, textarea的尺寸。不过更好地办法是使用css的height和width属性。　　　　　　　　　　textarea中间有空格即为有内容，就会required属性不生效。

　　　　　　　　属性   cols="30"   宽度。   rrows=“10”  高度。 placeholder描述文本域预期值的简短提示。  readonly 文本区为只读。  required 文本区是必填的不能和readonly一　　　　　　　　　　　　起用。多行文本是可以拖动改变大小，如果不希望布局被改变，可以使用css来控制style = "resize:none"

　　密码框     <inputtype="password">

　　复选框   <input type="checkbox">

　　单选按钮   input type="radio">

　　提交按钮   <input type="submit"> 

　　普通按钮   <input type="button">

　　重置按钮   <input type="reset" value="重置">

　　文件上传    <form action="" method="post" enctype="multipart/form-data">
　　　　　　　　　　<input type="file" name="textFile">
　　　　　　　　</form>   以二进制传输文件

 

　　　　　　

　　下拉框      <select name="sel" id="">
　　　　　　　　　　<option value="深圳">深圳</option>
　　　　　　　　　　<option value="上海">上海</option>
　　　　　　　　　　<option value="长沙">长沙</option>
　　　　　　　　　　<option value="北京">北京</option>
　　　　　　　</select>

　　　　　　　　select属性：namex下拉框列表的名称。 sizex下拉列表中可见选项的数目（显示几行） disabled="disabled"规定不用该下拉列表。multiple设置以后实现多选效果

 

 

　　　　　　　　option属性： value送往服务器的选项值。selected="selected"规定选项选中状态。

　　隐藏域    <input  type="hidden">  定义隐藏的输入字段。隐藏域在页面中对于用户是不可的，在表单中插入隐藏域的目的在于收集或发送消息，利于被处理表单的程序使用。隐藏域使用name和value属性来规定参数名和参数值

 

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="hidden" name="隐藏域的名" value="隐藏域的值">
        <input type="submit" value="提交">
    </form>
</body>

View Code

 

　　元素集   <fieldset></fieldset>   可以将表单内相关元素分组，通常和legend标签一起用。

 

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>健康信息</legend>
        体重：<input type="text">
        身高：<input type="text">
    </fieldset>
</body>
</html>

View Code

 

　　label标签     label是input的描述，它本身不会有特性，但它和其他input标签使用可以提升使用用户的使用体验，通过label的for指向按钮的id来绑定。一般和radio，CheckBox类型一起使用。

　　　　

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="checkbox" name="pwd" id="pwd">
        <label for="pwd">记住密码</label>

    </form>
</body>
</html>

View Code

 　　　表单域需要name属性才可以把数据提交到服务器，只有不想提交的才不写name。单选按钮和复选框：name相同即为同一组，一组单选按钮只能选中一个按钮

　html5新增表单控件：

　　　　email类型   用于包含e-mail 地址输入域，在提交表单时，会自动验证emaill域的值。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
       E-mail <input type="email" name="email_user">
        <input type="submit" value="提交">
    </form>
</body>
</html>

View Code

　　　　url类型   用于包含URL输入域，在提交表单时，会自动验证url域的值。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        URL <input type="url" name="url_user">
    </form>
</body>
</html>

View Code

　　　　color类型   提供一个面板，可以选择颜色值。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        颜色：<input type="color">
    </form>
</body>
</html>

View Code

　　　　search类型  用于搜索

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="search" name="search_user" placeholder="请输入搜索内容">
    </form>
</body>
</html>

View Code

　　　　number类型     用于包含数值的输入域。还能够设定对所接受的数字限定，通过min设置最小值，max设置最大值。超出范围会提示。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="number" name="points" min="1", max="10">
    </form>
</body>
</html>

View Code

　　　　range类型  用于包含一定范围内数字值的输入域。range类显示为滚动条，规定范围（最大最小值）， 还可以设置value

　　　　　　　　属性：min最小值。 max最大值。value当前值。最大最小值规定一个范围。

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
       1 <input type="range" max="10" min="1" value="">10
    </form>
</body>
</html>

View Code

　　　　tel类型    电话

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        tel:<input type="tel">
    </form>
</body>
</html>

View Code

 　　　　星期 

技术分享图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        星期:<input type="week" name=""><br><br>
    </form>
</body>
</html>

View Code

　　新增常用表单控件属性：
　　　　　　1、placeholder 设置文本框默认提示文字
　　　　　　2、autofocus 自动获得焦点
　　　　　　3、autocomplete 联想关键词

 

　　其他标签：
　　　　　　含样式和语义的标签

　　　　　　　　1、em标签 行内元素，表示语气中的强调词
　　　　　　　　2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
　　　　　　　　3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
　　　　　　　　4、strong标签 行内元素，表示非常重要的内容
　　　　　　　　5、div标签 块元素，表示一块内容，没有具体的语义。
　　　　　　　　6、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
　　　　　　　　7、<sup></sup>`：上标
　　　　　　　　8 、`<sub></sub>`：下标
　　　　　　　　9、换行标签 <br>    　<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
　　　　　　　　10、分割线 <hr>             <hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容

　　　　　　　　11、特殊符号
　　　　　　　　　　　　　　浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML　　　　　　　　　　　　　　代码中的所有连续的空行（换行）也被显示为　　　　一个空格 &nbsp;，&gt;（>）， &lt;(<)，&amp;(&)，&reg(注册)。

　　　　　　　　　　　　　　HTML特殊字符对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx

 

　　标签分类： 块状元素，行内元素，行内块状元素。　　

　　　　　　常见块状元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

　　　　　　行内元素：<a> <span> <br> <i> <em> <strong> <label>

　　　　　　行内块状元素  <img> <input>

 

　　块级元素特点：display:block;

　　　　　　1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

　　　　　　2、元素的高度、宽度、行高以及顶和底边距都可设置。

　　　　　　3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

　　行内元素特点：display:inline;

　　　　　　1、和其他元素都在一行上；

　　　　　　2、元素的高度、宽度及顶部和底部边距不可设置；

　　　　　　3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

　　行内块状元素的特点：display:inline-block;

　　　　　　1、和其他元素都在一行上；

　　　　　　2、元素的高度、宽度、行高以及顶和底边距都可设置

 

　　　

 



---恢复内容结束---


HTML简介


　　　　HTML，全称是超文本标记语言（HyperText Markup Language），它是一种用于创建网页的标记语言。标记语言是一种将文本（Text）以及文本相关的其他信息结合起来，展现出关于文档结构和数据处理细节的计算机文字编码。与文本相关的其他信息（包括例如文本的结构和表示信息等）与原来的文本结合在一起，但是使用标记（markup）进行标识。技术分享图片


<!DOCTYPE HTML>是文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。


　　　　<html></html> 称为根标签，所有的网页标签都在<html></html>中。


　　　　  <head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。


　　　　在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。


HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。


head头部信息相关内容


　　　　<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题。　　　　


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是title</title>
</head>
<body>
    <h1>title标签：在title标签之间的文字内容是网页的标题信息，它会显示在浏览器标签页的标题栏中。可以把它看成是一个网页的标题。主要用来告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出当前网页的主题</h1>
</body>
</html>




title标签


 link标签：定义文档与外部资源的关系。


　　　　<link rel="stylesheet" href="../csstes.css" type="text/css">


　　　　<link rel="icon" href="2.png">   网站的图标


 


　　　　rel="stylesheet"： 它描述了这个link标签引入的资源与当前文档的关系。


　　　　href="../csstes.css"： 链接文档的位置。


　　　　type="text/css 浏览器解析方式

script标签：定义客服端脚本。


　　<script type="text/css" src="index.js"></script>


 　　src="index.js" 链接脚本的位置


stylet标签：用于HTML文档定义样式信息。


　　<style type="text/css"></style>


mate标签：元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。标签位于文档的头部，不包含任何内容。meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。


　　　　http-equiv属性:浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
　　　　　　　　　　　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8">   指定文档的内容类型和编码类型


　　　　　　　　　　　　<meta http-equiv="x-ua-compatible" content="IE=edge">   告诉IE浏览器以最高级模式渲染当前网页



　　　　　　　　　　　　<meta http-equiv="refresh" content="2; url=https://home.firefoxchina.cn/"> 重定向 2秒后跳转到对应的网址

　　　　name属性：主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ‘,’号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。


　　　　　　　　　　<meta name="keywords" content="火狐主页,网址导航,网址大全,火狐浏览器, 火狐官方社区, Firefox, Mozilla Firefox, Mozilla, 火狐, 互联网, 网络浏览器, 上网软件,谋智, 谋智网络">


　　　　　　　　　　<meta name="description" content="火狐主页为您提供最新最全的搜索、网址导航、新闻资讯、网络购物等服务。">


body常见标签：
　　del标签：删除文本，内容会显示一道换线。
　　


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <del>我已经被删除了</del>
</body>
</html>




View Code


　　标题标签h1~h6


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>我是中国人</h1>
    <h2>我是中国人</h2>
    <h3>我是中国人</h3>
    <h4>我是中国人</h4>
    <h5>我是中国人</h5>
    <h6>我是中国人</h6>
</body>
</html>




View Code


　　段落标签p


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>人工智能等互联网最前沿技术,开启职业生涯新可能</p>
</body>
</html>




View Code


　　图片标签img


　　语法：<img src="图片地址" alt="图片加载失败时显示的内容" title = "提示信息" / >


                        src设置的图片地址可以是本地的地址也可以是一个网络地址。


                        图片的格式可以是png、jpg和gif。


                         alt属性的值会在图片加载失败时显示在网页上。


                        还可以为图片设置宽度(width)和高度(height)，不设置就显示图片默认的宽度和高度


　　　　


       绝对路径和相对路径


                     　　像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。


                              绝对地址：相对于磁盘的位置去定位文件的地址


                              相对地址：相对于引用文件本身去定位被引用的文件地址


                               绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧


   　　　　　　　 “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。


　　　　　　　　 “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。


　　超链接标签a　　　　


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a标签</title>
</head>
<body>
    <a href="#d1">第一章</a>
    <a href="#d2">第二章</a>
    <a href="#d3">第三章</a>
    <a href="http://www.baidu.com" title="百度">百度</a>
    <a href="http://www.baidu.com" title="百度" target="_blank">百度</a>
    <a href="z.zip">下载包</a>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="d1">第一章</h3>
    <p>7月30日上午，重庆渝北区两路附近，一位驾驶红色保时捷的女子在掉头时与另一辆车的男司机发生口角。视频显示，女子先出手给了男司机一耳光，男子反手扇了该女子一耳光，女子的帽子也被扇飞。</p>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="d2">第二章</h3>
    <p>7月30日上午，重庆渝北区两路附近，一位驾驶红色保时捷的女子在掉头时与另一辆车的男司机发生口角。视频显示，女子先出手给了男司机一耳光，男子反手扇了该女子一耳光，女子的帽子也被扇飞。</p>
<br />

    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <h3 id="d3">第三章</h3>
    <p>7月30日上午，重庆渝北区两路附近，一位驾驶红色保时捷的女子在掉头时与另一辆车的男司机发生口角。视频显示，女子先出手给了男司机一耳光，男子反手扇了该女子一耳光，女子的帽子也被扇飞。</p>
    <a href="mailto:zhaoxu@tedu.cn">联系我们</a>
    <a href="#">停止到顶部</a>
    <!--
    javascript是表示在触发<a>默认动作时，执行一段javascript代码，而javascript:;表示什么都不执行，这样点击<a>时就没有任何反应，把a的默认动作取消了
    -->
    <a href="javascript:alert(1)">内容</a>
    <a href="javascript:;">内容</a>
</body>
</html>




View Code


　　　　target属性：规定在何处打开链接文档


　　　　　　_blank    在新标签中打开


　　　　　　_parent  在父标签中打开


　　　　　　_top     清除所有框架，载入到浏览器窗口


　　　　　　_self     默认在自己窗口打开


 


　　　　锚点，要设置id，使用时让其跳转。


　　　　


　　　　链接其他表现形式：


　　　　　　　　目标文档为下载资源 例如：href属性值，指定的文件名称，就是下载操作(rar、zip等)


　　　　　　　　电子邮件链接 前提：计算机中必须安装邮件客户端，并且配置好了邮件相关信息。 例如：<a href="mailto:zhaoxu@tedu.cn">联系我们</a>


　　　　　　　　返回页面顶部的空链接或具体id值的标签 例如：<a href="#">内容</a>或<a href="#id值">内容</a>


　　　　　　　　javascript:是表示在触发<a>默认动作时，执行一段JavaScript代码。 例如：<a href="javascript:alert()">内容</a>


　　　　　　　　javascript:;表示什么都不执行，这样点击<a>时就没有任何反应 例如：<a href="javascrip:;">内容</a


 


　　　pre标签


　　　　　　被包围在pre标签中的文本会保留空格和换行符。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <pre>
            春眠不觉晓，
              处处闻啼鸟。
                夜来风雨声，
                  花落知多少。
        </pre>
</body>
</html>




View Code


　　　strong标签


　　　　　　用于强调文本，和<em>标签一样。但不同：strong的强调程度更强一些，正常加粗显示，em斜体显示。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    我是strong标签
    </br>
    <strong>
        我是strong标签
    </strong>
    </br>
    我是em标签
    </br>
    <em>
        我是em标签
    </em>
</body>
</html>




View Code


　　u标签


　　　　　　文本下加下划线


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <u>
        哈哈哈，别误会，我不是a标签，不要点我，我怕痛
    </u>
</body>
</html>




View Code


　　列表　　


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <ul type="none">
        <h3>无序列表</h3>
        <li>我的账号&nbsp;&nbsp;&gt;</li>
        <li>我的订单&nbsp;&nbsp;&gt;</li>
        <li>我的收藏&nbsp;&nbsp;&gt;</li>
        <li>我的优惠劵&nbsp;&nbsp;&gt;</li>
        <li>退出</li>

    </ul>
    <br />
    <br />
    <ol style="list-style: none">
        <h3>有序列表</h3>
        <li>我的账号&nbsp;&nbsp;&gt;</li>
        <li>我的订单&nbsp;&nbsp;&gt;</li>
        <li>我的收藏&nbsp;&nbsp;&gt;</li>
        <li>我的优惠劵&nbsp;&nbsp;&gt;</li>
        <li>退出</li>
    </ol>
<!--type可以选择类型-->
</body>
</html>




View Code


　　　


　　　　ol标签的属性：


　　　　　　type：列表标识的类型


　　　　　　　　　　1：数字


　　　　　　　　　　a：小写字母


　　　　　　　　　　A：大写字母


　　　　　　　　　　i：小写罗马字符


　　　　　　　　　　I：大写罗马字符


　　　　　　列表标识的起始编号


　　　　　　　　　　默认为1


　　　　　　ul标签的属性： type：列表标识的类型


　　　　　　　　　　disc：实心圆(默认值)


　　　　　　　　　　circle：空心圆


　　　　　　　　　　square：实心矩形


　　　　　　　　　　none：不显示标识


　　定义列表：通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h3>前端三大块</h3>
        <dl>
            <dt>html</dt>
            <dd>负责页面的结构</dd>

            <dt>css</dt>
            <dd>负责页面的表现</dd>

            <dt>javascript</dt>
            <dd>负责页面的行为</dd>

        </dl>
</body>
</html>




View Code


　　address标签


　　　　　　定义文档或文章的作者联系信息


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <address>
        上海浦东
    </address>
</body>
</html>




View Code


　　small标签


　　　　　　小号字体效果，如果是最小字体，就不会有任何效果


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <small>
        小号字体
    </small>
</body>
</html>




View Code


　　big标签


　　　　　　small大约是13号字体，big18号字体


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <big>
        small大约是13号字体，big18号字体
    </big>
</body>
</html>




View Code


　　表格标签table


　　　　　　表格由<table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义,定义表格中的一行），每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。th表示表头单元格。


技术分享图片


 


 　　　　


　　table常用属性：


　　　　　　　　　　1、border 定义表格的边框


　　　　　　　　　　2、cellpadding 定义单元格内内容与边框的距离


　　　　　　　　　　3、cellspacing 定义单元格与单元格之间的距离


　　　　　　　　　　4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right


　　　　　　　　　　5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom


　　　　　　　　　　6、colspan 设置单元格水平合并


　　　　　　　　　　7、rowspan 设置单元格垂直合并


 


　　


　　传统布局：


　　　　　　传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：


　　　　　　1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0


　　　　　　2、单元格里面嵌套表格


　　　　　　3、单元格中的元素和嵌套的表格用align和valign设置对齐方式


　　　　　　4、通过属性或者css样式设置单元格中元素的样式


　　传统布局目前应用：


　　　　　　1、快速制作用于演示的html页面


　　　　　　2、商业推广EDM制作(广告邮件)


　　


　　表格常用样式属性


　　　　　　border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table>
        <thead>
            /*表格行*/
            <tr>
                <!--表格列，【注意】这里使用的是th-->
                <th></th>
            </tr>
        </thead>
        <tbody>
            /*表格主体*/
            <tr>
                <!--表格列，【注意】这里使用的是td-->
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <!--表格底部-->
            <tr>
                <td></td>
            </tr>
        </tfoot>
    </table>




View Code


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1px" cellspacing="0" align="center" cellpadding="10px">
        <thead>
            <tr>
                <th></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
                <th>星期六</th>
            </tr>
        </thead>
        <tbody>
            <tr >
                <td rowspan="4">上午</td>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>
                
                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>
                <td rowspan="2">下午</td>
                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
            <tr>

                <td>数学</td>
                <td>英语</td>
                <td>化学</td>
                <td>物理</td>
                <td>生物</td>
                <td>语文</td>
            </tr>
        </tbody>
    </table>
</body>
</html>




View Code


 


 


　表单标签form


　　　　　　表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入。表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）


　　　属性：　　　　　技术分享图片


 


　　 控件：


　　技术分享图片


 


 


　　　一个表单包含三个基本组成部分：　　


　　　　　　　　　　　　表单标签   它是一个包含表单元素的区域，使用<form></form>定义


　　　　　　　　　　　　表单域   收集用户输入的每一项，用input标签来定义。


　　　　　　　　　　　　 表单按钮     用来提交表单中所有信息到服务器


 


　表单元素（input组元素）


　　单行文本框  <input type="text"> 


　　多行文本框   <textarea></textarea>   文本区中可容纳无限数量的文本，可以通过cols和rows属性来规定, textarea的尺寸。不过更好地办法是使用css的height和width属性。　　　　　　　　　　textarea中间有空格即为有内容，就会required属性不生效。


　　　　　　　　属性   cols="30"   宽度。   rrows=“10”  高度。 placeholder描述文本域预期值的简短提示。  readonly 文本区为只读。  required 文本区是必填的不能和readonly一　　　　　　　　　　　　起用。多行文本是可以拖动改变大小，如果不希望布局被改变，可以使用css来控制style = "resize:none"


　　密码框     <inputtype="password">


　　复选框   <input type="checkbox">


　　单选按钮   input type="radio">


　　提交按钮   <input type="submit">  


　　普通按钮   <input type="button">


　　重置按钮   <input type="reset" value="重置">


　　文件上传    <form action="" method="post" enctype="multipart/form-data">
    　　　　　　　　　　<input type="file" name="textFile">
　　　　　　　　</form>   以二进制传输文件


 


　　　　　　


　　下拉框      <select name="sel" id="">
    　　　　　　　　　　<option value="深圳">深圳</option>
     　　　　　　　　　　<option value="上海">上海</option>
     　　　　　　　　　　<option value="长沙">长沙</option>
     　　　　　　　　　　<option value="北京">北京</option>
　　　　　　　</select>


　　　　　　　　select属性：namex下拉框列表的名称。 sizex下拉列表中可见选项的数目（显示几行） disabled="disabled"规定不用该下拉列表。multiple设置以后实现多选效果


 


 


　　　　　　　　option属性： value送往服务器的选项值。selected="selected"规定选项选中状态。


　　隐藏域    <input  type="hidden">  定义隐藏的输入字段。隐藏域在页面中对于用户是不可的，在表单中插入隐藏域的目的在于收集或发送消息，利于被处理表单的程序使用。隐藏域使用name和value属性来规定参数名和参数值


 


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="hidden" name="隐藏域的名" value="隐藏域的值">
        <input type="submit" value="提交">
    </form>
</body>




View Code


 


　　元素集   <fieldset></fieldset>   可以将表单内相关元素分组，通常和legend标签一起用。


 


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>健康信息</legend>
        体重：<input type="text">
        身高：<input type="text">
    </fieldset>
</body>
</html>




View Code


 


　　label标签     label是input的描述，它本身不会有特性，但它和其他input标签使用可以提升使用用户的使用体验，通过label的for指向按钮的id来绑定。一般和radio，CheckBox类型一起使用。


　　　　


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="checkbox" name="pwd" id="pwd">
        <label for="pwd">记住密码</label>

    </form>
</body>
</html>




View Code


 　　　表单域需要name属性才可以把数据提交到服务器，只有不想提交的才不写name。单选按钮和复选框：name相同即为同一组，一组单选按钮只能选中一个按钮


　html5新增表单控件：


　　　　email类型   用于包含e-mail 地址输入域，在提交表单时，会自动验证emaill域的值。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
       E-mail <input type="email" name="email_user">
        <input type="submit" value="提交">
    </form>
</body>
</html>




View Code


　　　　url类型   用于包含URL输入域，在提交表单时，会自动验证url域的值。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        URL <input type="url" name="url_user">
    </form>
</body>
</html>




View Code


　　　　color类型   提供一个面板，可以选择颜色值。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        颜色：<input type="color">
    </form>
</body>
</html>




View Code


　　　　search类型  用于搜索


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="search" name="search_user" placeholder="请输入搜索内容">
    </form>
</body>
</html>




View Code


　　　　number类型     用于包含数值的输入域。还能够设定对所接受的数字限定，通过min设置最小值，max设置最大值。超出范围会提示。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="number" name="points" min="1", max="10">
    </form>
</body>
</html>




View Code


　　　　range类型  用于包含一定范围内数字值的输入域。range类显示为滚动条，规定范围（最大最小值）， 还可以设置value


　　　　　　　　属性：min最小值。 max最大值。value当前值。最大最小值规定一个范围。


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
       1 <input type="range" max="10" min="1" value="">10
    </form>
</body>
</html>




View Code


　　　　tel类型    电话 


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        tel:<input type="tel">
    </form>
</body>
</html>




View Code


 　　　　星期 


技术分享图片




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        星期:<input type="week" name=""><br><br>
    </form>
</body>
</html>




View Code


　　新增常用表单控件属性：
　　　　　　1、placeholder 设置文本框默认提示文字
　　　　　　2、autofocus 自动获得焦点
　　　　　　3、autocomplete 联想关键词


 


　　其他标签：
　　　　　　含样式和语义的标签

　　　　　　　　1、em标签 行内元素，表示语气中的强调词
　　　　　　　　2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
　　　　　　　　3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
　　　　　　　　4、strong标签 行内元素，表示非常重要的内容
　　　　　　　　5、div标签 块元素，表示一块内容，没有具体的语义。
　　　　　　　　6、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
　　　　　　　　7、<sup></sup>`：上标 
　　　　　　　　8 、`<sub></sub>`：下标
　　　　　　　　9、换行标签 <br>    　<br>标签用来将内容换行，其在HTML网页上的效果相当于我们平时使用word编辑文档时使用回车换行。
　　　　　　　　10、分割线 <hr>             <hr>标签用来在HTML页面中创建水平分隔线，通常用来分隔内容


　　　　　　　　11、特殊符号
　　　　　　　　　　　　　　浏览器在显示的时候会移除源代码中多余的空格和空行。 所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML　　　　　　　　　　　　　　代码中的所有连续的空行（换行）也被显示为　　　　一个空格 &nbsp;，&gt;（>）， &lt;(<)，&amp;(&)，&reg(注册)。


　　　　　　　　　　　　　　HTML特殊字符对照表：http://tool.chinaz.com/Tools/HtmlChar.aspx


 


　　标签分类： 块状元素，行内元素，行内块状元素。　　

　　　　　　常见块状元素： <div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

　　　　　　行内元素：<a> <span> <br> <i> <em> <strong> <label>

　　　　　　行内块状元素  <img> <input>

 

　　块级元素特点：display:block;

　　　　　　1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

　　　　　　2、元素的高度、宽度、行高以及顶和底边距都可设置。

　　　　　　3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

　　行内元素特点：display:inline;

　　　　　　1、和其他元素都在一行上；

　　　　　　2、元素的高度、宽度及顶部和底部边距不可设置；

　　　　　　3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

　　行内块状元素的特点：display:inline-block;

　　　　　　1、和其他元素都在一行上；

　　　　　　2、元素的高度、宽度、行高以及顶和底边距都可设置



 


　　　


 


常见标签
原文：https://www.cnblogs.com/zqxqx/p/11167798.html

                

                
                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                            

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            
                            

                        

                    

                

                
            

        

        

            

    



            
            


    

        

            分享档案

        

            更多>
        

        

        

    

    

        
                
                    2021年09月23日
                    (328)

            
                
                    2021年09月24日
                    (313)

            
                
                    2021年09月17日
                    (191)

            
                
                    2021年09月15日
                    (369)

            
                
                    2021年09月16日
                    (411)

            
                
                    2021年09月13日
                    (439)

            
                
                    2021年09月11日
                    (398)

            
                
                    2021年09月12日
                    (393)

            
                
                    2021年09月10日
                    (160)

            
                
                    2021年09月08日
                    (222)

            
    




            


    

        
最新文章

        

            更多>

        

        

    

    

        
    




            


    

        
教程昨日排行

        

            更多>

        

        

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            汇智网  
            PHP教程  
            插件网  
					
			
        

    





    

        

            

                关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
            

            

                © 2014 bubuko.com 版权所有
            

            

                打开技术之扣，分享程序人生！