HTML+CSS(2)

HTML列表：

无序列表：

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

type : disc 默认的黑色点， circle 圆圈， square 方块。

<ul type="square"><li>北京</li><li>上海</li><li>杭州</li></ul>

浏览器显示如下：

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

有序列表：

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

type="默认是数字序号，a，A，i，I" start :从哪个地方开始

<ol type="A" start="5"><li>北京</li><li>上海</li><li>杭州</li></ol>

浏览器显示如下：

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

自定义列表：

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<dl><dt>周边旅游</dt><dd>承德</dd><dd>朝阳</dd><dd>通州</dd><dt>国内旅游</dt><dd>北京</dd><dd>上海</dd><dd>杭州</dd><dt>国外旅游</dt><dd>俄罗斯</dd><dd>哥本哈根</dd><dd>美国</dd></dl>

浏览器显示如下：

marquee：实现文字滚动效果

marquee标签，在W3C里面没有，但还是可以用的。

此元素是块元素。

此元素需要关闭标签。

如：

<marquee bgcolor="red" width="500" direction="left" scrollmount="20" scrolldelay="300" behavior="altemate" vspace="150">欢迎光临本站</marquee>

direction：方向 left (默认)， right 向右，up 向上，down 向下

behavior：滚动方式

——alternate： 表示在两端之间来回滚动。

——scroll： 表示由一端滚动到另一端搜索，会重复。

——slide：表示由一端滚动到另一端，不会重复。

width：宽度

height：高度

bgcolor：背景色

hspace：水平方向空白

vspace：垂直方向

scrollamount：速度，像素/秒

scrolldelay：间隔 单位：毫秒，(1秒＝1000毫秒)

bgsound：bgsound 是 background sound 的缩写。Internet Explorer 专用标签，打开网页的时候自动播放背景音乐。

如：

<bgsound  src="bg1.mp3" loop="-1" />

bgsound是单标签。

src:路径,建议将声音和图片和当前网放在一起，路径直接写文件名及扩展名即可。

loop =”-1” 无限循环。

Html颜色表示：

计算机进制：十，八，十六，二

计算器命令：在运行中输入：calc->查看->程序员-

十六进制：每两个一组，一共三组

#开头

#rrggbb

前两个代表红表，中间代表绿色，最后两个代表是蓝色

每一位的取值范围：(0-9,a,b,c,d,e,f)

常用的到颜色：#333，#444，#ccc, #575757

计算机编码：ASCII,ANSI,GB2312,GBK,BIG5,JIS,unicode,utf-8

字节，是计算机中最小的存储单位

位，是计算机中最小的处理单位

1B＝8b

1024bit=1KB;1024KB=1MB, 1024MB=1GB,1024GB=1TB

1024Mb/8=128KB

解决乱码问题：

只要保证编码一致就不会出现乱码：

——编辑器设置。

——meta 字符设置：

<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

http-equiv:服务器通知浏览器用什么字符来显示本页面

content=”text/html” 大类text文本文件下的html文件

charset=”” 我们要在这里设置字符编码，gbk, gb2312简体中文,utf-8(万国码)

——浏览器编码。

——PHP字符集设置。

——Mysql数据库字符集设置。

meta标签：

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta> 标签永远位于 head 元素内部。

元数据总是以名称/值的形式被成对传递的。

http-equiv(content-type,refresh)：

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<meta http-equiv="refresh" content="3;http://www.baidu.com" />

refresh  刷新；页面跳转，主要应用：域名更换等。

name(keywords,description,author,copyright)：

<meta name="author" content="" />

<meta name="" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

description ：有关描述搜索引擎会生成一个摘要

W3C简介：

万维网联盟

world wide web consortium(w3c)

1994成立

制定web标准( 结构(html)，表现(CSS)，行为(ECMAscript))，并推广web标准，敦促web开发者使用web标准。

W3C 同时与其他标准化组织协同工作，比如 Internet 工程工作小组（Internet Engineering Task Force）、无线应用协议（WAP）以及 Unicode 联盟（Unicode Consortium）。

W3C 的会员包括了：软件开发商、内容提供商、企业用户、通信公司、研究机构、研究实验室、标准化团体以及政府。一些知名的会员包括：IBM、Microsoft、America Online、Apple、Adobe、Macromedia、Sun Microsystems。

W3C 最重要的工作是发展 Web 规范（称为推荐，Recommendations），这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模块。

每项 W3C 推荐的发展是通过由会员和受邀专家组成的工作组来完成的。工作组的经费来自公司和其他组织，并会创建一个工作草案，最后是一份提议推荐。一般来说，为了获得正式的批准，推荐都会被提交给 W3C 会员和主任。

DTD文档类型定义：

文档类型定义（DTD，Document Type Definition）是一种特殊文档，它规定、约束符合标准通用标示语言（SGML）或SGML子集可扩展标示语言（XML）规则的定义和陈述。

strict 严格型

transitional 过渡

frameset 框架

img图片标签：

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

img 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

<img> 标签有两个必需的属性：src 属性 和 alt 属性。

<img> 标签的 src 属性是必需的。它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径。

alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。

假设由于下列原因用户无法查看图像，alt 属性可以为图像提供替代的信息：

——网速太慢

——src 属性中的错误

——浏览器禁用图像

——用户使用的是屏幕阅读器

<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

最好在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。

对于图片的宽和高，只设置一个，另一个会按比例自适应。

可以缩小，但不可以放大，放大就会失真。

border 图片的边框，默认是黑色的边，不可以设置。只能通过样式修改，如下面的操作：

<span style="font-size:18px;"><span style="font-size:18px;"><img src="cat.jpg" width="300" alt="这是一只猫" align="left"hspace="20" style="border:10px solid red;"/></span></span>

img标签中alt属性和title属性的区别：

alt属性：是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。

title属性：是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover。

另外，HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的。

绝对路径与相对路径：

绝对路径：

描述：形如：c:\img\cat.jpg ,”一个真实的路径”

目录，就是文件夹

——file:///C:/Users/Administrator/Desktop/day2/cat.jpg

——https://www.baidu.com/img/bd_logo1.png

——<li><a href="/product/">合作项目</a></li>

其中，"/"代表网站的根目录。

——c:\img\cat.jpg

相对路径(三种情况)：

目标文件（img）和当前文件(网页)是同级别:

——目标文件的路径写法：直接写文件名和扩展名即可。

目标文件所在的文件夹与当前页面是同级:

——目标文件的路径的写法：文件夹的名称/目标文件的名称+扩展名

目标文件在当前页面的上一级：

——用：../

——../就是指的向上一级。

——如果目标文件在当前页面的上两级再加一个../

关于路径，我们在做网站的时候一般用相对路径。