HTML

来源：互联网发布：淘宝助理一口价编辑：程序博客网时间：2024/04/28 23:47

1.前端人员

策划人员：方案

美工：设计图 .psd .rp

前端：静态网页

后台：获取数据 java php .net

2.Web的组成部分

(1)Web服务器：监听客户端连接请求、接收请求，返回响应内容。Apache Httpd

(2)Web客户端：浏览器、移动设备

(3)HTTP协议：定义Web服务器和客户端的通讯细节

安装Httpd Web服务器：

(1)下载 http://httpd.apache.org

(2)安装

(3)启动Httpd

可以使用控制程序，或者操作系统的服务控制台(services.msc)，或者使用命令net start Apache2.2

(4)可以查看系统打开的端口(port)号，确认httpd是否已经启动:netstat -anb

(5)使用浏览器访问httpd服务器

3.服务器端技术和客户端技术

常见的服务器端技术(运行在服务器上)：

JSP/ PHP / ASPX

常见的客户端技术(运行在浏览器上)：

HTML / CSS / JS / SWF

4.HTML技术——重点

文本：就是纯字符

超文本：在纯字符中嵌入样式、图片、音频、视频、超链接等内容

Hyper Text Markup Language，超文本标记语言，就是52个标记嵌入在纯文本中，实现超文本效果的语言。如：

<marquee>hello</marquee>

注意：作为一门计算机语言，HTML与Java、C、PHP不同，没有循环、选择等基本语言结构，只有纯文本和52个标签。

5. HTML语法——重点

(1)一篇HTML文档就是一个文本文档，其中包含 “纯文本”+“标签”

(2)HTML中的标签分为两种：

双标记标签： <标签名>......</标签名>

单标记标签： <标签名/> 单标记标签中不能包含内容

(3)标签之间可以嵌套，但不能交叉

(4)标签名不区分大小写，但有个版本的HTML要求全小写，推荐全用小写

(5)标签可以声明属性，属性有属性名和属性值，属性值需要使用单引号或双引号括起来

(6)不同的标签具有不同的属性，所有的标签都具备下列四个属性：

·id：整个文档每个标签可以声明一个唯一的id号

·style：为元素指定CSS样式

·class：指定元素所属的类型

·title：指定标签的弹出式提示语

6.HTML常用标签

标签名

说明

常用属性

区块/内联

声明一篇文档开始和结束

xmlns: Namespace名称空间

标明文档的头部，显示区域之外的部分

标明文档的主体，显示区域

只能放于<head>标签内，用于标示文档的标题

李家的二丫

王家的二丫

7.HTML文件的基本结构

(1)文档类型声明：HTML有不同的版本，如html1.0html2.0 html3.0 html4.0(strict/transitional) xhtml(strict/transitional/frameset) html5，不同版本的HTML中可以使用标签的数量以及标签的属性是不同的，且会影响到浏览器对CSS和JavaScript的解释执行。

(2)<html>

<head>

</head>

<body>

</body>

</html>

HTML语法

<b>hello</b>

<br/>

HTML文档的基本结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

1.HTML转义字符

基本格式： &xxxx;

< <

> >

空格  

& &

® ®

™ ™

HTML注释：不需要浏览器处理或显示，可用于以后调试或源码读取方便。注意：注释不能嵌套

2.HTML元素的类型：

(1)区块元素(block)：必须处于独立的一行中

(2)内联元素(inline)：可以与其他内容处在一行中

3.Web开发用到的图片格式

bmp：未经压缩的bit图，一般不用于Web开发

psd：photoshopdoc原始文档，支持层，页面中不直接使用

tiff：出版印刷

raw：太大

--------

jpeg：经过压缩的图片，保真度高，色彩丰富，适用于Web中的照片，1024*768大压缩到100k甚至更小完全可以接受

png：色彩没有jpg丰富，但透明度支持的好，压缩比例大，适合于图标

gif：色彩比较丰富，支持动画效果，也在一定程度支持透明度。

4.页面中使用的资源的路径

HTML页面中可能用到资源：

“图片”、“CSS”、“JS”、“另一个页面

要使用这些资源必须指定资源URL，URL有如下三种：

(1) 绝对路径：已协议名开头的路径，如http://www.baidu.com/logo.png

(2) 相对路径：不以协议名开头，如g.jpg ./g.jpg images/g.jpg ../g.jpg ../../../images/g.jpg

