重蔚的php学习第二天之HTML篇

.昨日回顾

服务器软件：Apache、IIS

浏览器是一个翻译官，是一个解释器。浏览器可以翻译有HTML、CSS、JavaScript。

服务器端脚本程序：PHP、 .net、JSP、c#等

.php文件要由PHP脚本引擎来进行处理。

网站前台(客户端) 网站后台(服务器端) 数据库

HTML(结构) PHP MySQL

CSS JSP Oracle

JavaScript .net SqlServer

HTML结构：主要来说明，哪个地方是标题，哪个地方是段落，哪个地方是表格，哪个地方是表单。

CSS表现(格式)：主要功能是，给相对应的HTML标记定义各种各样的格式。

JavaScript行为：主要用于与计算机网页进行交互(交流)。

块元素和行内元素

块元素：宽度单独占一个通栏宽，块元素的前台的其它元素，都要另起一行来排。

比如：<p> <pre> <hr> <h1>……<h6> <ul> <ol> <li>

DIV和SPAN就是一个容器，容器中可以存放任何可以存放在<body>中的内容或标记。

行内元素：行内元素没有宽度和高度的概念，也就是说通过CSS无法给行内元素增加宽和高。多个行内元素会放在同一行，不会另起一行来排版。

2.<marquee></marquee>滚动字幕标记：块元素

Direction：滚动的方向，取值：left、right、up、down

Behavior：滚动的方式，取值：scroll(滚动)、 alternate(弹动)、 slide(滚动一次)

Width：滚动的区域宽度，取值：px或%

Height；滚动的区域高度

bgColor：背景颜色，如：bgcolor=“#FF0000” bgcolor=“rgb(255,0,0)”

scrollAmount：滚动步长值，一步走多远，值越大，走的越快

scrollDelay：两次滚动的间隔时间，以毫秒为单位 1秒=1000毫秒

3.计算机进制

进制，就是一种进位方法。

10进制：有10个基本数，0、1、2、3、4、5、6、7、8、9，运算规则是：逢十进一

例如：9 10 19 20 29 30

2进制：有2个基本数，0、 1，运算规则是：逢二进一。比如：(10)2 11 100 101 110

8进制：有8个基本数，0、1、2、3、4、5、6、7，运算规则是：逢八进一。比如：(17)8 20 21 26 27 30

因为二进制太长，不方便记忆，因此小型机引入了八进制，八进制可以很好的反应二进制。

因此，一个八进制数，用3位二进制数来表示。

基R=2^3

16进制：有16个基本数，0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F，运算规则是：逢16进一

比如：EF F0 F1 F2 FE FF (100)16

16进制的一位对应4位二进制。基R=2^4

10进制	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19
2进制	1	10	11	100	101	110	111	1000	1001	1010	1011	1100
8进制	1	2	3	4	5	6	7	10	11	12	13	14	15	16	17	20
16进制	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10	11	12	13

十进制转成二进制

分为整数部分和小数部分，分别转换。比如：将(10.125)10转成二进制？ 1010.001

（1）整数部分转成二进制：除2取余法。每次将整数除以2，取余数，一直除下去，直到整数部分(商)为0。最后读数时，从下往上读取。

第N次	整数10	商	余数
第1次	10/2	5	0
第2次	5/2	2	1
第3次	2/2	1	0
第4次	1/2	0	1	最后结果为：1010

（2）小数部分转成二进制：乘2除整法。每次将小数部分乘以2，取整数，一直乘下去，直到小数部分为0。最后读数时，从上往下读取。

第N次	小数0.125	积	整数
第1次	0.125*2	0.25	0
第2次	0.25*2	0.5	0
第3次	0.5*2	1.0	1
				最后结果为：001

二进制转成十进制

不分整数部分和小数部分，按权相加法。换句话说：二进制上的每一位，乘以所在位权(也就是2的几次方)，最后将各个位的乘相加，就能得到十进制。

1010.001 = 1*2^3 + 0*2^2 + 1*2^1 + 0*2^0 + 0*2^-1 + 0*2^-2 + 1*2^-3 = 8+2+ 1/8 = 10+0.125 = 10.125

4.计算机编码介绍(字符集)

计算机只能二进制，比如：a-z、A-Z、0-9、标点符号，计算机都不能直接识别。每个人都可以来约定一套字符编码（比如：a用二进制100表示，b用二进制101表示,c用二进制的110表示等）

计算机是由美国人发明的，美国标准化局同样制定了一套统一的编码，叫ASCII码。

ASCII码

ASCII编码用7位或8位(1个字节)二进制来表示，共可以表示128或256个字符。包括：大小写字母、数字、标点符号、图形符号等。

5.ANSI编码

