HTML学习笔记五————总结
<head>标签
<body>标签
1.基本标签
a.<h1>~<h6> 标题标签
<hn 属性=“属性值”>标题文本</hn>
改变对齐方式，用align属性
left：左对齐
center：居中对齐
right：右对齐
注意：一般一个页面只能有一个<h1>,而<h2>~<h6>可以有多个
b.<p> 段落标签
包裹的内容被换行.并且也上下内容之间有一行空白.
style="text-indent: 2em"可以设置样式为首行缩进两个字符。
<blockquote></blockquote>可以用来设置整个段落的缩进。
c.文本格式化标签
<strong><b> 强调加粗（<b>不具备语义化强调的功能）
<em> <i> 强调斜体（<i>不具备语义化强调的功能）
<sub>下标文本，下角标
<sup>上标文本，上角标
<del> 加删除线方式
<ins> 加下划线方式
<u>: 文字下方加下划线
<strike>: 为文字加上一条中线.
<br>:换行.
d.引用标签
<blockquote> 引用大段的段落解释
<q> 引用小段的段落解释
<abbr> 缩写或首字母缩略词
<cite> 引用著作的标题
e.水平线标签
<hr>
属性：
align：设置水平线对齐方式，可选择left、center、right，默认为center居中对齐
size：设置水平线粗细，以像素 为单位，默认为2像素
width：设置水平线宽度，确定像素值或浏览器窗口的百分比（默认为100%）
color：设置水平线颜色，可用颜色名称、十六进制#RGB、rgb（r,g,b）设置颜色值
f：特殊符号
> > 大于
< < 小于
  空格