(3) 根相对路径：以/开头的路径，相对于当前站点的根路径，而与当前页面所在路径无关

补充：<head><basehref=”http://www.baidu.com/”/></head>

base标签用于指定当前页面的相对地址的资源的URL基准值

5.TABLE的使用——重点

(1)显示批量的数据

(2)作页面布局——过时(Deprecated)

<table>

<tr>

</tr>

</table>

表格的最完整形式

<table>

<caption>2014年达内部门绩效表</caption>

<thead>

</thead>

<tbody>

....

</tbody>

<tfoot>

</tfoot>

</table>

6.页面布局

(1) TABLE作布局：表格嵌套可能导致页面很复杂不易编辑，浏览体验不好(要么一片空白，要么一次性全部出来)

(2) DIV+CSS：当前主流

(3) HTML5布局标签：未来趋势

所过的HTML标签

标签名

含义

常用属性

类型

html

head

title

定义网页的元数据

body

<b></b>

bold文本加粗，描述样式

XHTML中已废弃

inline

文本加粗，描述语义

XHTML中推荐代替<b>

inline

<i></i>

italic文本斜体显示，描述样式

XHTML中已废弃

inline

文本斜体显示，描述语义

XHTML中推荐代替<i>

inline

<u></u>

underline下划线，描述样式

inline

<s></s>

strike删除线，描述样式

inline

下标字，描述样式

inline

上标字，描述样式

inline

h1,h2...h6

header，标题字，描述语义

注意：标题字在不同浏览器中的默认字体高度、间距都是不一样的

block

<p></p>

paragraph文章的段落，描述语义

block

<br/>

HTML4:斜杠可以省略

XHTML:不允许省略

HTML5:允许

行内分区工具，跨距，是一个最简单的inline元素

必须配合CSS或JS才能有效果

inline

元素分组工具，层，常用于内容分层、页面布局，是一个最简单的block

配合CSS使用（DIV+CSS布局）

block

<hr/>

horizontal rule水平分割线

width

color

align

block

使用源代码中的效果呈现内容

block

<img />

通知浏览器此刻应该向服务器发起一个图片请求

src指定图片的URL

width:像素、百分比

height

alt:若图片无法显示则显示此替代文字

title

inline

anchor锚

href指定要跳转的url、邮箱、要执行的js函数

target指定在你哪个页面中打开(_self/_blank)

name指定可供停靠的锚点名称

inline

table

block

align:left/center/right

valign:top/middle/bottom

rowspan:跨越的行数

colspan:跨越的列数

meta data：元数据—描述数据的数据

BookName Price AuthorPhone

tom 38 6565

复习：

block：独立占一行，div

inline：可与其它共处一行，span

HTML文档的基本结构

<!DOCTYPE html>

<head>

<basehref=””/>

<meta/>

</head>

<body>

<p></p>

<hr/>

</body>

</html>

页面布局的三种方式——重点

(1) TABLE布局：过时

(2) DIV+CSS：当前主流，表达的语义不清

(3) HTML5布局标签：未来趋势

HTML5中为了页面布局新增了如下标签：

上述标签本质与DIV完全一样，无显示效果，仅仅是一个最简单的区块元素——见名知义

TABLE的两个用途：

(1) 显示批量的数据

(2) 作页面布局

<table>

<tr>

</tr>

</table>

<table>

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

1.HTML中的列表

(1)无序列表：ul，UnorderedList

(2)有序列表：ol，OrderedList

(3)定义列表：dl，DefinitionList

列表项：li， List Item

2.表单标签的使用——重点/难点

表单(form)：用于收集用户的数据，提交给服务器上某个页面，该页面可以对表单中提交的数据进行保存或查询(由php/jsp/aspx来担当)。

常用的HTML标签

标签名

含义

常用属性

类型

type:disc/circle/square

block

type:1/a/A/i/I

start：

block

definition list

block

definition type

block

definition details

block

form

action:指定表单数据的处理页面(动态页面)

method:GET/POST,前者把请求数据追加在地址栏查询字符串中(有长度限制)；后者把数据以单独的数据包发送给服务器(无长度限制、且可用于文件上传)

block

单行文本输入框

name(必需)指定输入的内容的含义

value待提交的值/提示文字

maxlength允许输入的最多的字符数

readonly只要出现即表示输入域只读(不能改但可以提交)

