《HTML+CSS+JS入门基础》由会员分享，可在线阅读，更多相关《HTML+CSS+JS入门基础（142页珍藏版）》请在金锄头文库上搜索。
1、目录 1 HTML CSS JavaScript先睹为快2 HTML3 CSS4 JavaScript 1 1HTML代码 未使用css JavaScript的html网页未使用css JavaScript的html网页这是一个未使用css JavaScript的html网页使用记事本即可编写HTML代码 扩展名是html或htm 使用浏览器就可以查看其效果 1 2CSS代码 使用了css的html网页h2 font size 50 p font size 20 font style italic 使用了css的html网页这是一个使用了css的html网页 1 3JavaScript代码 使
2、用了css和JavaScript的html网页h2 font size 50 p font size 20 font style italic alert 这是JavaScript起的作用 使用了css和JavaScript的html网页这是一个使用了css和JavaScript的html网页 1 4HTML CSS JavaScript的角色 HTML 超文本标记语言 是网页设计的主要语言 无论网页是否包括动画 多媒体 图形等各种复杂的元素 其基本架构都是HTML CSS 层叠样式表 是目前唯一的网页排版样式标准 弥补了HTML在网页格式化方面的不足 帮助用户对页面的布局加以更多的控制 Ja
3、vaScript用于开发Internet客户端应用程序 实现了一种实时 动态 交互的页面功能 它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代 可以在HTML语言中直接编写CSS和JavaScript代码 也可以独立编写 扩展名分别是 css和 js 2HTML 1 HTML简介2 基本标记3 列表list4 表格table5 表单form6 框架frame7 层div 2 1 1HTML概念 HTMLHyperTextMarkupLanguage超文本标识语言是一种用来制作超文本文档的简单标记语言 用HTML编写的超文本文档称为HTML文档HTML文档 htm或 html文
4、件名区分大小写浏览HTML文件的工具 浏览器例 NetscapeNavigator MicrosoftIE MazillaFireFox 2 1 2HTML文档的编写方法 手工直接编写记事本等 存成 htm html格式 要求用户必须掌握HTML使用可视化HTML编辑器Frontpage Dreamweaver等 容易产生废码 2 1 3HTML文档结构 myfirstpageThisismyfirsthomepage 这是我的第一张网页 2 1 3HTML文档结构 标记 签 是HTML语言的基本部分 比如 大多数标记总是成对出现 每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记
5、前加一个斜杠 属性 HTML标记有自己的相关属性 每一个属性还可以由我们网页编制者赋一定的值 myfirsthomepage注意 标记不区分大小写 例都可以标记中不要有空格 否则浏览器无法识别 例错误任何空格和回车在代码中无效 插入空格和回车分别用和属性的值可以用双引号引起来 也可以不引 最好引起来各属性之间无先后次序 属性也可省略 即取默认值 2 1 3HTML文档结构 head title 标记出现在文档的开头部分 与之间的内容不会在浏览器的文档窗口显示 但是其间的元素有特殊重要的意义 1 标记定义HTML文档的标题 与之间的内容将显示在浏览器窗口的标题栏 2 1 3HTML文档结构 he
6、ad meta 2 标记标记定义网页的一些相关信息 例文件的关键字 作者 网页过期时间等 这些信息不会在浏览器的文档窗口显示用来标记搜索引擎在搜索你的页面时所取出的关键词 用来标记文档的作者 用来标记你的页面的解码方式 用来自动刷新网页 2 1 3HTML文档结构 head meta 编写一个网页 要求3秒钟后自动跳转到北软教育首页 myfirstpage三秒钟后本网页将自动跳转到北软教育首页 2 1 3HTML文档结构 body 表明是HTML文档内容主体部分 在与之间 通常都会有很多其它标记 这些标记和标记属性构成HTML文档的主体部分 自身属性主要有 1 bgcolorbgcolor属性
7、标志HTML文档的背景颜色 如 bgcolor CCFFCC 2 backgroundbackground属性标志HTML文档的背景图片 可以使用的图片格式为gif jpg如 background images bg gif 3 texttext属性标志HTML文档的正文文字颜色 如 text FF6666 text定义的颜色将应用于整篇文档 2 1 3HTML文档结构 body 2 2基本HTML标记 1 标题标记2 文字标记3 段落级标记4 字符级标记5 水平标尺标记6 HTML注释6 超级链接7 图像标记8 移动的文字 2 2 1标题标记 可显示六种大小的标题 即到 为最大 为最小HTM
8、L简介HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介 2 2 2文字标记 文字属性标记1 文字颜色 RRGGBB16进制数码2 文字字体 客户端可获得的字体3 文字大小 1 2 3 4 5 6 7等 2 2 3 段落级标记 段落标记 paragraph 换行符标记预格式化标记 HTML的段落与段落之间有一定的空隔 如果不希望出现空隔而只想换行的话 就要用到另一个元素 即元素 利用标记对网页中文字段落进行预格式化 在输入过程中 按键盘上的回车键 就可以生成一个段落 即浏览器会以文本输入格式显示用三种标记分别实现登鹳雀楼的显示 2 2 4字符级标记 常用字符级标记倾斜文本
9、粗体文本下划线文本删除线文本强调文本居中显示文本空格标记 2 2 5水平线标记 水平线 设定线宽 设定线长 设定对齐方式 left right 设定线的颜色 2 2 6HTML注释 HTML文档可以插入注释 不但便于对程序排错 也使其他人更易读懂自己的代码HTML注释的格式为 源码依然存在 不会被浏览器所解释注释语句的特点是仅用于程序中某一句或一段语句的作用说明 浏览器在执行过程中将忽略掉注释语句的内容 对其视而不见 2 2 7超级链接 超级链接是用锚元素定义的在元素下 有元素属性href href的属性值为一个URL地址如 指向学院的超级链接如 普通超级链接如 普通超级链接开一个新的 浏览器
10、 窗口 TargetWindow 2 2 7超级链接 超级链接的路径绝对路径 指文件的完整路径 包括协议 主机地址等 一般用于网站的外部链接 2 2 8图像标记 的基本属性是src属性 src的属性值为所引用的图片的URL地址 src属性是必须的 src的URL可以是绝对地址 也可以是相对地址width指定宽度 height指定高度 它们的属性值可以是象素 也可以是 定义图片替代文本的方法是 替代文本有两个作用 提示 若图片下载成功 把鼠标放在图片上 会出现提示文本 替代 若图片下载不成功 在图片位置出现替代文本 图片的对齐方式 left right top middle bottom 2 2
11、 8图像标记 HTML文档中的图片GIF GraphicsInterchangeFormat 图像 GIF 支持无损压缩只支持256色JPEG JointPhotographicExpertsGroup 图像 JPG 有损压缩 但这个损失是剔除一些视觉上不易察觉的部分 通常用来保存超过256色的图片文件PNG PortableNetworkGraphics 新兴的网络图片格式 结合了gif和jpeg的优点 可以将图片文件以最小的方式压缩而不造成图片失真支持48bit的色彩 2 2 8图像标记 图像的超级链接图像的超级链接是指整个图像的超级链接 当点击图像的任何部分时 都会打开这个超级链接 定义
12、默认超级链接的方法是 图像的热区链接热区就是在图片中特意划分出一个热点区域 当点击图象的热区时 才会打开这个超级链接 需要使用map标记指定热区 2 2 9移动的文字 基本语法 文字移动属性 1 方向 direction left right up down 2 方式 behavior scroll 循环 slide 只走一次 alternate 来回走 3 循环 loop 次数 若未指定则循环不止 infinite 4 速度 scrollamount 5 延时 scrolldelay 2 3 1无序列表 无序列表由和元素定义的 sportsfooddrinkfriends无序列表的默认符号是
13、圆点 元素有type属性 通过定义不同的type属性可以改变列表的项目符号 目前 type属性的属性值有 disc 圆 circle 圆圈 square 方块 支持嵌套定义 2 3 2有序列表 有序列表由和定义 sportsdrinkfriends元素也有自己的type属性 type属性的属性值有1 A a I i等 例如 我们以A B C 作为列表的编号元素还可以定义列表的起始编号 如我们希望列表的第一个编号为5 而不是1 则需要定义元素的start属性支持嵌套定义 2 4 1表格的基本结构 定义表格定义表头定义表行 定义单元格 定义表行 定义单元格 2 4 1表格的基本结构 元素 定义一个
14、表格 每一个表格只有一对和 一张页面中可以有多个表格 元素 定义表格的行 一个表格可以有多行 所以对于一个表格来说不是唯一的 元素 定义表格的一个单元格 每行可以有不同数量的单元格 在和之间是单元格的具体内容 需要注意的是 上述的三个元素必须 而且只能够配对使用 缺少任何一个元素 都无法定义出一个表格 元素 定义表格的表头行 一个表格只能有一个表头行或者没有 所以对于一个表格来说是唯一的或没有 2 4 2表格的属性 表格的属性width属性 指定表格或某一个表格单元格的宽度 单位可以是 或者象素 height属性 指定表格或某一个表格单元格的高度 单位可以是 或者象素 border属性 表格边
15、线粗细bgcolor属性 指定表格或某一个单元格的背景颜色 background属性 指定表格或某一个单元格的背景图片 其属性值为一个URL地址align属性 指定表格或某一个单元格里的内容 文本 图片等 的对齐方式 left center right 2 4 3单元格的属性 单元格属性valign属性 指定某一个单元格里的内容 文本 图片等 的垂直对齐方式 垂直对齐方式的属性值包括 top 顶端对齐 middle 居中对齐 bottom 底端对齐 baseline 相对于基线对齐 align属性 指定某一个单元格里的内容 文本 图片等 的水平对齐方式 left center right co
16、lspan 属性值表示当前单元格跨越几列rowspan 属性值表示当前单元格跨越几行 2 4 4行的属性 行属性1 valign属性 指定某一个单元格里的内容 文本 图片等 的垂直对齐方式 垂直对齐方式的属性值包top 顶端对齐 middle 居中对齐 bottom 底端对齐 baseline 相对于基线对齐 2 align属性 指定表格或某一个单元格里的内容 文本 图片等 的水平对齐方式 left center right 3 height属性 指定表格中某一行的高度 单位可以是 或者象素 2 4 5表格的嵌套 在之间插入表格 实现表格嵌套导航列表计算机政治军事法律正文内容 2 4 5表格的作用 表格是用于在HTML页面上设计数据和图像布局的常用工具 可使用表格来组织数据 控制页面布局制作网页时 为了以一定的形式将网页中的信息组织起来 同时使网页便于阅读和页面美观 需要对页面的版式进行设计或进行页面布局 而表格能将网页分成多个任意的矩形区域 表格是网页制作中是常用的一种简单布局工具 表格的作用一般只是控制文本和图像的显示 而不显示表格的边框 2 4 6表格举例 第一季度第二季度一月二
