Web标准构成,结构HTML 表现CSS 行为Javascript

HTML

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

lang=”en”英文,”zh-CN”中文

字符集编码 常用UTF-8

       img

1.常用标签 最基本

head 头部标题 title 文档标题

h1 h2 h3 …. h6    标题标签

p    段落标签


    水平线标签(单标签)


    换行标签(单标签)

div    布局 一行只能放一个

div    布局 一行能放好多个

2.文本标签

strong/b    加粗(strong还有加强语气的意思)

em/i    斜体

del/s    加删除线

ins/u    加下划线

sup    把文字变成上标

pre    预格式化文本

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
在家因为调皮被妈妈<strong>揍了一顿</strong>,当我逃出家之后,在外面碰到了一个<em>老头</em>,那老头看了我一眼说到:“哎,现在的孩子才<b>多大</b>啊就纹身!” 我一听<del>就恼了</del>:“大爷,您看清楚,这是<ins>拖鞋印子</ins>……
</body>
</html>

3.标签属性

img

4.图像标签img

<img src=”图像路径” 各种属性>

width 宽度    height 高度    border 边框    title 鼠标划上去的提示文字    alt 图像加载失败后的提示文字

1
<img src="1.jpg" width="100px" height="100px" border="10"	title="看我看我" alt="你瞅啥">

图像的绝对路径和相对路径

https://blog.csdn.net/qq_36434637/article/details/97000469

!!!

    • 图像自动的进行等比例的放大或缩小
    • 宽度高度同时设置时,容易造成图像变形

5.链接标签

    • 外部链接    百度一下
    • 内部链接    111

————————<target=”_blank”>    新页面打开链接

————————    所有链接都是新页面打开

6.注释标签

       快捷键 ctrl+?

7.瞄点定位

目的地<id=”123”>

8.特殊字符

https://www.cnblogs.com/mengmengi/p/10137167.html

img

img

img

9.表格、表单标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<form action="http://www.youketang.net.cn/login?goto=/">
<table border="1px" cellspacing="0">
<tr align="center" width="600px" height="40px">
<td rowspan="4">总体信息</td>
<td colspan="2"></td>
</tr>
<tr width="600px" height="40px">
<td align="right">用户名:</td>
<td>
<input type="text" name="loginname">
</td>
</tr>
<tr width="600px" height="40px">
<td align="right">密码:</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr align="center" width="600px" height="40px">
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>

table    起头

tr    行

td    列

th    th=加粗并水平居中的td

colspan    横向合并单元格

rowspan    竖向合并单元格

img

border=”1px”    边框

cellspacing=”0”    清除空白间隙

align=”center”    居中

input type=”text”    文本输入框

password    密码框

button    按钮        value    将文字放在按钮中

checkbox     复选框

submit    提交

reset    重置

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
</head>

<body>
<form action="https://www.baidu.com" method="GET">
<p>
<input type="text" name="login">
</p>
<p>
<input type="password" name="pass">
</p>
<p>
<input type="submit">
</p>
</form>
</body>

</html>

method=”GET” 提交的数据可以显示

method=”POST”提交的数据不可以显示

img

HTML

清除浮动

clear:both; —>页面布局

HTML5 语义元素

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

什么是响应式 Web 设计?(Bootstrap)

  • RWD 指的是响应式 Web 设计(Responsive Web Design)
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

框架结构标签()

  • 框架结构标签()定义如何将窗口分割为框架
  • 每个 frameset 定义了一系列行
  • rows/columns 的值规定了每行或每列占据屏幕的面积
  • !!!不能将 标签与 标签同时使用!

页面内跳转

id=”123” a href=”#123”可跳至123所在位置

网页中网页

iframe 用于在网页内显示网页,但是不常用,一般是一些特殊要求或迫不得已的时候采用,用户体验不好,属于很早之前的技术了。(看到这,我也就没怎么往下看)

HTML 中有用的字符实体

注释:实体名称对大小写敏感!

基本实体符号

如需完整的实体符号参考,请访问 HTML 实体符号参考手册

什么是 XHTML?

  • XHTML 指的是可扩展超文本标记语言
  • XHTML 与 HTML 4.01 几乎是相同的
  • !!!!!XHTML 是更严格更纯净的 HTML 版本
  • XHTML 是以 XML 应用的方式定义的 HTML
  • XHTML 是 2001 年 1 月发布的 W3C 推荐标准
  • XHTML 得到所有主流浏览器的支持

表单

服务器接收到的用户输入为:firstname=Mickey&lastname=Mouse

如果要正确地被提交,每个输入字段必须设置一个 name 属性,没有name属性的不会被提交。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

当您使用 GET 时,表单数据在页面地址栏中是可见的。

