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

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

相关推荐
Codigger官方6 分钟前
Linux 基金会牵头成立 React 基金会:前端开源生态迎来里程碑式变革
linux·前端·react.js
武文斌778 分钟前
项目学习总结:LVGL图形参数动态变化、开发板的GDB调试、sqlite3移植、MQTT协议、心跳包
linux·开发语言·网络·arm开发·数据库·嵌入式硬件·学习
爱吃喵的鲤鱼11 分钟前
仿mudou——Connection模块(连接管理)
linux·运维·服务器·开发语言·网络·c++
让子弹飞0220 分钟前
永久解决ubuntu网络连接问题
linux·运维·ubuntu
angleoldhen43 分钟前
网页版的点名/抽奖程序
html·抽奖·点名
郝学胜-神的一滴43 分钟前
使用Linux的read和write系统函数操作文件
linux·服务器·开发语言·数据库·c++·程序人生·软件工程
GilgameshJSS1 小时前
STM32H743-ARM例程15-RTC
c语言·arm开发·stm32·实时音视频
技术钱1 小时前
react+andDesign+vite+ts从零搭建后台管理系统(三)-Layout布局
javascript·react.js·ecmascript
Never_Satisfied2 小时前
在JavaScript / HTML中,调整div的边框
html·边框
七七七七072 小时前
【Linux 系统】打开文件和文件系统
linux·运维·spring