每个国家都想让计算机能显示或处理本国的语言，都对ASCII码进行了扩展。

在中国(简体字)，ANSI编码是指GB2312或GBK。

在台湾(繁体字)，ANSI编码是指BIG5

在日本，ANSI编码是指JIS。

……

注意：ANSI编码是跟随操作一齐安装的，也就是，安装了中文操作系统后，它的默认编码就是GB2312。

6.GB2312编码

GB2312是中国标准化局，在1980年制定的一套显示简体中文的编码。

GB2312是用2个字节来显示。共可以表示2^16=256*256=65536个字符。

GB2312共保存了6763个常用汉字，一级汉字3700个。

GBK编码

对GB2312进行了扩充，可以显示人名、古汉语中的一些罕见字等。

GBK也是用2个字节来表示。共存储了2.3万个左右的中文字符。

GBK的范围，要比GB2312大的多。

BIG5编码

BIG5用于台湾、香港、澳门地区的繁体中文编码。

Unicode编码

用4个字节表示字符，共可以表示42个亿个字符。

Unicode编码可以显示世界上所有国家的语言。

缺点：文件庞大，效率不高，不利于推广。

UTF-8统一格式转换

它会自动根据不同的字符，来选择不同编码长度。

7.<meta>标记

<head>标记中的内容在浏览器中，是不可见的。

主要用两个常用的属性：

http-equiv：主要设置一些控制信息，属性值是固定的。比如：content-type

name：一般用于设置网页描述信息，像关键字、网页描述、网页版权、作者等，属性值是固定的。比如：keywords

content：是具体的参数或内容，与http-equiv和name属性进行对应。

（1）设置网页的字符集或编码

（2）设置网页刷新或跳转

注意：刷新功能相当于浏览器中的刷新按钮

（3）设置网页关键字(SEO优化)，给搜索引擎(搜索机器人)使用

（4）设置网页描述信息(SEO优化)

8.XHTML

XHTML是可扩展超文本标注语言，XHTML是更纯净的HTML，语法更严格。

XHTML的目的是为了取代HTML4.01。

XHTML是W3C的一个标准或规范。

编写XHTML的规范，与HTML编写有何不同？

1）所有的标记都必须被关闭。比如：<br>转换<br /> <hr>转换后 <hr />

2）XHTML要求所有的标记名称必须小写。比如：<meta><table><img><font>

3）XHTML要求所有的属性名必须小写，属性值必须加引号。

4）XHTML要求所有的属性必须有值。

<hr noshade=“noshade” />

<input type=“radio” checked=“checked” />

5）所有的标记要顺序嵌套，不能交叉嵌套；

6）XHTML文件，必须要有DTD文档类型定义；

DTD(Document Type Define)文档类型定义

（1）严格型Strict

要求HTML代中，不能存在任何的表现，用CSS去代替。比如：<font>、bgcolor、background等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

（2）过渡型transitional

可以使用任何表现的标记或属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

（3）框架型Frameset

制作框架网页时使用的一种类型，框架主要用于网站的后台管理。

框架技术：是将一个浏览器窗口划分成不同区域，每个区域(窗口)都可以显示一个独立的网页。（HTML第四天单独讲框架，现在作个了解）

9.W3C简介

W3C是万维网联盟，是一个国际性的非盈利性组织，是WEB领域最具权威性的组织。已经制定多达200多项的标准。

比如：XHTML、CSS、ECMAScript(JavaScript)、DOM、 XML等。

10.超级链接

超级链接的功能：就是点击某个链接，可以跳转到目标页面或文件。

超级链接的分类：

（1）按内容分类：文本链接、图片链接、多媒体等

（2）按URL分类：相对URL、绝对URL、锚点

URL，指网址或路径

URL(Uniform Resource Locator，统一资源定位器)，也就是指互联网地址。

http://www.sina.com.cn/about/index.html

第一个部分：协议，指访问什么类型的服务器，如：http://、FTP://、news://

第二个部分：主机名或主机的IP地址。如：www.sina.com.cn

第三个部分：文件夹名，如：about

第四个部分：文件名，如：index.html

11.<a></a>超级链接的标记

格式：<a 属性=“属性值”>新浪网</a>

常用的属性：

Href：指链接的目标文件或网址。比如：href=“http://www.toutiao.com”

Target：指目标文件的打开方式。

_blank：在新窗口中，来打开目标文件；

_self：在当前窗口中，来打开目标文件；

_top：在最顶层窗口中，来打开目标文件(在框架中讲)；

_parent：在父窗口中，来打开目标文件(在框架中讲)

Name：设置锚点的名称。锚点是指：链接到同一个页面的不同部分

举例：<a href=http://www.toutiao.com target=“_blank”>头条号</a>

