嵌入式培训机构四个月实训课程笔记(完整版)-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"

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

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

相关推荐
Y4090011 分钟前
C语言转Java语言,相同与相异之处
java·c语言·开发语言·笔记
YuTaoShao2 分钟前
【LeetCode 热题 100】994. 腐烂的橘子——BFS
java·linux·算法·leetcode·宽度优先
笑衬人心。3 分钟前
TCP 拥塞控制算法 —— 慢启动(Slow Start)笔记
笔记·tcp/ip·php
DanB244 分钟前
html复习
javascript·microsoft·html
退役小学生呀5 分钟前
十五、K8s可观测能力:日志收集
linux·云原生·容器·kubernetes·k8s
van叶~6 分钟前
Linux探秘坊-------15.线程概念与控制
linux·运维·服务器
花海如潮淹16 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
Andy杨1 小时前
20250718-5-Kubernetes 调度-Pod对象:重启策略+健康检查_笔记
笔记·容器·kubernetes
Andy杨2 小时前
20250718-1-Kubernetes 应用程序生命周期管理-应用部署、升级、弹性_笔记
linux·docker·容器
写写闲篇儿6 小时前
Python+MongoDB高效开发组合
linux·python·mongodb