自学html4,HTML4

web前端技术

web前端技术不是指的某一项技术，他是由w3c组织指定一系列技术的集合，主要包括：

1、结构标准：html----页面结构的搭建：(布局和排版)

2、样式标准：css-----页面的样式和外观

3、行为标准：js------页面的行为和特效

html发展历史

标签书写规则

1、标签名称必须放到一对尖括号里面

2、成对出现

3、区分首尾：首标记和尾标记

html1.0-------------93起草了一个草案，纯文本的格式

html2.0------------

html3.0------------过渡版本

html4.0------------xhtml1.0------规避之前版本的缺点：语法松散，不规范

html5.0-----------应该是未来的一个发展趋势

==学习版本：xhtml1.0==

网页基本结构

html-----整个网页(人)-------作用：一个网页

head----网页头部(人的头部)------作用：承载的是给浏览器看的信息，默认不可见

body----网页主体(人的身体)-----作用：承载所有给用户看的信息

Mate标签的补充

上面代表如果是用ie打开的当前页面，那么就使用最新的ie版本打开此页面。

SEO优化的设置:

Base标签

可以让当前页面中的所有的a标签都拥有相同的属性，比如targent属性。

title------网页标题(人的脸部)-----作用：网页名称

Link标签的常见用法

1.引入DNS预先解析

dns预解析(了解)

2.引入网站icon图标：

3.引入css样式，【后面讲】

浏览器

兼容目标：ie6-9；火狐；谷歌

浏览器编码：

utf-8：国际编码；集成了各个国家已经被认证的语言字体；

gb2312和gbk：国家码：中文汉字和英文；

标签的作用：

1、选中目标

2、设置属性

标签属性的规则：

键值对：color=”red”；k=”v” k=”v”

键值对之间用空格隔开

:设置文字属性的标签

文字三属性：

1、字体：face

2、字号：size

3、颜色：color

键值对练习

宽度：width=”500”

高度：height=”300”

对齐方式：align=”left|center|right”

字体：face=”黑体”

字号：size=”7”

颜色：color=”red”

body属性

背景色：bgcolor=””

背景图：background=”图片路径”

小常识：背景图和背景色共存的时候，背景图在上，背景颜色在下。

BUI标签----无属性标签

b：加粗

u：下划线

i：倾斜

H1标题标签

标注当前页面中的文档最重要的核心主题的文本

H1到 h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次(当然可以超过，但是不利于搜索SEO)。

H2以后的这些标签可以在一个页面中有多个，但是不要滥用，滥用会导致网页的SEO受影响，搜索引擎会认为我们作弊。

H1 到H6 标签不是用于 字体大小的样式设置，关键是文档内容的文字的重要性的体现，html是定义文档内容的，而样式由后面我们学的css来设定。

案例：新闻

h标记：align属性(left|center|right)

浏览器只认识标签语言，不认识任何的回车和换行、空格

空格：

插入图像

标签：img；单标记；有一个原则性属性：src=”图片路径”；

img插入的图像是在页面里面真真实实存在，是占位的；

img属性：

边框：border=”3”

宽度：width=”600”

高度：height=”200”

提示文本：title=”这是一张蒲公英图片”

替换文本：alt=“蒲公英图片不存在”

img相关知识点：被拉伸效果做法：同时设置宽高；等比缩放：只需任意设置一个宽度或者高度

Alt：图片不显示的时候，会显示alt属性的文本

Title：对网站的seo有很大的影响。当鼠标移上去的时候，图片显示的tip提示文本内容。

图片的选择

jpg

色彩还原高，适合复杂颜色图片，比如banner

gif

色彩效果最低，支持透明，支持动画，适合颜色比较少，不适合渐变色。

png

PNG的优点是，清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。

PNG有着另一个优点，那就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。

总结：

gif和png基本差不多，色彩比较少的直接gif，如果图片动画用gif。对色彩要求高的用jpg。

相对路径

1、同级查找：图片和html在同一个根目录里面

2、下级查找：只需要写出图片所在的文件夹/图片名称；

例如：src=”images/pic00.jpg”

3、上级查找：只需要写../(返回上一级)图片名称；

例如：src=”../pic.jpg”

拓展：既有上级又有下级

例如：src=”../../images/pic00.jpg”

Span标签

Span标签定义文档中的一小节文本。语义不强。

Span标签可以跟其他的span标签共用一行。

Em标签

em标签是局部的文本的 加强语气，或者是文本的强调的作用。

Em标签可以会改变局部的文档的语义。

我更喜欢小狗和小猫咪。

Strong标签

是 针对整个文档而言，进行一个加强语气的作用。例如：一篇文章中最重要的主题思想或者段落用strong标签进行包裹。

Sub和sup标签

Del标签

知识点：凡是需要选中内容标签都是双标记，不需要选中内容的都是单标记

URL协议

平时我们写的 网址就是 url地址。

Url协议就是 规定 url地址的格式。

协议规定格式：协议名称:// 域名(ip地址):80/路径/文件a.htm

scheme - 定义因特网服务的类型。最常见的类型是 http, https,ftp

host - 定义域主机(http 的默认主机是 www)

domain - 定义因特网域名，比如 w3school.com.cn

:port - 定义主机上的端口号(http 的默认端口号是 80)

path - 定义服务器上的路径(如果省略，则文档必须位于网站的根目录中)。