12.相对路径和绝对路径

绝对URL：它总是以file:///协议开头，去访问目标文件。

如果将当前文件移动到其它地方，这个绝对URL路径不需要修改。

绝对URL，只需要确定目标文件的路径即可，与当前文件位置无关。

例如：<a href=“file:///E:/itcast/20140510/lesson/day2/4.html”>本地绝对路径</a>

相对URL：要确定当前文件与目标文件的关系。

关系分为三种：

平级关系：直接写目标文件的文件名即可。

下级关系：也就是目标文件所在的文件夹与当前文件是平级关系，当前文件与目标文件是上下级关系。

上级关系：目标文件位于上一层级。

../代表上一层文件夹

../../代表上二层文件夹

../../images/01.jpg

提示：在制作网站时，一般使用的都是相对路径。

（3）下载链接：如果链接到的文件，网页不能直接执行的话，都会出现下载提示。

浏览器可以直接执行的文件：.gif、.jpg、.png、html、.htm、.mp3、.swf等

（4）邮箱链接：mailto:beijing2000@126.com

13.锚点链接：指链接到一个网页的不同地方

第一步：定义一个锚点或标记 <a name=“top”></a>

第二步：链接到锚点或标记 <a href=“#top”>返回顶部</a>

<a href=“intro.html#bottom”>链接到intro.html的底部</a>

14.<img>图片标记，单边标记

格式：<img 属性＝“属性值” />

常用的属性：

Src：指图片的URL，可以是相对路径，也可以是绝对路径。

Width：指图片的宽度，单位px或%

Height：指图片的高度

Align：图片的水平对齐方式，取值：left center right ，left或right可以实现图文混排

Alt：如果图片不存在时，显示的提示信息

Hspace：图片左右的距离

Vspace：图片上下的距离

举例：<img src=“images/01.gif” width=“400” height=“300” alt=“宝宝图片” />

如果保证图片在调整过程中不变形（等比例缩放）：只需要设置width和height其中一个即可，另一个会自动缩放。

TML是一种用来描述网页的标记性语言。学习HTML可能并不难，主要是要记一些HTML标签和标签代表的含义。下面PHP程序员雷雪松根据使用的情况，整理出平时常用的HTML标签。

HTML基础之HTML常用标签-PHP程序员雷雪松的博客

1、最基本的HTML结构

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

2、最常用的HTML标签

a、布局标签

div标签定义文档中的分区或节（division/section），可以把文档分割为独立的、不同的部分，主要用于布局。

aside标签的内容可用作文章的侧栏，<span style="color: #ff0000;">html5新增标签</span>。

header标签定义页面的头部（介绍信息），<span style="color: #ff0000;">html5新增标签</span>。

section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，<span style="color: #ff0000;">html5新增标签</span>。

footer 标签定义文档或节的页脚，通常包含文档的作者、版权信息、使用条款链接、联系信息等等，<span style="color: #ff0000;">html5新增标签</span>。

article标签规定文章独立的其他内容，比如：标题、内容、评论，<span style="color: #ff0000;">html5新增标签</span>。

b、文本标签

h1-h6标签可定义标题

p标签定义段落

b/strong标签加粗

em标签来表示强调的文本，斜体

strong标签表示重要文本

u标签下划线

s标签删除线

br标签表示回车换行

hr标签表示水平线

span标签被用来组合文档中的行内元素。

blockquote标签表示块引用

pre标签可定义预格式化的文本，保持原有格式的一种标签。

sub标签下标，

sup>标签上标

 表示一个空格

©表示版权符

<表示<

>表示>

c、a标签定义超链接，指定页面间的跳转。链接可以指向外部链接或者页面内部id锚点，可以在当前页面打开，新开窗口。

d、多媒体标签

img标签主要在网页中插入图像，可以定义图片替换文本、显示宽度和高度、是否带边框，建议等比例设置，否则图像会变形。

audio标签定义声音，比如音乐或其他音频流。<span style="color: #ff0000;">html5新增标签</span>。

<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

video标签定义视频，比如电影片段或其他视频流。<span style="color: #ff0000;">html5新增标签</span>。

<video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>

e、序列化标签

ul和li无序列表标签

<ul>

</ul>

ol和li有序列表标签，可以使用type属性规定有序列表符号的类型。1 按数字有序排列，为默认值，（1、2、3、4）；a 按小写字母有序排列，（a、b、c、d）；A 按字母大写有序排列，（A、B、C、D）。i 按小写罗马字母有序，（i, ii, iii, iv）；I 按小写罗马字母有序，（I, II, III, IV）。

<ol>

</ol>

dl标签定义了定义列表（definition list），dl标签用于结合 dt（定义列表中的项目）和 dd（描述列表中的项目）。