!!!!!GET 最适合少量数据的提交。浏览器会设定容量限制。

如果表单正在更新数据,或者包含敏感信息(例如密码)。

POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

<fieldset> 组合表单数据

<fieldset>元素组合表单中的相关数据

<legend>元素为 <fieldset> 元素定义标题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="">

<fieldset>

<legend>组合表单标题</legend>

<input type="text" name="firstname" value="Mickey">

<input type="text" name="lastname" value="Mouse">

<input type="submit" value="Submit">

</fieldset>

</form>

!!!组合表单提交到服务器的内容与表单一样

<select> 元素(下拉列表)

<select>元素定义下拉列表:

1
2
3
4
5
6
7
8
9
10
11
<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected>Fiat</option>

<option value="audi">Audi</option>

</select>

<option>元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

可通过添加 selected 属性来定义预定义选项。

<textarea> 元素(多行字段)

定义多行输入字段(文本域):

1
2
3
4
5
<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

<datalist> 元素(预定义选项列表)

<datalist>元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list属性必须引用 <datalist> 元素的 id 属性。

通过 <datalist> 设置预定义值的 <input> 元素:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form action="action_page.php">

<input list="browsers" name="browser">

<datalist id="browsers">

  <option value="Internet Explorer">

  <option value="Firefox">

  <option value="Chrome">

  <option value="Opera">

  <option value="Safari">

</datalist>

</form>

<input>输入类型

radio单选框

cheakbox复选框

HTML5 增加了多个新的输入类型:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

  • 输入类型

<input>输入属性

value 属性规定输入字段的初始值

readonly 属性规定输入字段为只读(不能修改)

disabled 属性规定输入字段是禁用的

size 属性规定输入字段的尺寸(以字符计)(size=”40”)

maxlength 属性规定输入字段允许的最大长度

HTML5 为 <input> 增加了如下属性:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height 和 width
  • list
  • min 和 max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

并为 增加如需属性:

  • autocomplete
  • novalidate

HTML5新增属性

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div style="margin: auto;width: 500px;color: gray;">
<p style="text-align:center;">
<span style="background-color: gray;color: white;font-size: 24px;">
物联网工程
</span>
</p>
<p align="left">
<b>简介</b>
</p>
<p>
物联网(<span style="color: red;">Internet of Things</span>)这个词,国内外普遍公认的是 MITAuto-ID 中心Ashton 教授1999年在研究RFID时最早提出来的。在2005年国际电信联盟(ITU)发布的同名报告中,物联网的定义和范围已经发生了变化,覆盖范围有了较大的拓展,不再只是指基于RFID技术的物联网。物联网是基于互联网,传统电信网等信息承载体,让所有能够被独立寻址的普通物理对象实现互联互通的网络又称为物联网域名。
</p>

</div>
</body>

</html>

CSS的东西都放在style里,有好多的分号,不能忘,(直接联想到了C语言,每次都是因为分号找半天)

div放在body中

margin: auto 让元素本身水平居中

background-color: gray 设置背景颜色

font-size: 24px 设置字体大小

color: white 设定文字颜色

CSS基础

CSS基础语法

h1 {color:red; font-size:14px;}

img

CSS高级语法

可以一起定义多个

h1,h2,h3,h4,h5,h6 {color: green;}

CSS派生选择器

    img

可以定义某个标签下的标签

已经定义过的不能被覆盖

CSS id选择器

img

<div id="content">用#content去定义

<div id="content">标签下的p标签 用#content p{…….}去定义

CSS 类选择器

img

就是id选择器中的#换成.

CSS 属性选择器

CSS样式

背景

1
2
3
4
5
6
7
8
9
10
11
12
<style>
body {
color: black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-image: url(1.jpg);
background-position: center;
margin: 0%;
}
</style>

background-image: url(1.jpg); 插入背景图片

background-repeat: no-repeat; 不平铺

background-attachment: fixed; 背景图片不随其余部分滑动

默认值 scroll 背景图像会随着页面其余部分的滚动而移动

background-position: center; 图片位置

background-position:66% 33%;把一个图像放在水平方向 2/3、垂直方向 1/3 处

margin: 0%;

imgimg

文本

color:red; 颜色

ext-align:center; 对齐方式

当text-align设置为”justify”,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

text-decoration:none; 删除链接的下划线

     imgimg

text-indent:50px; 文本缩进

字母大小写转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大小写字母转换</title>
<style>
p.uppercase {text-transform:uppercase;} /*每个单词的所有字母大写*/
p.lowercase {text-transform:lowercase;} /*每个单词的所有字母小写*/
p.capitalize {text-transform:capitalize;} /*每个单词的首字母大写*/
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

img

字体

p.normal {font-style:normal;} 正常字体

p.italic {font-style:italic;} 斜体

