2023年韩顺平html笔记.docx
1、HTML 一、 HTML有关知识点 1. html介绍 html是一种标记语言，重要的用途是开发网页，使用html可以展现文字、图片、视频、声音，html是我们web开发（网站开发）。 2. html可以做什么 Ø html可以编写静态网页 Ø 该静态网页可以涉及文字、图像、动画、声音、表格、链接。从而构成一个个美丽的网页 3. Html发展历史 1993标记语言第一版 1995html2.0 1996html3.2w3c推荐标准 2023xhml1. 1w3c推荐标准 2023xhtml1.0w3c推荐标准 1999html4.0.1w3c推荐标准 2
2、023html5 4. Html的基本结构
3、 本窗口
l _parent 父窗口
l _top 整个浏览器窗口
Ø html图像元素
Ø html表格
| --用于说一小格 |
4、
5、o”name=””> 复选框： checked是指默认选中的 隐藏域： 图片按钮：
7、en-blue,RGB)值来表达
Ø 标尺线：Ø Ø Ø 文字布局标记 l ：表达一段 #= left /center/right Ø 图像：
9、TML网页设计语言中的表格定位方式的区别，由于XHTML网站设计的标准中，不再使用表格定位，而是采用DIV+CSS的方式定位。 我们可以这样简朴的这样理解div+css: div是用于存放内容(文字，图片，元素)的容器。 css是用于指定放在div中的内容的样式（大小，颜色，背景，位置）。 4. div+css的好处是： l 内容和样式分离 l 代码可以反复运用。 5. 从上面使用的span元素，可以看出css的基本格式： <元素名 style=”属性名：属性值 ；属
10、性名2：属性值”> 元素可以是任意元素：属性名和属性值可以参考W3Cschool给出的文档 6. 使用CSS的基本语法： Ø 使用内部css: 引用内部css: <元素 class=”style”> 注意：没有. Ø 使用外部css:
11、sheet”> 7. 使用滤镜： 8. 四种选择器的用法： (1) 类选择器，又叫做class选择器：
12、>
13、eight:bold; color:#FF0000; } 类选择器的基本格式： .类选择器名{ 属性名：属性值; ``` } (2) id选择器：\ 基本语法格式： #id选择器名称：{ 属性名：属性值; ```` } 例如： #tyle2{ font-size:30px; ackground-color:green; } 在html文献中使用id选择器的格式是： <元素名 id=””> (3) html选择器： html选择器的语法格式： html元素名称{ 属性名：属性值; ``` } (4
14、) 通配符选择器： *{ 属性名：属性值； ··· } 例如： *{ margin:0; padding:0; } 外边距：margin：上 右 下 左；//是按顺时针旋转的 margin：10px 20px 30px 是代表上下外边距是10px,右外边距是20px,左 边距是30px 可以让所有的html元素的外边距和内边距都默认为0 注意：当一个元素被id选择器，类选择器，html选择器修饰的时候，则优先级是： id选择器>class选择器>html选择器 9. 选择器进一步探讨：(四种选择器可以组合使用) (1) 父
15、子选择器 例如： #style span{ 属性名：属性值; } 注意：子选择器标签必须是html可以辨认的标记 可以有多层子选择器 例如： #style span span{ 属性名：属性值; ``` } (2) 一个标签既可以用class选择器，也可以用id选择器；但是id的选择器的优先级高于class选择器 (3) 一个元素最多有一个id选择器，可以拥有多个class选择器 10. 块元素和行内元素的概念： (1) 行内元素，又叫做内联元素： 内联元素只能容纳文本或者内联元素，常见的内联元
16、素有
(2) 块元素(block element):
块元素一般都从新行开始，可以容纳文本，其他内联元素和其他块元素，即使内容不能占满遗憾，块元素也要把整行占满。常见的块元素有
注意：块元素转换为行内元素：style=”display:inline”
行内元素转换为块内元素：style=”diplay:block”
11. 标准流/非标准流：
(1) 流：在网页设计中指的是元素(标签)的排列方式
(2) 标准流：元素在网页中就像流水，排在前面的元素，内容前面出现；排在后面的元素，内容就后面出现。
(3) 非标准流：当某个元素 17、标签)脱离了标准流的【比如由于相对定位】排列，我们统称为非标准流排列。
12. 盒子模型：
13. 浮动：
浮动是css中很重要的概念，必须掌握。浮动分为左浮动，右浮动，清除浮动。
.style{
background-color:#CC0066;
width:150px;
height:100px;
border:1px;
border-color:green;
border-style:solid;
float:left; //设立为左浮动
}
清除浮动：假如不希望别的元素在某个元素的左边或者是右边，可以使用清除浮动的方法：clea 18、r:left; clear:left; clear:both;
14. 定位——基本概念：
css定位(Positioning)属性允许你对元素进行定位。position属性值：
(1) static(默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分。行内元素则会创建一个或多个行框，置于其父元素中。
(2) relative(相对定位)：元素偏离某个距离。元素仍保持其未定位的形状，它本来所占的空间仍然保存，从这一角度，仿佛该元素仍然在文档流/标准流中同样
19、 Transitional//EN" "">
20、s="style">div3 21、)：元素框从文档流完全删除，并相对于其包含块定位。包含块也许是文档中的另一个元素或者是初始包含块。元素原先在正常文档流所占的空间会关闭，就仿佛原理不存在同样。元素定位后生成一个块级框，而不管本来它在正常流中生成何种类型的框。
22、/head>
23、er:1px;
border-color:green;
border-style:solid;
float:left;
}
#special{
position:relative;
top:140px;
left:50px;
}
运营效果图：
(4) fixed：元素框的表现类似于将position设立成为absolute，但是其包含块是视图自身。
JavaScript
1. javascript基本介绍：
(1) javascript是实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个 24、领域：
网页游戏
地图搜索
股市信息查询
web聊天
····
(2) 在web开发中，js是必不可少的技术，同时js也是ajax/jquery/extjs等框架的基础。
(3) javascript是一种广泛用于客户端WEB开发的脚本语言，常用来给HTML网页添加动态的功能，比如响应用户的各种操作。
2. 脚本语言：
(1) 脚本语言往往不能独立使用(单独使用没有什么意义)，它一般与html/asp/jsp/php
(2) 脚本语言有自己的变量，函数，控制语句。
(3) 脚本语言是一种解释性语言。
3. JS一般在客户端的浏览器执行。但也可以对服务器进行编 25、程(非常少)
4. JavaScript简介
JavaScript是一种解释型的语言。Javascript并不是java的一种java脚本语言，除了名字都带有java这个此外，两者并没有任何关系。
Javascript的第一个版本出现在Netscape Navigator2浏览器中。人们最初给javascript起的名字是LiveScript。然而由于，当时java技术的正是如日中天，netscape公司给livescript改名为javascript，以便是人们更加注意javascript。随着javascript的发展，微软公司决定在IE浏览器中加入微软的品牌的javascript， ©2010-2026 宁波自信网络信息技术有限公司 版权所有 客服电话：0574-28810668 投诉电话：18658249818 关注我们 ：
浙ICP备2021020529号-1 | 浙B2-20240490 
