HTML学习笔记（二）body标签

2016-10-18 本文已影响0人琉木_

本系列适合作为HTML的复习文档。

本章为body标签下的各种内容，主要参考来源：

绿叶学习网 - HTML入门教程
 W3C - HTML5 Tutorial

0 小常识

0.1 块元素&行内元素

块元素（block）；
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
行内元素（inline）；
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；

1 段落&文本

1.1 标题标签
1.2 段落标签
1.3 文本标签
1.4 换行标签
1.5 水平线标签
1.6 特殊符号

1.1 标题标签

h——header
<h1></h1>

一般一个页面只能有一个<h1>，而<h2>~<h6>可以有多个。
<h1>代表的就是本页面的题目。

1.2 段落标签

p——paragraph
<p></p>
br——break
<br />

<br />是自闭和标签，用于段落内的换行。

1.3 文本格式标签

1.3.1 加粗标签

<b></b>
strong——strong/加强——强调语气
<strong></strong>

二者表现效果相同，但实际开发中，尽量使用 <strong>标签，它比<b>标签更有语义性。
不过，一般更爱用CSS的font-weight:bold。

1.3.2 斜体标签

<i></i>
cite——cite/块引用
<cite></cite>
em——emphasized/强调
<em></em>

表现效果实际也并无区别，要用的话，尽量用<em>。
不过，一般更爱用CSS的font-style:italic。

1.3.3 上标和下标标签

sup——superscripted/上标
<sup></sup>
sub——subscripted/下标
<sub></sub>

1.3.4 大小字号标签

<big></big>
<small></small>

实际开发中用CSS的字号来控制：font-size:18px。

1.3.5 删除线标签

<s></s>

常用CSS的text-decoration:line-through

1.3.6 下划线标签

<u></u>

常用CSS的text-decoration:underline。

1.4 水平线标签

hr——horizon
<hr />

1.5 div标签

div——division

div标签，又称为“区隔标签”，用来为HTML文档内大块的内容提供结构和背景。标签内可放入<body>标签的任何内部标签。

1.6 特殊符号

空格——&nbsp
其他如货币等特殊符号，可直接输入，也可写它们对应的代码。
<pre>
§ 分节符 &sect;
© 版权符 &copy;
® 注册商标 &reg;
™ 商标 &trade;
€ 欧元 &euro;
£ 英镑 &pound;
¥ 日元 &yen;
° 度 &deg;</pre>

2 列表

2.1 有序列表；
2.2 无序列表；
2.3 定义列表；

2.1 有序列表

ol——ordered list
li——list
<ol type=“a/A/i/I”>
    <li></li>
    <li></li>
    <li></li>
</ol>

<ol>内部不能存在任何其它标签。
<ol>与<li>标签配合使用，不能单独使用。<li>标签数量不限。
列表在HTML中有type属性，但实际中是用CSS如ol{list-style-type: lower-roman ;}来控制的。

2.2 无序列表

ul——unordered list
li——list
<ul type="disc/circle/square">
    <li></li>
</ul>

无序列表的使用极其广泛，基本上凡是列表型展示信息的地方都用到了它。
配合CSS样式使用。

2.3 定义列表

dl——definition list
dt——definition term
dd——definition description
<dl>
    <dt>要解释的名词</dt>
    <dd>该名词的具体解释/会显示文本缩进效果</dd>
</dl>

3 表格

3.1 基本结构/必备

table——table/表格
tr——table row/表格行
td——table data cell/表格单元格
==================================
<table>
<tr>
    <td>行1单元格1</td>
    <td>行1单元格2</td>
</tr>
<tr>
    <td>行2单元格1</td>
    <td>行2单元格2</td>
</tr>
</table>

3.2 完整结构

caption——caption/表格标题
th——table header/表头单元格
<!--以下为单纯为语义化而设的标签-->
thead——表头
tbody——表身
tfoot——表脚
=======================================
<table>
    <caption>标题</caption>
    <thead>
        <tr>
            <th>表头单元格</th>
        </tr>
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

3.3 合并行&和并列

rowspan属性//合并行
colspan属性//和并列
<td rowsoan="合并的行数"> //td——标准单元格
<td colspan="合并的列数">

rowspan——合并行，将其它行的单元格向右方挤了一个格。

4 图片标签

4.1 图像img标签

    img——
    src——source/源文件 - 图像路径
    alt——
    title——
    ====================================
    <img src="路径" alt="图片描述/给搜索引擎看" title="图片描述/给用户看"/>

4.2 相对路径&绝对路径

相对路径