p.oblique {font-style:oblique;}    斜体

font-size 字体大小 后面可以加40px或者1.5em

链接

a:link {color:#000000;}      /* 未访问链接*/

a:visited {color:#00FF00;}  /* 已访问链接 */

a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */

a:active {color:#0000FF;}  /* 鼠标点击时 */

盒子

imgimg

margin: 50px;

border: 25px solid blue;

padding: 50px;

img

定位 position left top

relative 相对定位

​ 1.相对于自己的初始位置

​ 2.定位后空间不释放

absolute 绝对定位

​ 1.位置相对于最近已定位的祖先元素 如果没有最近已定位的祖先元素 相对于body

​ 2.定位后空间释放

fixed 固定定位

​ 1.位置相对可视界面

​ 2.定位后空间释放

浮动 float left right

清除浮动 clear:left right both

父元素中的子元素都浮动 –> 塌陷

​ 解决塌陷 1.div clear:both

.clearfix::after{

context:””;

//block   clear:both 才会生效

display:block;

clear:both;

}

3.overflow:hidden

(BFC规则 overflow:hidden触发了BFC

BFC规则去渲染页面

浮动的元素也参与计算高度)

float布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
  .container{
    width: 800px;
    height: 200px;
  }
  .left{
    float: left;
    background: red;
    width: 200px;
    height: 100%;
  }
  .right{
    background: blue;
    margin-left: 200px;
    height: 100%;
        padding-left: 10px;
  }
</style>
<body>
  <div class="container">
  <div class="left">
    左
  </div>
  <div class="right">
    右
  </div>
</div>
</body>

img

将其分为两栏

flex布局 

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

属性:

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

1.flex-direction属性决定主轴的方向,(排列方向),共有4个值

1
flex-direction: row | row-reverse | column | column-reverse;

img

row(默认值):主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column:主轴为垂直方向,起点在上沿。

column-reverse:主轴为垂直方向,起点在下沿。

2.flex-wrap属性控制是否换行,有3个值

1
flex-wrap: nowrap | wrap | wrap-reverse;

nowrap(默认)不换行, wrap向下换行, wrap-reverse向上换行

3.flex-flow是direction和wrap的合并简写

1
flex-flow: <flex-direction> || <flex-wrap>;

4.justify-content属性定义项目在主轴上的对齐方式,共有5个值

1
justify-content: flex-start | flex-end | center | space-between | space-around;
  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:两端对齐,项目之间的间隔都相等。
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

5.align-items属性定义在交叉轴上如何对齐,同样有5个值

1
align-items: flex-start | flex-end | center | baseline | stretch;
  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

6.align-content定义多跟轴线的对齐方式,有6个值

1
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

JS

javascript和我正在学的而且还学的乱七八糟的C 语言差不多

变量

var let 常量const JS — var、let、const三者的区别

输出

window.alert();可在页面上弹出警告栏,(”123”)显示123,(”5+6”)显示5+6,(5+6)就显示11【window.】为了规范的时候可以加一加

document.write(Date());可以在页面上显示日期

document.write(内容);也可以写在页面上

console.log(),可以写入浏览器的控制台

1
2
3
4
5
6
7
8
9
<script>
document.write(Date());
document.write(123);
console.log("123");
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

img

对象

img

数据类型

有字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)

还有引用数据类型:对象(Object)、数组(Array)、函数(Function)

 typeof 操作符可以用来检测变量的数据类型

img

字符串

可以用+链接,也可以用${}

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const s = "Hello World";

console.log(s.length);
//length计算字符串长度
//属性不用加() 方法加()

console.log(s.toUpperCase());
//得到大写的 HELLO WORLD

console.log(s.toLowerCase());
//小写

console.log(s.substring(0, 8).toUpperCase());
//截取字段 再大写

console.log(s.split(''));
//得到11个值 一个字母一个值,包括空格

console.log(s.split(' '));
//加个空格,用空格分隔,得到 Hello World 两个值

img

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const s = ['apples', 'oranges', 10, true];

console.log(s);
console.log(s[1]);
//数组从0开始 0,1,2,3

s[4] = 'hey';
console.log(s[4]);
//在4处添加hey

s.push('nihao');
//将nihao添加至末尾

s.unshift('nibuhao');
//在开始添加nibuhao
//不会改变console.log(s[1])的值

s.pop();
//删除最后一项

console.log(Array.isArray(s));
//判断是不是数组

console.log(s.indexOf('oranges'));
//看oranges的索引,在哪个位置

img

循环

和C语言基本差不多,printf变成了console.log()

更新于

请我喝[茶]~( ̄▽ ̄)~*

boW 微信支付

微信支付

boW 支付宝

支付宝

boW 贝宝

贝宝