.。。。。。。。。。。。。。。HTML系列。。。。。。。。。。。。。。。。。。。。
DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
baike.baidu/view/939547.html?wtp=tt
a.HTML基本代码:
<html>
<head>
<title> title </title>
</head>
<body>
dddddlld
</body>
</html>
标签网址:www.w3school/tags/tag_doctype.asp
1.
<h1>---<h6>  标题从大 小。
<p></p> 表示段落
<br> 换行符  此标签没结束标签。
<!--...-->  注释标签。
<hr> 水平线
<del> </del> 删除文本
<ins> </ins> 下划线文本
字体格式化:
www.w3school/html/html_formatting.asp
<b> </b> 粗体
<strong> </strong> 加强
<big> </big> 大号
<em> </em> 加强
<i> </i> 斜体
<sub></sub>下注释
<sup></sup>上注释
<address></address> 表示地址。
<bdo dir="rtl"></bdo> 文字反向输出。
<blockquote></blockquote> 长引用
<q></q> 短引用
www.w3school/tiy/t.asp?f=html_quotations
<pre></pre> 预格式文本,很适合显示计算机代码,程序。
www.w3school/tiy/t.asp?f=html_preformattedtext
一个无序列表:
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ul>
一个有序列表:
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>菠萝</li>
</ol>
字符实体格式:� ;
2.
基本的注意事项 - 有益的提示
当您写 HTML 文本的时候,你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器,而另一些使用小的。当用户调整视窗的分辨率时,这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。
HTML 会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外,在 HTML 中,一个空行也被当作一个空格。
使用空的段落标记 <p> 去插入一个空行是个坏习惯。用 <br> 标签代替它!(但是不要用 <br> 标签去创建列表。不要着急,您将在稍后的篇幅学习到 HTML 列表。)
您也许已经注意到了,在没有结束标签 </p> 的情况下,<p> 标签依然可以正常工作。不过不要这样做!下一个版本的 HTML 将不允许忽略任何的结束标签。
HTML 会自动地在某些元素前后添加一个额外的空行,比如段落、标题元素前后。
使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法(但并不是唯一的办法)。
3.超链接
<a href="url">Text to be displayed</a>
www.w3school/html/html_links.asp
发送EMA
IL超链接时,应用 %20替换空格。
www.w3school/tiy/t.asp?f=html_mailto2
4.框架
<frameset>
www.w3school/html/html_frames.asp
5.表格的
基本格式:
<table>
<tr>
<td></td> OR <th></th>
</tr>
</table>
关于cellpadding,  table 属性
zhidao.baidu/question/7407260.html
关于cellspacing,table属性
www.w3school/tiy/t.asp?f=html_table_cellspacing
关于table的frame属性
hi.baidu/tuwicn/blog/item/13f97366386d3025ab184ce5.html
6.表单
<form>
<input>
<input>
</form>
www.w3school/html/html_forms.asp
7图像
图像标签(<img>)和源属性(Src)
在 HTML 中,图像由 <img> 标签定义。
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。
要在页面上显示图像,你需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
定义图像的语法是:
<img src="url" />
8头信息
头元素
头元素包含关于文档的概要信息,也称为元信息(meta-information)。Meta 意为“关于某方面的信息”。
可以这么说,元数据(meta-data)是关于数据的信息,而元信息是关于信息的信息。
头元素内的信息
头元素内的元素不会被浏览器显示出来。
根据 HTML 标准,仅有几个标签在 HTML 的头部分是合法的。它们是:<base>, <link>, <meta>, <title>, <style> 和 <script>。
这是一个不合法的结构:
<head>
<p>This is some text</p>
</head>
9.URL
URL(统一资源定位器)
一个称为 URL(统一资源定位器)的东西用于对万维网上的文档(或其他数据)进行寻址。一个完整的网址,例如:www.w3school/html/lastpage.html,遵守如下语法规则:
scheme://host.domain:port/path/filename
Scheme 定义因特网服务的类型。最流行的类型是 http。
domain(域)定义因特网域名,比如:w3school。
host(主机)定义此域中的主机。如果被省略,缺省的支持 http 的主机是 www。
:port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是 80。
path(路径)定义服务器上的路径(一个辅助的路径)。如果路径被省略,资源(文档)会被定位到网站的根目录。
filename(文件名)定义文档的名称。缺省的文件名一般会是 default.asp 或者 index.html,或者依据 WEB 服务器设置的其他文件名。
编者注:URL 的英文全称是 Uniform Resource Locator,中文也译为“统一资源定位符”。
URL Schemes
以下是其中一些最流行的 scheme:
Schemes 访问
file 本地 PC 上的文件。
ftp FTP 服务器上的文件。
http World Wide Web 服务器上的文件。
gopher Gopher 服务器上的文件。
news Usenet 新闻组。
telnet Telnet 连接。
WAIS WAIS 服
务器上的文件。
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
。。。。。。。。。。。。。。。。。CSS系列。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
www.w3school/css/index.asp  CSS教程
www.w3school/css/css_howto.asp 如何创建CSS
1.样式层叠
层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表(位于 <head> 标签内部)
4.内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
2 css 背景
背景:background-color
背景图像:background-image
背景重复:background-repeat
背景定位:background-position
背景关联:background-attachment
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
3. CSS 文本
color 设置文本颜
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。
4.css 字体
可以使用font-family属性
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。
www.w3school/css/css_font.asp
5.css 列表
要影响列表的样式,最简单(同时支持最充分)的办法就是改
变其标志类型。
例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型,可以使用属性 list-style-type:
ul {list-style-type : square}
时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:
ul li {list-style-image : url(xxx.gif)}只需要简单地使用一个 url() 值,就可以使用图像作为标志。
CSS列表属性:
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
6.CSS表格
CSS TABLE 属性
CSS 表格属性允许你设置表格的布局。(请注意,本节介绍的不是如何使用表来建立布局,而是要介绍 CSS 中表本身如何布局。)
属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。(仅用于 "separated borders" 模型)
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。(仅用于 "separated borders" 模型)
table-layout 设置显示单元、行和列的算法。
7.CSS框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* {
margin: 0;
padding: 0;
}
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸
1)CSS 内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS 内边距属性
属性    描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。
2) CSS的边框
元素的边框 (border) 是围绕
元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜。
CSS 边框
在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出的边框,并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜。
a)边框与背景
CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。
b)边框的样式
样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。
例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:
a:link img {border-style: outset;}定义多种样式
您可以为一个边框定义多个样式,例如:
p.aside {border-style: solid dotted dashed double;}上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线有边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
css表格样式如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
border-top-style
border-right-style
border-bottom-style
border-left-style
因此这两种方法是等价的:
p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
c)边框的宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。
注释:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。
所以,我们可以这样设置边框的宽度:
p {border-style: solid; border-width: 5px;}
其它见:www.w3school/css/css_border.asp
CSS 边框属

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。