HTML+CSS

ゞ浴缸里的玫瑰 2022-06-14 05:19 123阅读 0赞

## （一） HTML ##

一、HTML的概述（了解）

a.html是什么 ： hypertext markup language 超文本标记语言
 超文本：音频，视频，图片称为超文本。
 标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
 b.作用：编写HTML页面。
 c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
 HTML页面直接由浏览器解析执行。

二、HTML的历史（了解）

三、HTML的网络术语（明白）

* 网页 ：由各种标记组成的一个页面就叫网页 .
 * 主页(首页) : 一个网站的起始页面或者导航页面 .
 * 标记:称为开始标记 称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
 * 元素：内容 称为元素.
 * 属性： 给每一个标签所做的辅助信息。
 * xhtml： 符合XML语法标准的HTML。
 * dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
 * http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.

四、HTML的编辑工具（了解）  
\*.notepad 记事本  
\*.editplus : 语法高亮显示  
技巧： 根据颜色判断单词是否出错。 （不是100%）  
\*.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.  
\*.dw(dreamweaver,专业工具) 代码提示.

五、HTML的规范(知道)  
\*.HTML是一个弱势语言  
\*.html 不区分大小写  
\*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)  
\*.html 的结构  
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。  
2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。  
3)body部分：我们所写的代码必须放在此标签內。

六、HTML的各种标签(掌握)  
明确：每个标签都有私有属性。也都有公有属性。  
html中表示长度的单位都是像素（px）。HTML只有一种单位就是像素。  
body:  
bgcolor: 背景颜色  
background:背景图片  
text: 文本颜色

1.排版标签  
所有的浏览器默认情况下都会忽略空格和空行  
P：p代表一个段落  
属性： align:对齐方式. 取值：left,right,center  
  
代表是换行。  
hr:（单独占据一行）  
color: 线的颜色  
size : 线的粗细  
width: 线的长短  
两种写法： 1) 绝对值 eg: 500  
2) 相对值： 50%  
noshade: 不要阴影  
align: 对齐方式 取值： left,right,center

center: 内容居中（html5已被废除）
        pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行
        div: 块级标签（把标签中的内容作为一个块来对待）  必须单独占据一行
               属性： align :
        span: 块级标签 不换行字体标记

