1 html笔记一、HTML的概述(了解)a.html是什么: hypertext markup language 超文本标记语言超文本:音频,视频,图片称为超文本。
.标记:<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
b.作用:编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程),而是一个标记语言(没有编译过程).HTML页面直接由浏览器解析执行。
二、HTML的历史(了解)三、HTML的网络术语(明白)* 网页:由各种标记组成的一个页面就叫网页 .* 主页(首页) : 一个网站的起始页面或者导航页面 .* 标记:<p>称为开始标记 </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
* 元素:<p>内容</p> 称为元素.* 属性:给每一个标签所做的辅助信息。
* 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)声明部分。
主要作用是用来告诉浏览器这个页面使用的是那个标准。
<!doctype html>是HTML5标准。
2)head部分:不会显示在页面上。
作用是告诉浏览器一些页面的额外信息。
3)body部分:我们缩写的代码必须放在此标签內。
六、HTML的各种标签(掌握)明确:每个标签都有私有属性。
也都有公有属性。
html中表示长度的单位都是像素。
HTML只有一种单位就是像素。
body:bgcolor: 背景颜色background:背景图片text: 文本颜色1.排版标签所有的浏览器默认情况下都会忽略空格和空行P:p代表一个段落属性: align:对齐方式. 取值:left,right,center<br>代表是换行。
hr:color: 线的颜色size : 线的粗细width: 线的长短两种写法: 1) 绝对值 eg: 5002) 相对值: 50%noshade: 不要阴影align: 对齐方式取值: left,right,centercenter: 内容居中pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行div: 块级标签必须单独占据一行属性: align :span: 块级标签不换行字体标记2 字体标签h1...h6:定义字体大小属性: align :居中font:color:字体颜色颜色的写法有3种: 1)英文单词: red2)十六进制:#00ffcc3)RGB(三原色) : new RGB(124,156,23)size:字体大小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.jpg2) : 网络路径eg: /imageswidth: 宽度height:高度Alt:当图片显示不出来的时候代替图片显示的内容title:提示性文本border: 边框热点:就是特定的位置添加超链。
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" /><map name="Map" id="Map"><area shape="circle"coords="122,81,38" href="demo_字体标签.html" /></map>4.清单标记列表标签:3种a.无序列表ul属性:type : 值: disc(默认,实心原点),square(实心方点),circle(空心圆)b.有序列表(OL)属性: type:取值:1(阿拉伯数字,默认),a,A,i,Istart: 从几开始c.定义列表(dl)dt: 列表项的标题dd: 列表项5.超链接3种超链接:1. 连接到其他页面2. 锚: 指给超链接起一个名字,作用是连接到本页面或者其他页面的特定位置。
使用name属性给超链起名字3. 连接到邮件: <a href = "mailto:xugang@">进入我的邮箱</a>属性:target: 告诉浏览器怎么显示目标页面HTML中已定义4个值: _self :在同一个浏览器中显示_blank: 打开新的浏览器显示_parent: 在父窗口中显示_top: 在顶级窗口中显示6.表格标记table: 表格属性:border:边框width:宽度height:高度align:表格的对齐方式cellpadding:单元格内容到边的距离cellspacing:单元格和单元格之间的距离bgcolor:背景颜色background:背景图片bordercolorlight:表格的上,左边框,以及单元格的右,下边框的颜色bordercolordark: 表格的右,下边框,以及单元格上,左的边框的颜色dir:单元格内容的排列方式取值:ltr 从左到右, rtl:从右到左tr: 行属性:dir:bgcolor:td: 单元格属性: align: 内容的横向对齐方式valign: 内容的纵向对齐方式 top,middle,bottomwidth: 绝对值或者相对值(%)height:单元格的高度单元格的合并:单元格的属性:colspan: 横向合并rowspan: 纵向合并th: 相当于<td> + <b>属性同<td>caption: 表格的标题属性:align: 取值:left,center,right,top,bottomtheadtbodytfoot写与不写的区别:1. 当表格非常大的时候,如果不写,则必须等表格的内容全部下载完成才能显示。
但是用tbody标签的话,那么边下载边显示。
2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。
如果写了,那么顺序任意,浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容7.框架标记及<iframe>框架页面上不允许有body标签frameset: 框架的集合rows: 纵向分部框架.cols: 横向分部框架.写法有两种: 1) 绝对值 "200,*" ,*代表剩余的2) 相对值 "30%,*"frame: 框架. 一个框架显示一个页面scrolling: 是否需要滚动条。
默认是truenoresize : 固定框架大小bordercolor: 给框架边框起一个颜色name : 给框架起一个名字内嵌框架:嵌入在一个页面上的框架.(仅仅IE支持)iframe:属性: width: 宽度height:高度scrolling : 是否需要滚动条8.表单标记及语义化9.多媒体标记bgsound: 背景音乐embed: 播放多媒体文件.marquee: 移动属性:direction 移动目标方向 left,right ,up,down ,up,down移动距离是固定的200pxbehavior: 行为方式取值:slide,alternate,scrollscrollamount : 移动速度loop: 循环多少圈。
负值表示无限循环scrolldelay: 移动一次休息多长时间。
单位是毫秒10.头标记css笔记一、CSS 概述(了解)*.CSS : Cascading Style Sheet 层叠样式表*.CSS 作用就是给HTML页面标签添加各种样式*.为什么用CSSHTML的缺陷: 1. 不能够适应多种设备2. 要求浏览器必须智能化足够庞大3. 数据和显示没有分开4. 功能不够强大CSS 优点:1.使数据和显示分开2.降低网络流量3.使整个网站视觉效果一致4.使开发效率提高了二、CSS语法p{color:red;}选择器{属性名:属性值 ;}选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式CSS代码理论上位置是任意的,但通常写在style标签里CSS和HTML的结合方式有3种:a. 行级样式表:采用style属性,范围只针对此标签适用<div style = "border:1px solid red ;">大家好</div>b. 内嵌样式表:采用<style>标签完成。
范围针对此页面c. 外部样式表: 采用建立样式表文件。
针对多个页面.引入样式表文件的方式:1):采用<link>标签eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>2):采用import,必须写在<style>标签中,并且必须是第一句eg: @import url(a.css) ;两种引入方式的区别:外部样式表中不能写<link>标签,但是可以写import语句四、CSS选择器选择器分为两大类:1.基本选择器a.标签选择器:指的就是选择器的名字代表html页面上的标签p{color:red ;border:1px dashed green;}b.类选择器:规定用圆点.来定义优点:灵活eg: .one{background-color:#ff0099; }c. ID选择器:规定用#来定义eg: #one{cursor:hand; }区别:标签选择器针对的是页面上的一类标签.类选择器可以供多种标签使用.ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。