链接:https://pan.baidu.com/s/1E4x2TX_9SYhxM9sWfnehMg?pwd=1688
提取码:1688
上午:html的编写
下午:JavaScript编程基础和cgi的应用
教学内容:
一、html的编写
头部标签:
1、style标签用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"
<style type="text/css">
h1 {color:red}
p {color:blue}
#bj1{width:1366px;height:102px;background:red;}
</style>
2、base标签,改变默认的base
<head>
<base href="http://www.baidu.com/">
</head>
<body>
<a href="1.html">第一页</a>
</body>
当点击第一页的时候,href的地址是"http://www.baidu.com/1.html"
3、
身体标签:
1、<html></html>网页
2、<head> 头
<title>新网页</title>
</head>
3、<body></body>身
4、<h1>...<h6>6级标题
5、<p>段落
6、<hr />画条横线
7、<br />换行
8、<pre></pre>保留空格和换行符的元素
9、<ul>无序列表标签
<li>fsdfs</li>
<li>gddd</li>
<li>ggggg</li>
</ul>
10、<ol type="A" start="3">有序列表标签,以C开始编号
<li>fsdfs</li>
<li>gddd</li>
<li>ggggg</li>
</ol>
11、<dl>自定义列表
<dt>河北</dt>
<dd>石家庄</dd>
<dd>保定</dd>
<dt>辽宁</dt>
<dd>沈阳</dd>
<dd>葫芦岛</dd>
</dl>
12、<a href="http://www.sina.com.cn" target="_blank" name="sina"> 超链接
a表示是基于<a>标签基础上,href指定链接地址,name链接名字,
target指定链接的目标窗口(_self,_blank)
13、<a href="#tt">返回顶部</a> 锚点链接,跳掉a标签名为tt处
<a name="tt"></a>
14、<img/>图片标签
<img src="" alt="" title=""/>
src:资源 alt读取图片失败的时候显示的内容 tital:移动在图片上的名字
15、<img src="china.jpg" usemap="#map1"> 图片映射
<map name="map1">
<area shape="rect" coords="33,36,195,189" href="01.html"> 热区
</map>
16、<sup></sup>上标
<sub></sub>下标
17、<div> web布局
<div id="bj1"></div>
<div id="bj2"></div>
<div id="bj3"></div>
</div>
18、<object> 元素可支持多种不同的媒介类型
19、引入样式文件css
<link href="./css/07.css" rel="stylesheet" type="text/css">
20、伪类选择器(作用在超链接上)
四种状态:未访问[:link] 访问过[:visited] 滑过[:hover] 鼠标点下[:active]
<style>
a:link{color:red;}
a:visited{color:green;}
a:hover{color:blue;}
a:active{color:yellow;}
</style>
//*************************************************
字体属性
<html>
<head>
<style type="text/css">
h1{text-decoration:underline;text-align:center}
p {color:red;text-indent:30px;line-height:50px;} //全局
</style>
</head>
<body>
<h1>第一标题</h1>
<p style="color:green;">发的萨芬撒 范德萨范德萨范德萨范德萨飞洒</p> //局部
<p style="color:green;">发的萨芬撒 范德萨范德萨范德萨范德萨飞洒</p>
<p style="color:blue;">发的萨芬撒 范德萨范德萨范德萨范德萨飞洒</p>
<p>发的萨芬撒 范德萨范德萨范德萨范德萨飞洒</p>
</body>
</html>
优先级:
行内样式>id选择器>内选择器>标签选择器>通用选择器
行内:<h1 id="show1" class="sh" style="color:gray">指定style为行内
<style type="text/css">
*{color:green;} 通用
h1{color:red;} 标签
.sh{color:pink;} 类
#show1{color:gold;} ID
</style>
//**********************************************
背景显示
<html>
<head>
<style type="text/css">
#headpic{width:100%;height:100%;background-image:url("./image/test.jpg");}
#pic2{width:100px;height:100px;background-color:blue;}
</style>
</head>
<body>
<div id="headpic"></div>
<div id="pic2"></div>
</body>
</html>
//*********************************************