disabled只要出现即表示输入域禁用(不能改且不能被提交)

inline

提交按钮，可以提交表单内容

inline

便签、标签，用于给输入域添加提示文字

for指定为某个输入域的id

inline

name

value

checked只要出现即表示单选按钮被选定

inline

复习：

block：独立占一行，div

inline：可与其它共处一行，span

HTML文档的基本结构

<!DOCTYPE html>

<head>

<basehref=””/>

<meta/>

</head>

<body>

<p></p>

<hr/>

</body>

</html>

页面布局的三种方式——重点

(1) TABLE布局：过时

(2) DIV+CSS：当前主流，表达的语义不清

(3) HTML5布局标签：未来趋势

HTML5中为了页面布局新增了如下标签：

上述标签本质与DIV完全一样，无显示效果，仅仅是一个最简单的区块元素——见名知义

TABLE的两个用途：

(1) 显示批量的数据

(2) 作页面布局

<table>

<tr>

</tr>

</table>

<table>

<thead>

</thead>

<tbody>

</tbody>

<tfoot>

</tfoot>

</table>

1.HTML中的列表

(1)无序列表：ul，UnorderedList

(2)有序列表：ol，OrderedList

(3)定义列表：dl，DefinitionList

列表项：li， List Item

2.表单标签的使用——重点/难点

表单(form)：用于收集用户的数据，提交给服务器上某个页面，该页面可以对表单中提交的数据进行保存或查询(由php/jsp/aspx来担当)。

3.表单中实现文件上传必须满足：

(1)表单中使用<input type=”file” name=””/>选择文件

(2)表单必须使用POST提交 method=”POST”

(3)表单的编码类型必须声明为 enctype=”multipart/form-data”

4.HTML中的按钮

(1)<button></button> 在表单外调用一个js函数时使用

(2)<input type=”button” value=””/> 在表单内调用一个js函数时使用

(3)<inputtype=”submit” value=””/> 在表单内提交表单

(4)<input type=”reset” value=””/> 在表单内重置所有输入域为初始值

(5)<input type=”image” src=””/> 在表单内显示一个图片按钮，可用于提交表单，作用于<input type=”submit”/>一样

常用的HTML标签

标签名

含义

常用属性

类型

type:disc/circle/square

block

type:1/a/A/i/I

start：

block

definition list

block

definition type

block

definition details

block

form

action:指定表单数据的处理页面(动态页面)

method:GET/POST,前者把请求数据追加在地址栏查询字符串中(有长度限制)；后者把数据以单独的数据包发送给服务器(无长度限制、且可用于文件上传)

enctype:EncodedType表单中提交的数据的编码类型，可取值：

text/plain表单数据不做任何编码直接上传

application/x-www-form-urlencoded把表单中的数据(中文、特殊符号)编码后再上传，只能对字符进行编码

multipart/form-data以一种特殊的格式上传字符/字节数据

block

单行文本输入框

name(必需)指定输入的内容的含义

value待提交的值/提示文字

maxlength允许输入的最多的字符数

readonly只要出现即表示输入域只读(不能改但可以提交)

disabled只要出现即表示输入域禁用(不能改且不能被提交)

inline

提交按钮，可以提交表单内容

inline

便签、标签，用于给输入域添加提示文字

for指定为某个输入域的id

inline

name

value

checked只要出现即表示单选按钮被选定

inline

下列框

name

size指定显示出来的行数

multiple只要出现即表示可以多选(按下Ctrl/Shift)

inline

选项组

label

value

selected只要出现即表示被选定

值在开始标记和结束标记之间，无value属性

文本区域，多行文本输入框，只能输入纯文本

name

rows显示出的行数

cols显示出的列数

inline

在表单中添加一个隐藏字段

name(必需)隐藏字段的名

value(必需)隐藏字段的值

输入域集合

block

输入域集合的标签名

按钮

inline

在当前页面中嵌入另一个页面

src待嵌入的页面的URL

width

height

style=”border:0”不显示边框

inline

HTML5新增的几个标签

详情

Chrome/Opera支持

block

详情的概要

block

度量衡

min

max

value

inline

为网页内容添加日期和时间信息

datetime

inline

注意：Textarea只是纯文本编辑框，要想输入各种样式的文本、图片、表格等需要使用“富文本编辑器”——可使用第三方工具(KindEdtitor / FCKEdtior / CuteEditor)实现此效果

0 0