/image/icon1.png
../image/icon1.png
绝对路径
c:/webpage/image/icon1.png
做网站时，采用相对路径。

4.3 图片的格式

4.3.1 位图

位图简介
- 位图，又称“点阵图像”；
- 通常分为8位/2⁸（即256）、16位、24位（又称“真彩色”，基本是人眼可分辨颜色的极限；常用）和32位（也是2²⁴种颜色，只是增加了2⁸阶颜色的灰阶，即8位透明度）
位图格式——3种格式：“.jpg”、“.png”、“.gif”
- JPG可以很好处理大面积色调的图像，如照片、图画等；
- PNG支持透明信息，可用来处理一些logo、banner、简单线条构图；
- GIF只支持256色以内的图像，通常只适合表达动画效果/或者用SVG动画或CSS3来实现。

4.3.2 矢量图

矢量图简介
- 矢量图，又称“向量图”；以一种数学描述的方式来记录图像内容；
- 放大缩小不会失真；难以表现色彩层次丰富的图像
矢量图格式——“.ai”、“.cdf”、“.fh”、“.swf”等
- “.ai” 静帧的矢量文件格式；
- “.cdf” 常见于工程图
- “.swf” 指的其实是flash

5 超链接/hyperlink

a——
<a href="链接地址" target="窗口打开方式">超链接文字</a>

5.1 href

5.1.1 内部链接&外部链接

内部页面链接
使用相对路径；
锚点链接
指向当前页面某部分的链接。
<a href="#music">推荐音乐</a>
#music是某个元素的id名。
name是HTML中的标准，id是XHTML中的标准；
在web2.0的网页中使用id属性，极少使用name属性。

5.1.2 外部链接

指外部页面链接

5.2 target

target属性值

_self 默认；在当前窗口打开
_blank 在新窗口打开
_top
_parent

6 表单（重要！）

6.1 form标签

<form name="表单名称" action="表单提交地址" method="提交方法 - get/post" target="显示方式 - 同a标签里的target属性"  enctype="编码方式 - 默认即可 不需设置">
    <input type="text" value="这是一个文本框"/><br/>
    <textarea></textarea><br/>
    <select>
        <option>HTML</option>
        <option>CSS</option>
        <option>JavaScript</option>
    </select>
</form>

表单对象，即放在<form>标签内的各种标签；
有3种：① input；②textarea；③select和option。

6.1.1 name属性

6.1.2 action属性

邮件形式
action="mailto:xxx@xxx.com"

6.1.3 method属性

get
默认值，安全性较差，所有表单域的值直接显示出来
post
实际开发常用，除可见的处理脚本程序外，所有信息都可以隐藏

6.1.4 target属性

6.1.5 enctype属性

application/x-www-form-urlencoded
multipart/form-data         MIME编码，“上传文件”选择该值。

一般采用默认值就可以，enctype属性不需要设置。

6.2 input标签

<input type="表单类型" />   //自闭合标签

6.2.1 text & password——单行&密码文本框

<input type="text/password" value="文本框内默认文字" size="文本框长度/以字符为单位" maxlength="最多输入字符数"/>  
====================================================
账号：<input type="text" size="15"  maxlength="10"/><br/>
密码：<input type="password" size="15" maxlength="10"/>

value size maxlengh是可选的

6.2.2 radio——单选按钮

<input type="radio" name="单选按钮所在的组名" value="单选按钮的取值"/>
================================================
实例
        你是：
    <input type="radio" name="Question2" value="90"/>90后
    <input type="radio" name="Question2" value="00"/>00后
    <input  type="radio" name="Question2" value="else"/>其他

name和value属性必写；
name值不同，则不在同一组别中；
value用来向后端传数据；

6.2.3 checkbox——复选框

<input type="checkbox" value="复选框取值" checked="checked"/>
==============================
实例
    你喜欢的水果：<br />
    <input id="checkbox1" type="checkbox" checked="checked"/><label for="checkbox1">苹果</label><br />
    <input id="checkbox2" type="checkbox" /><label for="checkbox2">香蕉</label><br />
    <input id="checkbox3" type="checkbox" /><label for="checkbox3">西瓜</label><br />
    <input id="checkbox4" type="checkbox" /><label for="checkbox4">凤梨</label>

checked属性表示该选项在默认情况下已被选中，可以有多个选项被选中
HTML中的复选框是没有文本的，需要加入label标签，并且用label标签的for属性指向复选框的id。

6.2.4 button——普通按钮

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
==========================
    单击按钮弹出对话框：<br/>
<input type="button" value="按钮" onclick="alert('你点击了按钮！')">

一般配合JS来实现