<dl>

<dd>用来计算的仪器 ... ...</dd>

</dl>

f、表格标签

table标签和tr标签，th标签和td标签，合并单元格。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

g、表单标签

form标签定义提交方式、提交地址、表单字符集以及如何对其进行编码，需要提交的表单一定要放在form标签内。

input标签用于搜集用户信息

密码，输入的字符会被掩码（显示为星号或原点）

文件类型的表单，上传文件时，form表单一定要设置为enctype="multipart/form-data"

隐藏表单

提交

重置

radio单选

<input name="sex" type="radio" value="1" />男

<input name="sex" type="radio" value="2" checked="checked" />女

checkbox多选

<input name="skill" type="checkbox" value="1" checked="checked" />PHP

<input name="skill" type="checkbox" value="2" />前端

<input name="skill" type="checkbox" value="2" />数据库

<span style="color: #ff0000;">注：checked="checked"可以简写成checked</span>

label标签为input元素定义标注，如果您点击label元素文本，就会触发此input控件。

textarea标签，设置文本区内的可见行数和宽度

<textarea name="content" cols="30" rows="10">大段文本输入框</textarea>

button标签定义一个按钮

提交按钮

重置按钮

select标签和option标签下拉列表

单选菜单列表框

<option value="2" selected="selected">raykaeso</option>

</select>

多选列表下拉框，shift加鼠标单击，可以连续选择多个选择，CTRL+鼠标点击，可以点击多个。

<option value="3">raykaeso</option>

</select>

注:selected="selected"可简写成selected，表示选中

3、其他HTML事项

a、HTML标签和属性是不区分大小写的，建议HTML标签和属性都小写，属性值必须用双引号包围。

b、HTML标签都是以开始标签起始，以结束标签终止。大部分HTML标签都是成对出现的，称为双标签，比如：p标签、div标签，也有的HTML标签在开始标签中结束的标签，称为单标签，比如：hr标签、br标签。大多数 HTML 元素可拥有属性，文本内容都是写在开始标签与结束标签之间。

c、HTML标签之间尽量缩进与换行，每行代码不要过长，方便阅读和维护。

d、HTML标签使用必须符合标签嵌套规则。禁止a标签嵌套a标签，p标签嵌套div标签。

e、建议不使用HTML已经废弃的或者不赞成使用的标签，少使用table布局、iframe框架嵌套以及flash播放器。

来源：PHP程序员雷雪松的博客 -HTML基础之HTML常用标签（http://www.leixuesong.cn/2045）

网页设计中，选择器用于选择 HTML 元素。类选择器（class selector）是 CSS 中用于选择具有特定类名的元素的有效工具。它们允许您按照类名对元素应用样式。

了解类选择器

类选择器是利用类名来选择 HTML 元素的 CSS 选择器。它们以 period (.) 开头，并跟随类名的名称。例如：

css

.highlight {

color: red;

}

此代码将为有 `class="highlight"` 的元素设置红色文本颜色。

基本语法

类选择器的基本语法如下：

css

.class_name {

/* 样式属性 */

}

* `class_name` 是类名。

* `{}` 包含要为元素应用的样式属性。

常见类型的类选择器

* 基本类选择器：使用基类名选择元素。

* 多个类选择器：使用多个类名选择多个元素。

* 嵌套类选择器：使用嵌套类名选择嵌套元素。

* 通配符选择器：使用通配符 `*` 选择所有元素。

最佳实践

* 避免使用多个不同的类名。

* 确保类名명短且有意义。

* 组织和命名类名以保持代码可读性。

常见问题

* 没有前缀：类名不需要任何前缀。

* 类名大小写：大写和小写对 CSS 选择器不起作用。

* 文本内容不匹配：类选择器不使用文本内容进行选择。

结论

类选择器是 CSS 中一个强大的工具，用于制作精壮的网站。通过利用类选择器，您可以轻松地对具有特定类名的元素应用自定义样式。了解如何使用类选择器可以提升您的 CSS 技能，并创建更专业的网页。

在线咨询

上一篇：JavaScript中常用的输入输出语句介绍
下一篇：HTML中的图片区域链接方法详解-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

重蔚的php学习第二天之HTML篇

.昨日回顾

2.<marquee></marquee>滚动字幕标记：块元素

3.计算机进制

4.计算机编码介绍(字符集)

5.ANSI编码

6.GB2312编码

7.<meta>标记

8.XHTML

9.W3C简介

10.超级链接

11.<a></a>超级链接的标记

12.相对路径和绝对路径

13.锚点链接：指链接到一个网页的不同地方

14.<img>图片标记，单边标记

1、最基本的HTML结构

2、最常用的HTML标签

3、其他HTML事项

您的项目需求