HTML基础篇(2)——tabke,form

目录结构

功能排序

目前有用的标签大概有100多个,常用的就50个的样子。所以每个功能记住几个常用的大概就够了。具体如下:

标签 描述
基础 ?
<!DOCTYPE> 定义文档类型。
<html> 定义一个 HTML 文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题
<p> 定义一个段落
<br> 定义简单的折行。*
<hr> 定义水平线。*
<!--...--> 定义一个注释*
格式 ?
<acronym> HTML5不再支持。 定义只取首字母的缩写。
<abbr> 定义一个缩写。*
<address> 定义文档作者或拥有者的联系信息。*
<b> 定义粗体文本。*
<bdi>New 允许您设置一段文本,使其脱离其父元素的文本方向设置。*
<bdo> 定义文本的方向。
<big> HTML5不再支持。 定义大号文本。
<blockquote> 定义块引用。*
<center> HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<cite> 定义引用(citation)。
<code> 定义计算机代码文本。
<del> 定义被删除文本。
<dfn> 定义定义项目。
<em> 定义强调文本。*
<font> HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
<i> 定义斜体文本。*
<ins> 定义被插入文本。
<kbd> 定义键盘文本。
<mark>New 定义带有记号的文本。**
<meter>New 定义度量衡。仅用于已知最大和最小值的度量。**
<pre> 定义预格式文本。***
<progress>New 定义运行中的任务进度(进程)。*
<q> 定义短的引用。
<rp>New 定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New 定义字符(中文注音或字符)的解释或发音。
<ruby>New 定义 ruby 注释(中文注音或字符)。
<s> 定义加删除线的文本。
<samp> 定义计算机代码样本。
<small> 定义小号文本。*
<strike> HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。
<strong> 定义语气更为强烈的强调文本。*
<sub> 定义下标文本。*
<sup> 定义上标文本。*
<time>New 定义一个日期/时间
<tt> HTML5不再支持。 定义打字机文本。
<u> 定义下划线文本。
<var> 定义文本的变量部分。
<wbr>New 规定在文本中的何处适合添加换行符。软换行标签*
表单 ?
<form> 定义一个 HTML 表单,用于用户输入。
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件。
<button> 定义按钮。
<select> 定义选择列表(下拉列表)。
<optgroup> 定义选择列表中相关选项的组合。
<option> 定义选择列表中的选项。
<label> 定义 input 元素的标注。
<fieldset> 定义围绕表单中元素的边框。
<legend> 定义 fieldset 元素的标题。
<datalist>New 规定了 input 元素可能的选项列表。**
<keygen>New 规定用于表单的密钥对生成器字段。**
<output>New 定义一个计算的结果。**
框架 ?
<frame> HTML5不再支持。 定义框架集的窗口或框架。
<frameset> HTML5不再支持。定义框架集。
<noframes> HTML5不再支持。 定义针对不支持框架的用户的替代内容。
<iframe> 定义内联框架。***
图像 ?
<img> 定义图像。
<map> 定义图像映射。***
<area> 定义图像地图内部的区域。***
<canvas>New 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。
<figcaption>New 定义一个 caption for a <figure> element
<figure>New figure 标签用于对元素进行组合。
Audio/Video ?
<audio>New 定义声音,比如音乐或其他音频流。***
<source>New 定义media元素 (<video> 和 <audio>)的媒体资源。media***
<track>New 为媒体(<video> 和 <audio>)元素定义外部文本轨道。***
<video>New 定义一个音频或者视频***
链接 ?
<a> 定义一个链接
<link> 定义文档与外部资源的关系。
<nav>New 定义导航链接**
列表 ?
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dir> HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
<dl> 定义一个定义列表
<dt> 定义一个定义定义列表中的项目。
<dd> 定义定义列表中项目的描述。
<menu> 定义菜单列表。
<command>New 定义用户可能调用的命令(比如单选按钮、复选框或按钮)。
表格 ?
<table> 定义一个表格
<caption> 定义表格标题。
<th> 定义表格中的表头单元格。
<tr> 定义表格中的行。
<td> 定义表格中的单元。
<thead> 定义表格中的表头内容。
<tbody> 定义表格中的主体内容。
<tfoot> 定义表格中的表注内容(脚注)。
<col> 定义表格中一个或多个列的属性值。
<colgroup> 定义表格中供格式化的列组。
样式/节 ?
<style> 定义文档的样式信息。
<div> 定义文档中的节。
<span> 定义文档中的节。
<header>New 定义一个文档头部部分
<footer>New 定义一个文档底部
<section>New 定义了文档的某个区域
<article>New 定义一个文章内容
<aside>New 定义其所处内容之外的内容。
<details>New 定义了用户可见的或者隐藏的需求的补充细节。
<dialog>New 定义一个对话框或者窗口
<summary>New 定义一个可见的标题。 当用户点击标题时会显示出详细信息。
元信息 ?
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息。
<base> 定义页面中所有链接的默认地址或默认目标。
<basefont> HTML5不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。
程序 ?
<script> 定义客户端脚本。
<noscript> 定义针对不支持客户端脚本的用户的替代内容。
<applet> HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。
<embed>New 定义了一个容器,用来嵌入外部应用或者互动程序(插件)。***
<object> 定义嵌入的对象。***
<param> 定义对象的参数。***

