HTML
* 概述
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
用标签制作网页,由浏览器解释运行,而不是编译运行.学习html就是学习标签
不区分大小写,是一个非严谨型语言
相关技术:css,javascript
html用来显示数据,css用来控制页面美观,javascript用来实现各种额外的效果
w3cschool教程是非常好的教程,可去学习
* 基本网页框架:
<!doctype html>
<html>
<head>
<meta charset="gbk">
<title>标题</title>
</head>
<body>
网页主体,即要显示的内容
</body>
</html>
<!doctype html>为声明
<html>为根标签
<head>为头部,包含一些说明信息
<meta>为说明信息,charset="gbk"为指定网页编码
<title>为标题,在浏览器标题栏显示
<body>为体,包含要显示的内容
其实是一个文本文件,将后缀改为html即可通过浏览器打开
标签为预定义的标签,不能随意乱写,如<head>,<body>
标签用尖括号括起来,通常成对出现,除非没有标签体,如<meta>
标签中包含属性和标签体,属性和属性值也是预定义的,自己乱写看不到效果,多个属性用空格隔开
属性用等号赋值,值用双引号或单引号括起来,如<meta charset="gbk">
注释
<!-- 注释内容 -->
字体
* <h1> to <h6> 标题(变大,加粗)
* <p> 段落(前后换行)
* <marquee> 滚动字幕,属性:
direction 滚动方向,可选值:left,right,up,down
behavior 滚动方式,可选值:scroll(绕圈滚动,默认),slide(滚动一次),alternate(来回滚动)
scrollamount 滚动速度,单位为像素
scrolldelay 滚动间隔,单位为毫秒
width 宽度
height 高度
bgcolor 背景色
* <pre> 原样输出标签中的内容,该换行换行,尖括号也能原样输出
图片
* <img>
属性:
src 图片路径,例src="/img/1.jpg"
width 图片宽度,数值或百分比
height 图片高度,数值或百分比
* 背景图片,大部分标签都存在的属性:background,例:background="1.jpg"
其它元素可以显示在背景图片的上面
超链接
* <a>
属性:
href 链接地址,例:href="http://www.baidu.com",必须有,否则不算超链接
target 在何处打开目标地址,可选值:
_blank 新窗口
_parent 父窗口或父框架集
_self 当前窗口或框架,默认值
_top 顶层窗口
framename 指定框架
name 锚名称,name="锚名称"然后href="#锚名称"可在同一页面的不同位置跳转(id也可代替name实现锚的功能,超链接name属性不可通过js动态更改,这时可使用id替代)
表单
* <form> 表单,表单内的元素的值可以被提交到服务器
属性:
action 提交地址,例:action="/servlet/userServlet"
method 提交方式,常用值有:get和post
enctype 编码方式,常用值:
application/x-www-form-urlencoded 在发送前编码所有字符（默认）
multipart/form-data 不对字符进行编码。当文件上传时，必须使用该值。
* <input> 表单元素,根据type属性可以有多种表现形式.无结束标签
属性:
type 类型,常用值:
text 文本框(默认)
password 密码框(字符显示为*)
button 按钮
submit 提交按钮,只能在表单中生效
radio 单选按钮(通过name确定是否为一组,通过checked确定是否初始被选中)
checkbox 多选按钮(通过name确定是否为一组,通过checked确定是否初始被选中)
hidden 隐藏域(什么都看不见,就用来提交值的)
file 文件上传控件
reset 重置按钮(清空表单内所有数据,恢复到初始状态,只能在表单中生效)
name 名称,服务器通过此属性接收值
value 可设置文本框,密码框,隐藏域的初始值,或按钮,提交按钮的显示文字
maxlength 规定文本框或密码框的最大输入字符数
checked 规定单选按钮和多选按钮初始是否为选中状态,例checked="checked"
* <select> 下拉列表
属性:
name 名称,服务器通过此属性接收值
size 规定下拉列表中可见选项的数目。
multiple 是否为多选,例:multiple="multiple"
子标签:
<option> 定义下拉列表中的一个选项
属性:
value 值
selected 是否初始被选中,例selected="selected"
* <textarea> 文本域(多行文本框)
属性:
cols 列数
rows 行数
name 名称,服务器通过此属性接收值
标签体为初始值
* 表单提交get和post的区别:
get的参数会通过地址栏发送,不安全,数据长度有限制,可以添加到收藏夹
post的参数不通过地址栏发送,相对安全,数据长度无限制,不可添加到收藏夹(收藏夹保存的是地址栏的地址)
get请求参数在请求头中,post请求参数在请求体中,处理中文乱码的方式不同(get更复杂)
超链接也是get方式
布局
* 列表
<ul>
<li>内容1</li>
...
<li>内容n</li>
</ul>
有序列表为<ul>,无序列表为<ol>,
由于通过样式控制,所以有序列表和无序列表没有什么区别了,只是默认样式不同
* 表格
<table>
<tr>
<td>内容1</td>
...
<td>内容n</td>
</tr>
...
<tr>
<td>内容1</td>
...
<td>内容n</td>
</tr>
</table>
一个<tr>代表一行,一个<td>代表一列
<table>的属性:
cellpadding 单元格与其中的内容之间的间距
cellspacing 单元格之间的间距
width 宽度,数值或百分比
height 高度,数值或百分比
align 单元格的水平对齐方式,值为:left, center, right
border 边框宽度
bgcolor 背景色
<tr>的属性:
align 单元格的水平对齐方式,值为:left, center, right
valign 单元格的垂直对齐方式,值为:top, middle, bottom
bgcolor 背景色
<td>的属性:
align 单元格的水平对齐方式,值为:left, center, right
valign 单元格的垂直对齐方式,值为:top, middle, bottom
width 宽度,数值或百分比
height 高度,数值或百分比
colspan 单元格横跨的列数(单元格合并)
rowspan 单元格横跨的行数(单元格合并)
bgcolor 背景色
* 框架
<frameset> 框架集,可将页面分为几个部分,并指定位置和大小
<frame> 框架,指定页面
<iframe> 内联框架(嵌套于body内的框架)
<frameset>的属性:
cols 定义框架集中列的数目和尺寸,可以是数值,百分比,或*,*代表剩余所有
cols 定义框架集中行的数目和尺寸,可以是数值,百分比,或*,*代表剩余所有
<frame>的属性:
frameborder 是否显示框架的边框线,值为0或者1
name 框架的名称,可以和超链接的target属性配合使用
noresize 规定用户无法调整框架的大小,例:noresize="noresize"
src 要显示页面的路径
<frameset>和<body>不能共存
例:
将页面分为三列
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
将页面分为三行
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>
将页面分为三块,第一行一个,第二行两个
<html>
<frameset rows="50%,50%">
<frame src="../example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="../example/html/frame_b.html">
<frame src="../example/html/frame_c.html">
</frameset>
</frameset>
</html>
<iframe>的属性
src 要显示的文件位置
name 名称
width 宽度
height 高度
align 对齐方式,可选值有:top,middle,bottom
frameborder 边框,1为有边框,0为无边框
* 其它
<br> 换行
<hr> 换行并绘制一条水平线
<div> 块级元素,配合css使用,否则只有换行效果
<span> 行内元素,配合css使用,否则无任何效果
字符实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。
如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
空格是 HTML 中最普通的字符实体。但是浏览器会截取多余的空格,只显示一个(可以用中文全角空格)
空格
< <
> >
& &
" "
颜色
可以用颜色的名称,如red
#六位十六进制数 : 如 #ffffff 表示白色
#三位十六进制数 : 如 #036 和 #003366等效
特殊标签
<style> 样式标签,放在<head>内,其中可以写css样式
<link> 链接外部css样式的标签,放在<head>内,rel属性指定文件类型,src属性指定外部文件位置
<script>脚本标签,可以内嵌或引入外部的脚本,位置:任意位置
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