" 引号
© 版权符号©
®； 注册商标®
&； 和号&
¥ 人民币￥
°； 摄氏度
± 正负号±
×； 乘号*
÷ 除号
¹； 上标1
§ ; §
¢ ; ¢
· ; ·
£ ; £
&trade ; ™
g.<img> 图形标签
HTML中使用<img>标签来添加图片，<img>属于单标签，其语法格式如下
<img src=”图像URL”/>
重要属性有：src、title、alt、width、height、align
src 图片地址。
title 鼠标悬浮在图片上的文字。
alt 图片找不到时要替换的文字。如果图片资源使用的是外网资源，则不会显示要替换的文字。如果使用的是本网站的资源（相对路径给出），则找不到图片时会显示替换的文字，并保留图片设置的宽高结构。
align 图片周围文字的垂直对齐情况。常用的属性值有：top（与图片的顶部对齐）、middle（与图片的中部对齐）、bottom（默认，与图片的底部对齐）。
width 图片的宽
height 图片的高 (宽高两个属性只用一个会自动等比缩放.)
img标签的属性
|
属性 |
属性值 |
描述 |
|
src |
URL |
图片的地址 |
|
alt |
文本 |
图片显示不出来时的提示文字 |
|
title |
文本 |
鼠标移动到图片上的提示文字 |
|
width |
像素（XHTML不支持页面百分比） |
设置图片的宽度 |
|
height |
像素（XHTML不支持页面百分比） |
设置图片的高度 |
|
border |
数字 |
设置图片边框的宽度 |
|
vspace |
像素 |
设置图片顶部和底部的空白（垂直边距） |
|
hspace |
像素 |
设置图片左侧和右侧的空白(水平边距) |
|
align |
left |
将图片对齐到左边 |
|
right |
将图片对齐到右边 |
|
|
top |
将图片的顶端和文本的第一行文字对齐，其他文字位于图片下方 |
|
|
middle |
将图片的水平中线和文本的第一行文字对齐，其他文字位于图片下方 |
|
|
bottom |
将图片的底部和文本的第一行文字对齐，其他文字位于图片的下方 |
h.链接标签<a>
HTML中使用<a></a>标签来定义链接部分实现网页的跳转，其语法格式如下。
<a href=“链接页面地址” target=“链接打开的方式”>链接对象</a>
重要属性有三个：href、target、name
href 超链接地址：可以是Web上任意资源，包括图片，网页，样式，脚本文件等。href="#"时，表示被链接页面就是当前页面。
target 文档打开时要显示的目标位置，属性值一般有：_blank（新窗口中打开）、_self（默认，在超链接所在的容器中打开）、_parent（在超链接的父容器中打开）、_top（整个容器中打开）、name（框架名称）。
target取值表
|
属性取值 |
打开方式 |
|
_self |
在当前窗口打开链接，默认方式 |
|
_blank |
在新的窗口中打开链接 |
|
_top |
在顶层框架中打开链接 |
|
_parent |
在当前框架的上一层打开链接 |
目前常用的取值有_self和_blank两种
name 锚记名称。作用：跳转到文档的某个地方。返回首页。
I:列表标签
<ul> 无序列表标签
<li>标签表示列表中的每一项
无序列表type属性取值表
|
属性取值 |
显示效果 |
|
disc(默认值) |
实心圆（●） |
|
circle |
空心圆(○) |
|
square |
实心正方形(■) |
<li></li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>，不允许直接在<ul></ul>标记中输入文字。
<ol> 有序列表标签
<li>标签表示列表中的每一项
属性主要有type和value
- type指明项目的类型，属性值有：A，a，I，i，1，disc（实心圆），square（实心正方形），circle（空心圆）。
- value表示序号值从几开始。
有序列表type属性取值表
|
属性取值 |
显示效果 |
|
1（默认值） |
数字(1、2、3……) |
|
a |
小写英文字母(a、b、c……) |
|
A |
大写英文字母(A、B、C……) |
|
i |
小写罗马数字(i、ii、iii……) |
|
I |
大写罗马数字(I、II、III……) |
<dl> 自定义列表标签
<dl>
<dt>定义名词（列表标题）</dt>
<dd>名词解释和描述（列表项）</dd>
……
</dl>
上面的语法中，<dl></dl>标签用于定义列表，<dt></dt>和<dd></dd>并列嵌套于<dl></dl>中，其中<dt></dt>标签用于定义专业术语或名词，<dd></dd>标签用于对名词进行解释和描述。一对<dt></dt>可以对应多对<dd></dd>，即一个名词可以有多个解释和描述
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>列表标签</title>
6 </head>
7 <body>
8 <dl>
9 <dt>HTML</dt>
10 <dd>超文本标记语言</dd>
11 <dt>CSS</dt>
12 <dd>层叠样式表</dd>
13 <dt>JavaScript</dt>
14 <dd>网页脚本语言</dd>
15 </dl>
16 </body>
17 </html>
J：<div>与<span>
div全称为division，“分割、分区”的意思，<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>标签中，<div>中还可以嵌套多层<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
<span>标签是用来修饰文字的，也叫做内联标签
<div>标签和<span>标签，多数情况下需要配合CSS样式
K:<table>表格标签
每个表格有三个必须的标签，<table>、<tr>和<td>三个标签，用来创建表格，其语法格式如下。
<table>
<tr>
<td>单元格内容</td>
……
</tr>
</table>
上面三个标签是创建表格的基本标签，其中<table></table>标签用于定义一个表格。<tr>标签用于定义表格中的一行，必须嵌套在<table></table>标签中，在<table></table>标签中包含几对<tr></tr>，表示该表格有几行。<td></td>标签用于定义表格中的单元格，必须嵌套在<tr></tr>标签中，一对<tr></tr>包含几对<td></td>，表示该行中有多少个单元格（列）。
表头与标题：
<th>表头
表头<th>是<td>单元格的一种标题，其本质还是一种单元格，一般位于表格的第一行或第一列，用来表明这一行或列的内容类别。浏览器会将表头默认以粗体居中的样式显示在网页中。
<th>标签和<td>在本质上都是单元格，但这两种不可以互换使用。th，即“table header（表头单元格）”。而td，即“table data（单元格）”。
<caption>表格标题
表格一般都有一个标题，用来表明表格的内容，一般位于整个表格的第一行，使用<caption>标签。一个表格只能含有一个表格标题。
表格语义化：
为了使网页内容更好的被搜索引擎理解，在使用表格进行布局时，HTML中引入了<thead>、<tbody>和<tfoot>这三个语义化标签，用来将表格划分为头部、主体和页脚三部分。用这三个部分来定义网页中不同的内容，三个标签的详细理解如下。
l <thead></thead>标签：用于定义表格的头部，位于<table></table>标签中，一般包含网页的logo和导航等头部信息。
l <tfoot></tfoot>标签：用于定义表格的页脚，位于<table></table>标签中<thead></thead>标签之后，一般包含网页底部的企业信息等。
l <tbody></tbody>标签：用于定义表格的主体，位于<table></table>标签中<tfoot></tfoot>标签之后，一般包含网页中除头部和底部以外的其他内容。
<thead>、<tbody>和<tfoot>三个标签不带任何效果，只是更好提供了语义化的功能，根据表格的需求尽量添加相应的语义化标签。需要注意<thead>、<tfoot>这两个标签在一个<table>标签中只能出现一次，而<tbody>标签可以出现多次。
rowspan：合并行使用<td>或<th>标签的rowspan属性
colspan：合并列则用到<td>或<th>标签的colspan属性
cellpadding:用于设置单元格内容与单元格边框之间的空白间距，默认为1px.(内边距，单元格与内容之间的距离)
cellspacing:属性用于设置单元格与单元格边框之间的空白间距，默认为2px(外边距，单元格的间距，设置为0时，表格变为实线表格)
border:（表格边框）
align（水平对齐方式,<th>标签的align属性默认为center，<td>标签的align属性默认为left。<table>标签也有align属性，用来设置表格在网页中的水平对齐方式）
bgcolor（背景颜色）
width（表格的宽度，可以用%或者像素，最好通过css来设置长宽）
<table>标签常用属性
|
属性名 |
含义 |
属性值 |
|
width |
设置表格的宽度 |
像素值(width属性可以设置单元格的宽度，当一列有多个不同width属性值时，取最大值作为这一列的宽度) |
|
height |
设置表格的高度 |
像素值(height属性可以设置单元格的高度，当一行有多个不同height属性值时，取最大值作为这一行的高度) |
|
align |
设置单元格内容的水平对齐方式 |
left(左对齐)、enter(居中对齐)、right（右对齐） |
|
valign |
设置单元格内容的垂直对齐方式 |
baseline（基线对齐）、top（上对齐）、middle（居中对齐）、bottom（下对齐）(设置单元格的内容垂直对齐的方向，默认为center(居中对齐)) |
L:<form>标签
为了实现网页与用户的交流，需要让表单中的数据传送给后台服务器，就必须定义表单域。定义表单域用<table>标签定义表格类似，HTML中<form>标签用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，<form></form>标签中的所有内容都会被提交给服务器。其语法格式如下。
<form 属性 属性值>
表单元素和提示信息
</form>
属性：action、method、enctye和target
action 属性用来定义表单数据的提交地址，即一个URL。HTML表单要想和后台服务器进行连接，就需要在action属性上设置一个URL。比如两人打电话，双方要通话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。
action属性值 可以是相对路径或绝对路径，还可以为接收数据的E-mail邮箱地址。表单要提交的地址，用于处理表单的内容（一般是提交字典到后台的一个接口，这个接口是java写成的，提交到这个接口后后台就知道如何处理这些数据了）。
method 属性用来定义表单数据的提交方式，常用的有get（默认）和post两种方式。提交方式类似于通信方式，可以打电话、发短信或发邮件。一般情况下，获取一些数据用get方式，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。Post方式的保密性好，而且无数据量的限制，使用method=”post”可以大量提交数据。
提交的方法，默认是get方式提交。
get: 1.提交的键值对.放在地址栏中url后面. 2.安全性相对较差. 3.对提交内容的长度有限制.
post:1.提交的键值对不在地址栏. 2.安全性相对较高. 3.对提交内容的长度理论上无限制.
enctype 属性用来定义表单数据的提交内容形式，常用的有application/x-www-form-urlencoded（默认）和multipart/form-data两种方式。提交内容可以是网页中的文本，也可以是图片或视频等非文本的内容，因此需要对enctype属性选择不同的设置
target 属性用来定义提交地址的打开方式，常用的有_self（默认）和_blank两种方式。打开方式可以选择当前页打开，也可以在新页面打开，<form>标签中的target属性跟<a>标签中的target属性一样，
<input>标签
网页中经常会包含有单行文本框、单选按钮、复选框、提交按钮等，要想定义这些表单元素需要使用<input>标签，其基本语法格式如下。
<input typr=”元素类型”>
<input>标签通过type属性取值不同可以展示不同的表单类型
type属性取值
|
表单元素 |
含义 |
|
text |
单行文本框 |
|
password |
密码文本框 |
|
radio |
单选框 |
|
checkbox |
复选框 |
|
button |
按钮 |
|
submit |
提交按钮 |
|
reset |
重置按钮 |
|
hidden |
隐藏域 |
|
image |
图像形式的按钮 |
|
file |
文件上传按钮 |
text 文本框输入（默认text文本框类型）。
autocomplete（自动完成输入的内容，要求表单元素要有name属性才有自动完成的效果，off表示自动完成不可用，on表示自动完成可用）
disabled（设置或者获取控件的状态，默认是false即可用，等于true时不可用，不能输入内容）
password 密码框。（以下属性text和password共有）
size（指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，对于其他元素，宽度以像素为单位）
maxlength（type为text或password时，表示输入的最大字符数），有利于防止sql的注入攻击
readonly 只读.
placeholder 框内预置内容(灰色)，写上内容时才消失
radio 单选按钮。属性：
name（将name的值设置为相同值，才表示一组数据，才能实现单选功能）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
checkbox 复选框。
name（名字一定要一样一样的，才表示是一组数据，添加到同一value值列表提交到服务器）
value（必须要写，提交到服务器的key值，实际开发过程中value一般是编号）
checked（是否被选中的状态）
file 文件域，上传文件（不同的浏览器表现形式不同），设置file值时，<form>标签的method属性必须设置成post，enctype属性必须设置成multipart/form-data
submit 提交按钮。用于提交表单。
reset 重置按钮。清空表单的输入，恢复到表单默认的状态。
button 普通按钮。一般结合javascript使用。
image 图片按钮，用来提交表单，与submit是一样的效果。
src（图片路径）
hidden 隐藏字段。用于隐藏那些知识往后台服务器发送一些数据，但又不影响页面布局的表单控件
value（隐藏的内容）
color 颜色标签。value指定颜色值（采用#十六进制数表示）。
date 日期。value值指定默认的日期，格式为****-**-**（年月日）。
datetime-local 显示本地时间，value值指定默认的时间，格式为2016-05-20T11:10:10（年月日T时分秒）。
number 数字向上或者向下滑动。可以填数字然后向上或者向下选择不同的值。
range 滑动标签。min（指定最小值）、max（指定最大值）、value（指定当前默认值）。
week 每年的周数。value指定哪一年第几周，格式为2016-W25（2016年第25周）。
<input>标签除了type属性，还有一些常用的属性
name 属性用来规定input元素的名称，
value 属性用来规定input元素的值。
其中name值和value值配合成一对来使用，这样后台服务器就可以通过name值来找到对应的value值。这里只需了解name和value这两个属性是为后台服务器提供即可
maxlength 属性规定输入内容允许的最大字符数，如设置maxlength属性，则输入控件不会接受超过所允许字符数
disabled 属性规定输入内容是禁用的，被禁用的元素是不可用和不可点击的。
readonly 属性规定输入内容为只读（不能修改，但是能获取当前只读的内容）。
checked 属性规定在页面加载时应该被预先选定的input元素。checked属性与<input type="checkbox">或<input type="radio">配合使用
<input>标签其他属性
|
属性 |
属性值 |
含义 |
|
name |
自定义 |
元素的名称 |
|
value |
自定义 |
元素的值 |
|
maxlength |
正整数 |
元素允许输入的最多字符数 |
|
disabled |
disabled |
第一次加载页面时禁用该元素（显示为灰色） |
|
readonly |
readonly |
元素内容为只读（不能修改编辑） |
|
checked |
checked |
定义选择元素默认被选中的项 |
<textarea>标签
文本域标签。默认表现形式是可以输入很多行文本的文本框。
name （表单提交项的key）
cols（设置文本域宽度，设置多行文本框的列数）
rows（设置文本域高度，即行数，设置多行文本框的行数）
更好的办法是使用 CSS 的 height 和 width 属性来定义多行文本输入框的宽高。
多行文本框使用的是<textarea>标签，而<input>标签只能设置单行文本框
<select>标签
设置下拉列表，其需要与<option>标签配合使用，这个特点和列表一样，如无序列表是由<ul>标签和<li>标签配合使用。
下拉框标签。使用时要结合<option>子标签一起使用。
name:表单提交项的key
size：选项个数；设置下拉列表可见选项的数目，默认情况下单选下拉菜单显示一项
multiple：多选，设置多选下拉列表，默认下拉列表只能选择一项，而设置multiple属性后就可以选择多项了（使用“Ctrl+鼠标左键”进行多选操作）
<option> 下拉选中的每一项
- value（表单提交项的值）
- selected（selected下拉选默认被选中）
<optgroup>为每一项加上分组；进行分组项操作，把相关的选项组合在一起。<optgroup>标签的label属性来设置分组项的标题
selected：表示选中项，跟单选框的checked属性类似，注意selected属性是设置到<option>标签上的
type属性取值
|
属性 |
含义 |
|
multiple |
多选操作 |
|
size |
下拉列表可见选项的数目 |
|
selected |
选中项 |
<label>标签
用来辅助表单元素，可以更好的提高用户体验。当用户选择<label>标签内文本进行点击时，会自动将焦点转到和标签相关的表单控件上。
友好设计：不只是选中复选框才能选中并打钩，要求点击对应的文字也能选中该复选框。
这种情况下要用到<label>标签的for属性（设置或获取给定标签对象指定到的对象，值=另一个元素的id号即可）
其中<label>标签中的for属性值一定要和<input>标签中的id属性值相同才能找到对应控件。
<fieldset> 对表单中的相关元素进行分组
value: 表单提交项的值
对于不同的输入类型，value 属性的用法也不同：
- type="button", "reset", "submit" - 定义按钮上的显示的文本
- type="text", "password", "hidden" - 定义输入字段的初始值
- type="checkbox", "radio", "image" - 定义与输入相关联的值
框架
