HTML

网页：客户端技术 html 、css 、javaScript

服务器端技术 JSP 、ASP.NET、PHP（数据交互）

Html：构建页面的结构

CSS：控制（美化）页面的外观样式

javaScript：添加动态效果

1.HTML基础

什么是HTML？

　超文本标记语言HTML（hypertext markup language) ，是一种用来设计网页的标记语言，用该语言编写的文件，以.html戒者.htm为后缀，并且由浏览器解释执行，生成相应的界面。

作用：创建静态页面，结合CSS和javascript实现页面的创建。

　编写方式：任何文本编辑器。

　运行方式：浏览器解释（有错误时，会生成奇怪的效果）运行。

相关术语

标记：用尖括号< >包围的单词。标记大都成对：开始标记和结束标记。

元素：每一对尖括号包围的部分，

属性：用来修饰元素，每个元素都有值，属性放在开始标记中。

封闭类型的元素：标记要求必须成对出现

非封闭类型的元素（空元素或者空标记）：只有一个标记，建议使用 /结束，如 <br />

html文件的基本结构

html 文档的标准结构：

版本信息---指定html版本（Strict DTD， Transitional DTD， Frameset DTD ）

<html>

<head>关于整个文档的定义，比如编码、标题等</head>

<body>显示页面的内容</body>

</html>

Html的基本结构分为两大部分：头（head）和体（body）。　根标记：＜html＞＜／html＞

（１）Html头标记＜head＞＜/head＞，写描述页面的数据

　　　<title>标题</title>

　<meta> ：元数据，单标记

　 1) 主要用于设置消息头

　 2) 注意不要这样写（有的浏览器会不兼容）：

 <meta></meta> (不推荐)

 <meta/> (推荐)

　 3) 消息头：浏览器访问服务器时，服务器会发送的一些键值对

 　　 <meta http-equiv="content-type" content="text/html ;charset=utf-8">

　　表示浏览器读到的是一个html格式文件，字符编码是utf-8

　　 http-equiv属性：设置消息头

　　 Content属性：设置消息头的值

　　 <meta http-equiv="refresh" content="3">：每３秒重新加载页面

３秒后跳转到bbs.tarena.com.cn。

　　 refresh：刷新 content：刷新的频率

<link>引入CSS样式文件

<link rel="stylesheet" type="text/css" href="style.css">：引入style.css样式文件

注意不要写<link></link>或<link/>

<style></style>：在html文件中直接定义样式

注意：有<link>又有<style>时，听<style>的

<script></script>：引入脚本

引入脚本文件：<script src="c1.js"></script>

直接写脚本：<script>脚本代码</script>

（２）Html体标记＜body＞＜／body＞，与页面显示的内容有关系

主要标记：

<a href=""></a>：链接

<table>：表格

<form>：表单

<ul>、<ol>：列表

主要浏览器

ie 、firefox 、chrome 、Safari 、Opera

2.几个重要的标记

文本标记

标题：h1--h6 1-6号标题，1号标题最大

段落标记：打断文本自成段落，段落间距。<p></p> aaa<p>bbb</p>ccc

换行标记：<br>单标记，相当于回车 aaa<br>bbb<br>ccc

<p>自成一个段落，保留段落间距

<br>:行间距较小

特殊字符：<p&gt ;==><p>

&copy ==>@

空格字符： 

分区/组元素：div / span 将一些元素分组，进行统一设置。以实现样式的定义或者js代码的添加

aa<div>a</div>aa div：独占一行（块级元素）

aa<span>a</span>aa span：不会改变原有的布局（行为元素）

块级元素（block）：页面上会独占一行的元素，上下文的其他元素会自动换行。p div table ul ol li

行内元素（inner）：span a img

链接<a href>

语法：<a href="url地址" target=" " title=" ">描述性的文字</a

href属性：指定链接的地址

target属性：指定在哪个窗口打开链接，值可以指定为：

_slef：在当前窗口中打开(缺省)

_blank：新窗口中打开

title：提示信息，鼠标放在链接上的提示信息

同一个页面上不同部分之间的跳转（实现页面内部跳转）：

定义锚点：<a name="top"></a>（想回到哪，写哪）

定义链接：<a herf="#top">to top</a>

回到顶端简介的写法：<a href="#">to top</a>

使用图片作为链接：<a href="url地址">

</a>

发送邮件：<a href="mailto:766908296@qq.com">给我发邮件</a>

mailto:转到邮箱，发送邮件

热点（使用图片区域作为链接）

1）先使用map标记划分图片区域

</map>

shape="rect"：表示矩形

coords="407,20,560,77"：表示矩形在图片的相对位置

407：表示矩形左上角距离图片左上角的横坐标

20：表示矩形左上角距离图片左上角的纵坐标

560：表示矩形右下角距离图片左上角的横坐标

77：表示矩形右下角距离图片左上角的纵坐标

2）使用map

usemap="#Map"表示使用名字为“Map”的图片

图像：<img>（单标记）

src：对于img标签，src指定图片的地址（当前路径为html文件所在的路径）

width：宽度

height：高度

border：边框（为0表示没有边框）

title：通用属性，提示信息

