HTML基础入门（二）

HTML基础入门（二）
.
三种列表：

(1)有序列表ol、li
(2)无序列表ul、li， ul中只能嵌套li，而li可以嵌套任意标签。
(3)定义列表<dl、d、tdd 是标题及列表项的结合。

注释 <!--内容-->

.常用图片格式：JPG、GIF、PNG、BMP

.图片标签，必须要有src和alt属性：
img src=“图片地址” alt=“图片的替代文字” title=“鼠标悬停提示文字” width=“图片宽度” height=“图片高度” />

.超链接标签(target指定在哪个窗口打开 值有_self自身窗口、_blank新建窗口)
a href=“链接地址” target=“目标打开窗口位置”>附连接的文本或图像

.链接地址

(1)绝对路径(指向目标地址的完整描述 多指向本站点外的文件如 a href="http://www.baidu.com/index.html">百度</a>)、

(2)相对路径(一般指向本站点内的文件,如 a href="login/login.html">登陆 /a>)

(3)相对路径中"../"表示当前目录的上级目录，"../../"表示上上级目录

.超链接的应用场合：

(1)页面间链接：如 a href="login.html" target="_blank">为您跳转到登录页 /a>
(2)锚链接：
先在目标位置B设置标记如：a name="new">这里是目标位置 /a>，
然后在A位置设置链接路径href属性值为"#标记名"如：<a href="#marker"当前位置A</a>
(3)功能性链接：单击时启动本机自带的应用程序如QQ、电子邮箱等
如电子邮件链接："mailto:电子邮件地址"

.元素分类

(1)块元素：如p、h1、div无论内容有多少，该元素都独占一行(一块)。
块状元素特点：如果没有设置自身宽度，则显示为父容器的100%。
(2)行内元素：如strong、a 显示宽度由自己的内容决定，其他元素可以排在它后面。

.元素类型转换：
(1)块状元素转为内联元素：display: inline;
(2)内联元素转为块状元素：display: block;
(3)把元素设为内联块状元素： display: inline-block;(就是同时具备内联元素、块状元素特点，如img、input)

表格基本结构：单元格、行、列：

(1)table、tr、th、td
(2)HTML5中已废除table的border属性，用css控制边框宽度。
(3)跨列(横跨)： colspan="所跨的列数"
   跨行(竖跨)：rowspan="所跨行数"，两者都要删除被合并的其他单元格。
(4)表格特点：同行单元格高度一致且水平对齐，同列单元格宽度一致且垂直对齐。

—— 表单——

.表单标签form：
form method=“post” action=“login.html” enctype=“text/plain”>
表单内容
/form>

(1)action="url"属性意为把表单提交到某个页面,method=get|post意为向服务器发送数据的方式。

(2)提交方法：get提交,表单数据会在地址栏url中显示；而post提交不会显示，所以post提交更安全。

.表单元素：

(1)表单元素<input>标签的属性：
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可选,该元素的初始值)、size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)

(2)列表框select、option标签：
select中至少包含一个option。在option有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。

(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如
input type="image" src="图片路径"/>

(4)多行文本域：不能用value属性赋初始值
textarea name="标识名" cols="显示的列数" rows="显示的行数">
	自我评价	
/textarea>

(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
input type="number" name="num" min="0" max="100" step="10"/>

(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
input type="range" name="range" min="0" max="100" step="10"/>

(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
input type="search" name="sousuo" />

(8)文件域：多用于文件上传
input type="file" name="files"/>
input type="submit" name="upfiles" value="上传"/>

(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。

(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
input type="hidden" name="userid" value="20"/>

(11)表单元素 只读属性readonly、禁用disabled

(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。

(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
label for="female">女</label>
input type="radio" name="sex" id="female" />