2 字体标签 
h1…h6:定义字体大小 
属性： align :居中 
font: 
color:字体颜色 
颜色的写法有3种： 1)英文单词: red 
2)十六进制：\#00ffcc 
3)RGB(三原色) : new RGB(124,156,23) 
size:字体大小（从1到7） 
face：字体类型 
特殊字符： <小于 >大于 & &符号 " 双引号'单引号 
© 版权 ™商标  空格 
扩展：绐 
b: 加粗 
strong: 加粗 
i:斜体 
em: 斜体 
u: 下划线 
s: 中划线(删除线) 
sup: 上标 
sub: 下标. 
3.图像标记 
img: 代表是一副图片 
属性： src : 图片的路径 
两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径 
b) ：绝对路径 
1) : 以盘符开始的路径 
eg: C:\\Documents and Settings\\Administrator\\桌面\\day01\_html\\上课示例/images/1.jpg 
2) : 网络路径 
eg: [http://www.baidu.com/images][http_www.baidu.com_images] 
width: 宽度 
height：高度 
Alt：当图片显示不出来的时候代替图片显示的内容 
title： 提示性文本(公有属性) 
border: 边框 
热点： 就是特定的位置添加超链。（对图片的局部区域加超链） 
![Image 1][] 
 
 
 
4.清单标记 
列表标签：3种 
a.无序列表ul 
属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆) 
b.有序列表(OL) 
属性: type:取值：1(阿拉伯数字，默认),a,A,i,I 
start: 从几开始 
c.定义列表(dl)（） 
dt: 列表项的标题 
dd: 列表项 
5.超链接 
3种超链接: 
1. 外部链接：连接到其他页面 
2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字 
3. 连接到邮件: [进入我的邮箱][Link 1] 
属性：target: 告诉浏览器怎么显示目标页面 
HTML中已定义4个值： \_self :在同一个浏览器中显示（默认） 
\_blank: 打开新的浏览器显示 
\_parent: 在父窗口中显示 
\_top: 在顶级窗口中显示 
6.表格标记 
table: 表格 
属性：border:边框 
width:宽度 
height：高度 
align:表格的对齐方式 
cellpadding:单元格内容到边的距离 
cellspacing:单元格和单元格之间的距离 
bgcolor:背景颜色 
background:背景图片（优先级大于背景颜色） 
bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色 
bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色 
dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左（公有属性 direction） 
tr: 行 
属性：dir: 
bgcolor: 
td: 单元格 
属性： align: 内容的横向对齐方式 
valign: 内容的纵向对齐方式 top,middle,bottom 
width: 绝对值或者相对值(%) 
height:单元格的高度 
bgcolor: 
background: 
单元格的合并： 
单元格的属性： 
colspan: 横向合并 
rowspan: 纵向合并 
th: 相当于 + 
**属性同** 
caption: 表格的标题 
属性：align: 取值：left,center,right,top,bottom 
thead 
tbody 
tfoot 
写与不写的区别： 
1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。 
2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容 
7.框架标记及> &\#10; &\#26694;&\#26550;&\#39029;&\#38754;&\#19978;&\#19981;&\#20801;&\#35768;&\#26377;body&\#26631;&\#31614; &\#10; frameset: &\#26694;&\#26550;&\#30340;&\#38598;&\#21512; &\#10; rows: &\#32437;&\#21521;&\#20998;&\#37096;&\#26694;&\#26550;. &\#10; cols: &\#27178;&\#21521;&\#20998;&\#37096;&\#26694;&\#26550;. &\#10; &\#20889;&\#27861;&\#26377;&\#20004;&\#31181;: 1) &\#32477;&\#23545;&\#20540; &\#8220;200,&\#8221; ,&\#20195;&\#34920;&\#21097;&\#20313;&\#30340; &\#10; 2) &\#30456;&\#23545;&\#20540; &\#8220;30%,\*&\#8221; &\#10; frame: &\#26694;&\#26550;. &\#19968;&\#20010;&\#26694;&\#26550;&\#26174;&\#31034;&\#19968;&\#20010;&\#39029;&\#38754; &\#10; scrolling: &\#26159;&\#21542;&\#38656;&\#35201;&\#28378;&\#21160;&\#26465;&\#12290;&\#40664;&\#35748;&\#26159;true &\#10; noresize : &\#22266;&\#23450;&\#26694;&\#26550;&\#22823;&\#23567; &\#10; bordercolor: &\#32473;&\#26694;&\#26550;&\#36793;&\#26694;&\#36215;&\#19968;&\#20010;&\#39068;&\#33394; &\#10; name : &\#32473;&\#26694;&\#26550;&\#36215;&\#19968;&\#20010;&\#21517;&\#23383; &\#10; &\#20869;&\#23884;&\#26694;&\#26550;&\#65306; &\#23884;&\#20837;&\#22312;&\#19968;&\#20010;&\#39029;&\#38754;&\#19978;&\#30340;&\#26694;&\#26550;.(&\#20165;&\#20165;IE&\#25903;&\#25345;) &\#10; iframe: &\#10; &\#23646;&\#24615;&\#65306; width: &\#23485;&\#24230; &\#10; height&\#65306; &\#39640;&\#24230; &\#10; scrolling : &\#26159;&\#21542;&\#38656;&\#35201;&\#28378;&\#21160;&\#26465; &\#10;8.&\#34920;&\#21333;&\#26631;&\#35760;&\#21450;&\#35821;&\#20041;&\#21270;

9.多媒体标记  
bgsound: 背景音乐  
embed: 播放多媒体文件.  
marquee: 移动  
属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px  
behavior: 行为方式 取值：slide,alternate,scroll  
scrollamount : 移动速度  
loop: 循环多少圈。负值表示无限循环  
scrolldelay: 移动一次休息多长时间。单位是毫秒  
10.头标记

## （二） CSS ##

一、CSS 概述(了解)  
\*.CSS ： Cascading Style Sheet 层叠样式表  
\*.CSS 作用就是给HTML页面标签添加各种样式  
\*.为什么用CSS  
HTML的缺陷： 1. 不能够适应多种设备  
2. 要求浏览器必须智能化足够庞大  
3. 数据和显示没有分开  
4. 功能不够强大  
CSS 优点：  
1.使数据和显示分开  
2.降低网络流量  
3.使整个网站视觉效果一致  
4.使开发效率提高了  
二、CSS语法  
p\{color：red;\}

选择器{属性名：属性值 ;}
           选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
           属性名和冒号之间最好不要有空格。

三、CSS和HTML的结合方式  
CSS代码理论上位置是任意的，但通常写在style标签里  
CSS和HTML的结合方式有3种：  
a. 行级样式表:采用style属性,范围只针对此标签适用

大家好

b. 内嵌样式表:采用

[http_www.baidu.com_images]: http://www.baidu.com/images
[Image 1]: 
[Link 1]: mailto:xugang@itcast.cn