嵌入式培训机构四个月实训课程笔记（完整版）-Linux ARM平台编程第七天-html、js、cgi（物联技术666）

链接：https://pan.baidu.com/s/1E4x2TX_9SYhxM9sWfnehMg?pwd=1688
提取码：1688

上午：html的编写

下午：JavaScript编程基础和cgi的应用

教学内容：

一、 html 的编写

头部标签 :

1、style标签用于为 HTML 文档定义样式信息。在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的，定义 style 元素的内容。唯一可能的值是 "text/css"

h1 {color:red}

p {color:blue}

#bj1{width:1366px;height:102px;background:red;}

</style>

2、base标签，改变默认的base

<head>

</head>

<body>

</body>

当点击第一页的时候，href的地址是"http://www.baidu.com/1.html"

3、

身体标签：

1、<html></html>网页

2、<head> 头

</head>

3、<body></body>身

4、<h1>...<h6>6级标题

5、<p>段落

6、<hr />画条横线

7、<br />换行

8、<pre></pre>保留空格和换行符的元素

9、<ul>无序列表标签

<li>fsdfs</li>

<li>ggggg</li>

</ul>

10、<ol type="A" start="3">有序列表标签，以C开始编号

<li>fsdfs</li>

<li>ggggg</li>

</ol>

11、<dl>自定义列表

</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处

14、<img/>图片标签

src:资源 alt读取图片失败的时候显示的内容 tital：移动在图片上的名字

15、<img src="china.jpg" usemap="#map1"> 图片映射

<area shape="rect" coords="33,36,195,189" href="01.html"> 热区

</map>

16、<sup></sup>上标

<sub></sub>下标

17、<div> web布局

</div>

18、<object> 元素可支持多种不同的媒介类型

19、引入样式文件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>

h1{text-decoration:underline;text-align:center}

p {color:red;text-indent:30px;line-height:50px;} //全局

</style>

</head>

<body>

<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为行内

*{color:green;} 通用

h1{color:red;} 标签

.sh{color:pink;} 类

#show1{color:gold;} ID

</style>

//**********************************************

背景显示

<html>

<head>

#headpic{width:100%;height:100%;background-image:url("./image/test.jpg");}

#pic2{width:100px;height:100px;background-color:blue;}

</style>

</head>

<body>

</body>

</html>

//*********************************************