6.2.5 submit & reset——提交&重置按钮

<input type="submit/reset" value="显示在按钮上的文字"/>

均是对当前所在form标签而言的；可以看做是具有特殊功能的普通按钮。
submit：将表单内容提交给服务器；
reset：清除用户在表单中输入的信息。

6.2.6 image——图像域

<input type="image" src="图像的路径"/>
====================================
    账号：<input type="text"/><br/>
    密码：<input type="text"/><br/>
          <!--3个牛逼SP-->
    <input type="image" src="images/登陆按钮.jpg"/>

但实际开发中，图片往往传输数据大，要尽量少用图片；更多用CSS3来实现。

6.2.7 hidden——隐藏域

 <input type="hidden" value="10"/>

有时候我们想要在页面传送一些数据，但是又不想让用户看见，这个时候我们可以通过一个隐藏域来传送这样的数据。隐藏域包含那些要提交处理的数据，但这些数据并不显示在浏览器中。
在动态页面（如ASP.NET入门）中，会看到它真正的用处。
尽量不要使用hidden来传递敏感信息，如密码、手机号码等。

6.2.8 file——文件域

<input type="file"/>

当使用文件域file时，必须在form的标签中说明编码方式enctype=“multipart/form-data”。这样，服务器才能接收到正确的信息。
文件域file在HTML入门没有太多东西要讲的，在后端技术教程（即ASP.NET入门教程）中我们会详细讲解。

6.3 textarea标签

<textarea rows="行数" cols="列数">多行文本框默认内容</textarea>

不能使用value属性来建立在文本域中显示的初始值；

3种文本框总结

input标签下

单行文本框text
密码文本框password

textarea标签下

多行文本框textarea

6.4 select & option标签——下拉列表

<select multiple="multiple" size="可见列表项的数目">
    <option value="选项值" selected="selected">选项显示的内容</option>
    ……
    <option value="选项值">选项显示的内容</option>

</select>

6.4.1 select标签的两个属性

multiple属性
可选属性，只有一个属性值"multiple"；
默认情况下下拉列表只能选择一项，当设置multiple=“multiple”时，下拉列表可以选择多项；
想要选取多项，使用“Ctrl+鼠标左键”即可。//？？？
size属性
用来定义下拉列表展开之后可见选项的数目，有些浏览器只支持4以上的数。

6.4.2 option标签的两个属性

value属性
用来向后端传数据。
selected属性
只有一个属性值"selected"；
表示这个列表项是否选中，跟单选按钮radio的checked是一样的意思。

6.5 表单按钮 V.S button标签按钮

<input type="button" value="普通按钮的取值" onclick="JavaScript脚本程序"/>
<button>文本或img标签</button>
======================================================
实例（二者表示效果一样）   
button标签按钮：<button>这是一个按钮</button><br/>
表单标签按钮：<input type="button" value="这是一个按钮"/>

在设计表单中，应该使用表单按钮<input type="button"/>，因为这涉及到提交数据到服务器。如果想让按钮设计得美观一点，并且不是在表单提交数据的情况下，那就使用button标签按钮。
真正的开发中，漂亮美观的按钮更多时候是用div标签来实现，并且结合CSS来修饰。
表单元素不一定都要放在form标签内。对于要与服务器进行交互（也可以说是跟网站后台进行交互）的表单元素就必须放在form标签内才有效。然后，如果表单元素不需要跟服务器进行交互，那就没必要放在form标签内。

7 多媒体

7.1 embed标签（HTML5新增）——插入音频、视频、动画

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"/>

flash文件：.swf
width和height使用px作为单位。

7.2 bgsound标签——插入背景音乐

bgsound——background sound
<bgsound src="背景音乐的地址/相对路径" loop="播放次数 - 2... / infinite / -1" />

使用bgsound设置背景音乐，没有操作界面;当窗口最小化时就自动暂停播放，窗口恢复时，继续播放。
bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。
除了使用bgsound标签，还可使用embed标签和object标签。

8 浮动框架iframe

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"  scrolling="取值"></iframe>

HTML5已经舍弃了frameset标签（框架集标签）

scrolling属性的取值

auto 默认，左对齐
yes 总是显示滚动条
no 总是不显示滚动条

8 标签语义表

标签名英文全称中文解释
div division 分割（块元素）
span span 区域（行内元素）
hr horizontal rule 水平线
a anchor 锚点，超链接
strong strong 强调（粗体）
em emphasized 强调（斜体）
sup superscripted 上标
sub subscripted 下标
br break 换行
fieldset fieldset 域集
legend legend 图例
caption caption （表格、图像等）标题