filename - 定义文档/资源的名称

Demo：

http://news.sina.com.cn/c/zg/2015-10-27/doc-ifxizwsm2427861.shtml

http协议， 域名： news.sina.com.cn

服务器上： /c/zg/2015-10-27/路径下面的 ：doc-ifxizwsm2427861.shtml

URL编码

为什么要有URL编码呢？

如果我写的一==个中文的网页要在 阿拉伯国家的电脑上进行显示==。

中文字符在阿拉伯国家的电脑上会正常显示吗？

列表

无序列表：比较常用

整体管理，它一种思想，涉及计算机方方面面，很有意义。

结构

ul嵌套li，ul标记无序列表整体，li列表的某一项。

li列表项前的符号叫做列表样式或者项目符号

disc：圆点，默认值

circle：空心圈。

square：矩形块。

超链接

a 标记

双标记，它有一个原则性属性：href=”路径/url”

==超链接默认样式：蓝色并且有下划线==

主要包括：文字链接、图片链接

文字链接：

链接线上网址

链接到本地文件：href=”相对路径查找到的文件名”

弹出新窗口打开文件：href=“”，多加了一个属性：

target=”_blank”

假链接：href=”#” 跳转到当前页面(回到页头)

空链接：href=”javascrip:void(0)” 不做跳转只保留a的样式(常用)

图片链接：href路径和文字链接一样，把文字替换成图片

有序列表

ol嵌套li，ol有序列表整体，li表示列表项，同时可以用type来设置项目符号

项目列表(自定义列表)

项目列表和有序、无序列表迥然不同，

结构：

dl嵌套dt和dd，dl表示项目列表的整体，dt表示项目(项目名称)，

dd表示项目详情

项目列表可以被应用在图文混排效果

==dl里面只能包含dt和dd，dt和dd里面可以放任何标签==

拓展使用方法：

1.dl里面可以同时存在多对dt和dd

2.dl里面可以同时存在一个dt和多个dd

表格

它引领了一个时代，可以用做布局，但现在用div布局

结构：

table嵌套tr，tr嵌套td；table表示表格整体，

tr表示行，td表示单元格

==表格是一个弹性容器，默认情况下尺寸受内容控制==

想要几行设置几个tr，想要几列设置几个td；

表格默认情况下是没有边框线，设置方法：border。

table属性：

边框线：border

宽度：width

高度height

背景色：bgcolor

背景图：background

对齐方式：align

外边距：单元格和单元格之间的距离：cellspacing;设置值为正整数，最小为0

内边距：内容与边框的距离：cellpadding,数值设置于外边距一样

tr属性：是table的孙子级。浏览器解析时会自动加上中间省略tbody.

valign　设置一行中单元格垂直对齐方式

height 高度；(注意无宽度，因为宽度一般由table决定)

align 水平对齐方式；

bgcolor 背景色

td属性

bgcolor 设置行单元格背景颜色；

background 背景图；

align　设置单元格对齐方式

valign　设置单元格垂直对齐方式

width　设置单元格宽度

height　设置单元格高度

表格标签table

快捷键： ctrl+{ 进行左缩进， ctrl+} 进行右缩进

关于表格的合并单元格

Rowspan 行方向上合并单元格

Column 列方向合并单元格

姓名年龄成绩

张三246呵呵

表单form

Form标签，表单的域标签，用于包裹整个表单的内容。表单就是用户提交数据到后台的一个虚拟单子。

表单一般由 文本框、下拉列表、单选、多选、文本域等组成。

属性：

action-------服务器地址，用于指定当前表单 提交的时候指向后台的地址。项目初期不需要指定。

method------设置发送方式，有两个值：get：明文发送；post：密文发送。

表单总结

Form：包裹标签，action：#

表单将标签分为两类：input标签和非input标签

input标签：

文本框：type属性值为text；

密码：type属性值为password；

普通按钮：type属性值为button；

单选框：type属性值为radio；

扩大触发区域：label；

默认选中：checked=”checked”(复选框设置默认选中也是用次方法)

实现单选：为不同input标签设置相同name属性值(name=”sex”)

复选框：type属性值为checkbox。

提交按钮：type属性值为submit，设置默认值用value=”提交“

重置按钮：type属性值为reset

上传文件：type属性值为file

图片按钮：type属性值为image，原则性src属性===图片按钮的路径

非input标签：

下拉菜单：

select嵌套option，select表示下拉菜单整体，option表示下拉菜单的选项。

分组：

默认值：option设置selected=”selected“

分组的情况下：optgroup嵌套option

value值只有在后台有用。Option包裹的内容是显示的选项的文本。例如：

公历

农历

农历

农历

Multipe:也是一个单属性。值只有一个multiple。设置了此属性表示select标签表现为 列表标签。否则表示下拉列表标签。

文本域：

textarea，cols设置水平方向宽度、水平显示的列数

rows设置垂直方向高度，垂直方向显示的行数

设置领域：

设置领域：fieldset嵌套legend(领域名称【注册信息】)

fieldset标签没有任何发送数据的功能，只是设置了前台的显示样式。

Lable标签

for属性指向要提供服务的 标签的id值。

Lable直接包裹标签，可以实现点击标签的文字内容，让包裹的表单标签 标签获得焦点。

< label for="txtName">文本框获得焦点< / label >

< label>< input type="button" value="普通的按钮" > 选中按钮