一、常用的标签。

  • 标题标签:h1~h6
  • 段落标签:p
  • 水平线:hr;这个标签常结合一些属性来清除浮动;noshade取消水平阴影。
    < hr style="height:0;clear: both;" noshade/>
  • 换行标签:br;不换行标签:nobr
  • 列表:ul,ol,li,menu(一般用于菜单)

    See the Pen BoodZm by iTattoo (@ZhouYanlang) on CodePen.

  • 定义描述标签:dl-dt-dd
  • 图片:img
  • 缩进标签:blockquote
  • 文本标签:内联行:span;倾斜:i,em;删除线:del,s;下划线:u,ins;加粗:b,strong;上标:sup;下标:sub;小号字体:small;大号字体:big,strong;

    See the Pen vNNJxX by iTattoo (@ZhouYanlang) on CodePen.

  • 表格:table;表格标题:caption;表头:thead-tr-th;表体:tbody-tr-td;表尾:tfoot-tr-td;设置表格颜色样式:colgroup-col。

    See the Pen rOOzGg by iTattoo (@ZhouYanlang) on CodePen.

  • 超链接标签:a。有三个常用功能,①超链接跳页面,②定义锚点,③功能性链接
    <div id="name">name</div>
    <a href="xxx.html" target="_blank">跳页</a>
    <a href="mailto:xxxx@qq.com">qq</a>
    <a href="#name">点击到name去</a>
  • 表单标签:form

    属性

    属性 描述
    accept MIME_type HTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的)
    accept-charset character_set 规定服务器可处理的表单数据字符集。
    action URL 规定当提交表单时向何处发送表单数据。
    autocompleteNew on
    off
    规定是否启用表单的自动完成功能。
    enctype application/x-www-form-urlencoded
    multipart/form-data
    text/plain
    规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method="post" 的情况)
    method get
    post
    规定用于发送表单数据的 HTTP 方法。
    name text 规定表单的名称。
    novalidateNew novalidate 如果使用该属性,则提交表单时不进行验证。
    target _blank
    _self
    _parent
    _top
    规定在何处打开 action URL。
  • 表单标签:input

    语法

    <input type="value">

    属性值

    描述
    button 定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
    checkbox 定义复选框。
    colorNew 定义拾色器。
    dateNew 定义 date 控件(包括年、月、日,不包括时间)。
    datetimeNew 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
    datetime-localNew 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
    emailNew 定义用于 e-mail 地址的字段。
    file 定义文件选择字段和 "浏览..." 按钮,供文件上传。
    hidden 定义隐藏输入字段。
    image 定义图像作为提交按钮。
    monthNew 定义 month 和 year 控件(不带时区)。
    numberNew 定义用于输入数字的字段。
    password 定义密码字段(字段中的字符会被遮蔽)。
    radio 定义单选按钮。
    rangeNew 定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
    reset 定义重置按钮(重置所有的表单值为默认值)。
    searchNew 定义用于输入搜索字符串的文本字段。
    submit 定义提交按钮。
    telNew 定义用于输入电话号码的字段。
    text 默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
    timeNew 定义用于输入时间的控件(不带时区)。
    urlNew 定义用于输入 URL 的字段。
    weekNew 定义 week 和 year 控件(不带时区)。

     

  • 表单标签:label,fieldset,button,textarea,select,option,optgroup等等;

    See the Pen pjjrpQ by iTattoo (@ZhouYanlang) on CodePen.

  • 表单元素常用属性:

    属性

    New : HTML5新标签。

    属性 描述
    accept audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。 (只针对type="file")
    align left right top middle bottom HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
    alt text 定义图像输入的替代文本。 (只针对type="image")
    autocompleteNew on off autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
    autofocusNew autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
    checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
    disabled disabled isabled 属性规定应该禁用的 <input> 元素。
    formNew form_id form 属性规定 <input> 元素所属的一个或多个表单。
    formactionNew URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
    formenctypeNew application/x-www-form-urlencoded multipart/form-data text/plain 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
    formmethodNew get post 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
    formnovalidateNew formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
    formtargetNew _blank _self _parent _top framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
    heightNew pixels 规定 <input>元素的高度。(只针对type="image")
    listNew datalist_id 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
    maxNew number date 属性规定 <input> 元素的最大值。
    maxlength number 属性规定 <input> 元素中允许的最大字符数。
    minNew number date 属性规定 <input>元素的最小值。
    multipleNew multiple 属性规定允许用户输入到 <input> 元素的多个值。
    name text name 属性规定 <input> 元素的名称。
    patternNew regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式。
    placeholderNew text Splaceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
    readonly readonly readonly 属性规定输入字段是只读的。
    requiredNew required 属性规定必需在提交表单之前填写输入字段。
    size number size 属性规定以字符数计的 <input> 元素的可见宽度。
    src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
    stepNew number step 属性规定 <input> 元素的合法数字间隔。
    type button,checkbox,color,date,datetime
    datetime-local,email,file,hidden
    image,month,number,password,radio
    range,reset,search,submit,tel,text
    time,url,week
    type 属性规定要显示的 <input> 元素的类型。
    value text Specifies the value of an <input> element
    widthNew pixels value 属性规定 <input> 元素的值。 (只针对type="image")