表格

(1)表格的基本结构

</tr>

</table>

解析：先从上到下，再从左到右，先table后tr再td，

表格默认情况下是自适应的，自己设置也是按比例划分

文本内容只能放在td里

 border : 边框的宽度，单位是像素（缺省值是0）

 width : 表格的宽度

可以用百比分(表示该表格占父标记的宽度)，也可以是绝对值 width=100%、height=100%

 cellpadding : 单元格内容与单元格之间的空隙

 cellspacing : 单元格与单元格之间的空隙，单元格与外边框之间的空隙

 align : 水平对齐，值有"center","right","left"

valign : 垂直对齐，值有"top"、"middle"、"bottom"

td的属性可以有：width 、 height 、 align 、valign

(2)不规则表格：实现页面的布局

colspan：跨列合并单元格

rowspan：跨行合并单元格

(3)表格的完整的结构

<table>

<caption>表格的标题</caption>

</table>

 caption：为表格定义标题

caption、thead、tfoot可以不出现，如果出现，只能出现一次

 tbody可以出现多次，至少也要出现一次

 (4)表格可以嵌套

在td里可以嵌套table。

表单：表单一般是用来收集用户信息的。

input标记

非input标记

</form>

提交：以表单为单位把<form>.....</form>之间的内容为单位提交

 action属性 : 表单提交之后由哪一个程序来处理

 method属性 : 表单提交方式 post、get方式

 enctype属性 : 设置表单的MIME编码

input标记（单标记）：输入，键盘：文本框鼠标：选择

（1）文本输入框

 type属性： input标记的具体类型

type内容可以不写，默认是文本框

 name属性：标记的一个名称，该名称用于生成一个请求参数，

如果没有命名，则浏览器不会将该数据发送给服务器

 value属性 : 缺省值，有值时表示初始值

（2）密码输入框

（3）单选框

单选按钮应是互斥的，只能选择其中一个

 同一组单选按钮，name必须相同

 value属性：发送给服务器端的值

 checked属性：就一个值"checked",表示缺省被选上

（4）多选框

（5）文件上传

（6）按钮

普通按钮：<input type="button" value="普通按钮" />

value属性：按钮上面的文字，

点击该按钮，浏览器什么都不做需要编程实现功能

图像按钮：<input type="image" value="图像按钮" />

提交按钮：<input type="submit" value="提交" />

 value属性：按钮上面的文字

 当点击提交按钮时，浏览器默认情况下，会将表单中的数据发送给服务器

重置按钮：<input type="reset" value="重置"/>

 当点击重置按钮时，浏览器会将输入的数据清空

（7）隐藏域

不会在界面上显示出来，一般用于向服务器传送数据。

主要用于记载那些不需要被用户看见的关键数据，如id

name属性设置参数名

value属性设置参数值

非input标记

（1）下拉框 / 列表框

</select>

 value属性：是提交给服务器的值

 multiple属性 : 设置该属性值以后，下拉列表变成了一个多选框。允许多选

size属性：区分下拉框或者多选框（size>1)

（2）多行文本输入框

cols列、rows行，设置框的大小是几行几列

（3）fieldset为控件分组

<fieldset>元素：为控件分组

<legend>元素：为分组指定一个标题

地址：<input type=”text”/><br>

邮编：<input type=”text”/><br>

</fieldset>

（4）<label>元素

语法：<label>文本</label>

主要属性：for：表示与该元素相联系的控件的ID值

作用：将文本与控件联系在一起后，单击文本，效果就同单击控件一样。

<label for=”chkHid”>不要公开我的信息</label>

实例：

<html>

<form>

用户名：<input type="text" name="username" value=""/><br/>

密码 :<input type="password" name="pwd"/> <br/>

性别 :

男<input type="radio" name="gendar" value="m" checked="checked"/>

女<input type="radio" name="gendar" value="f"/> <br/>

兴趣 :

看书<input type="checkbox" name="interest" value="reading"/>

画画<input type="checkbox" name="interest" value="drawing"/>

书法<input type="checkbox" name="interest" value="writting"/> <br/>

照片 : <input type="file" name="phone"/> <br/>

自我描述 : <textarea name="desc" rows="6" cols="20"> </textarea> <br/>

你来自于哪个城市 :

</select> <br/>

<input type="button" value="点我吧"/>

</form>

</body>

</html>

3.列表

1）无序列表 <ul> <li></li> </ul>

2）有序列表 <ol> <li></li> </ol>

3）列表可以嵌套

<ul>

<ul>

</ul>

<ul>

</ul>

<ul>

4.窗口划分

frameset和 frame

frameset标记不能够不body标记同时出现

 rows属性：将窗口划分成几行

 cols属性：将窗口划分成几列

 frame标记定义子窗口,其中,src指定加载的页面

<html>

</frameset>

Iframe：在当前窗口当中嵌入一个子窗口

src属性：指定加载的页面

iframe标记可以用在body标记里

<html>

你好，世界<br/>

一会儿就要下课了。

</body>

</html>

5、大多数元素都有的属性

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

posted on 2017-03-15 13:06 芹derella 阅读(126) 评论(0) 编辑收藏举报