De Marcia
Always Creative.
Welcome!

YOU'VE MADE A BRAVE DECISION, WELCOME.

每一个不曾起舞的日子都是对生命的辜负。

2016-02-25

HTML元素归整

学习前端有些时间，今天对前段时间学习的HTML做一个系统的整理。
首先要说的就是

HTML的基本结构

HTML的基本结构很简单，如下

<html>
<head>
     <title></title>
</head>
<body>

 </body>
</html>

在HTML最顶端有一个

<!DOCTYPE html>

这是一个标准的网页声明，声明文档类型，是给浏览器识别，声明以何种文档类型解析。

HTML不区分大小写，对大小写不敏感，但是推荐小写，这是一个规范。

HTML标签及作用

基本标签

html为根标签，告知浏览器其自身为一个HTML文档。

head标签为文档的头部，它是所有头部元素的容器base,link, meta, script，style, 以及 title标签可以用在head部分，其中base标签为页面上的所有链接规定默认地址或默认目标，link为链接外部CSS文件的，meta标签的作用比较多，另开一片作为说明，script为链接外部JS文件或者写入JS文件的，style为内部CSS标签。

h1~h6标签

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。他们都为块级标签，有默认的margin，默认加粗。

img标签

img标签石芳芳图片的标签，有两个属性alt和src；alt是推向的代替文本，url是所显示图像的链接，img不是会计标签，他的默认display为inline，但是它可以直接设置宽高。

q,blockquote标签

q标签短文本引用比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么你就可以使用q标签。
blockquote 和q标签相似，他是长文本引用。

br,hr标签

br 换行标签。
hr 分割线标签。
都为单标签。

code,pre标签

都为引入代码的标签，但是code适合单行代码，不需要换行，如果你需要换行那就推荐你用pre标签。

列表标签

无序列表为ul配合li如下图

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

他们是成套使用的ul标签的子标签只能为li不能添加其它标签。
有序列表为ol配合li，和ul相似也是成套使用，在这就不做赘述了。

表格标签

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、thead、tfoot 以及 tbody 元素。

<table summary="表格摘要">
    <caption>Name</caption>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
</table>

表单元素

表单元素主要有form，input，textarea，label。

<form action="form_action.asp" method="get">
    <label>First name: <input type="text" name="fname" /></label>
    <label>Last name: <input type="text" name="lname" /></label>
    <input type="submit" value="Submit" />
</form>

form为创建HTML表单的元素，他可以包含input元素，textarea元素，label元素。

input 标签用于搜集信息。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

input标签根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是text文本字段、checkbox复选框、radio单选按钮、button按钮等等。

textarea 标签定义多行的文本输入控件去掉拖拉更改大小方法为resize:none。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

select下拉列表框，multiple属性可实现复选。opation下拉选项。
例子：一个简单的下拉列表

<form>
     <select name="cars">
         <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="fiat">Fiat</option>
          <option value="audi">Audi</option>
      </select>
</form>