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

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

相关推荐
wuxuanok6 分钟前
Web前端开发-HTML、CSS
前端·css·html
独立开阀者_FwtCoder15 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
Maki Winster16 分钟前
在 Ubuntu 下配置 oh-my-posh —— 普通用户 + root 各自使用独立主题(共享可执行)
linux·运维·ubuntu
守望时空3318 分钟前
Linux下KDE桌面创建自定义右键菜单
linux
Hilaku23 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
星语卿23 分钟前
Js事件循环
javascript
datagear24 分钟前
如何在DataGear 5.4.1 中快速制作HTTP数据源服务端分页的数据表格看板
javascript·数据可视化
namehu32 分钟前
“什么?视频又双叒叕不能播了!”—— 移动端视频兼容性填坑指南
javascript·html
多啦C梦a34 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript
shawn_yang36 分钟前
使用 vite 开发原生 html 网页
html