浏览器端架构知识
·
有很多浏览器，如：火狐、360浏览器、ie浏览器、谷歌浏览器、QQ浏览器......
W3C（万维网联盟）1994年提出制定标准统一各浏览器
可以从w3cshool、w3c菜鸟教程在线学习相关知识
链接：
HTML
负责提供网页内容
骨架标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>常用标签
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<hr>
<img src="image/"width="300px">
<font color="red" size="+4">我是字体标签</font>
<font color="orange" size="+3">我是字体标签</font>
<font color="yellow" size="+2">我是字体标签</font>
<font color="green" size="+1">我是字体标签</font>
<font color="blue" size="-1">我是字体标签</font>
<font color="fuchsia" size="-2">我是字体标签</font>
<ul>
<li>无序列表</li>
<li>用户管理</li>
<li>商品管理</li>
<li>订单管理</li>
</ul>
<ol>
<li>有序列表</li>
<li>用户管理</li>
<li>商品管理</li>
<li>订单管理</li>
</ol>表格标签
<table border="1px" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>作者</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>笑傲江湖</td>
<td>金庸</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>鹿鼎记</td>
<td>金庸</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>倚天屠龙记</td>
<td>金庸</td>
<td><a href="#">修改</a><a href="#">删除</a></td>
</tr>
<tr>
<td colspan="4"> 首页 上一页 下一页 尾页 </td>
</tr>
</tbody>
</table>表单标签
<form action="/" method="post">
<!-- 文本输入框 -->
<label for="name">用户名:</label>
<input type="text" id="name" name="name" required>
<br>
<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<br>
<!-- 单选按钮 -->
<label>性别:</label>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<!-- 复选框 -->
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
<br>
<!-- 下拉列表 -->
<label for="country">国家:</label>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br>
<!-- 提交文件 -->
<label for="file">头像:</label>
<input type="file" id="file" name="file" required>
<!-- 提交按钮 -->
<input type="submit" value="提交">布局标签
div做布局
table做布局
CSS
从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
引入CSS的三种方式
方式一：在任意的html标签中可以嵌入属性style
<span style="color:red;font-size:30px;font-family:宋体">我是一些字体信息</span>
<p style="color:red;font-size:30px;font-family:宋体"> 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。</p>
方式二：在任意的html页面中的head标签块中，嵌入style代码块 适合于在一个页面中有相同样式的时候
<style>
span,p{
color:red;
font-size:30px;
font-family:宋体
}
</style>方式三：在任意的html页面中的head标签中，引入外部的css文件 适合于多个页面中有相同样式的时候
<link ral="stylesheet" href="css/style.css">CSS各种选择器
假设body部分如下：
<body>
<a href="https://www.baidu.com">百度</a>
<h1>中北大学</h1>
<h1 align="center">中北大学</h1>
<h1 align="right">中北大学</h1>
<div id="div1">
<div id="div2">
<div id="div5">
</div>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
</div>
<span class="aa">我是一些字体信息</span>
<p class="aa"> 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。</p>
<input id="username" type="text">
</body>所有选择器
<style>
*{
background-color:beige;
}
</style>标签选择器
<style>
span{
border: 1px solid red;
}
</style>id选择器
<style>
#username{
font-size:20px;
}
</style>class选择器
<style>
.aa{
color:blue;
}
</style>分组选择器
<style>
.aa,#username{
background-color:yellow;
}
</style>层级选择器
<style>
#div1 div{
background-color:red;
}
</style>父子选择器
<style>
#div1>div{
background-color:red;
}
</style>同辈选择器
<style>
#div2+div+div{
background-color:red;
}
</style>（选择的div2的下下个div）
属性选择器
<style>
h1[align='center']{
color:red;
}
</style>伪类选择器
<style>
/*伪类选择器的初始化状态*/
a:link{
color:black;
text-decoration:none;
}
/*伪类选择器的鼠标悬停状态*/
a:hover{
color:orange;
text-decoration:underline;
}
/*伪类选择器的点击后状态*/
a:visited{
color:red;
text-decoration:none;
}
/*伪类选择器的鼠标激活状态*/
a:active{
color:green;
}
</style>CSS其他补充
外边距和内边距
<style>
#div1{
border:1px solid black;
width:100px;
height:100px;
margin-left:100px; /*外左边距*/
margin:auto; /*自适应外边距，居中*/
}
</style>绝对定位和相对定位
<style>
#div2{
border:1px solid black;
width:50px;
height:50px;
position:absolute;/*绝对定位*/
left:30px;
}
</style>行元素与块元素
行元素：没有空间，无法设置宽度与高度，所有的行元素都会在同一行显示
常见的行元素：a、font、span、.......
块元素：有空间，可以设置宽度与高度，每一个块元素都需要单独占据一整行（一整块）空间
常见的块元素：div、p、h1、h2、h3、h4、h5、h6......
将行元素转化为块元素：display:block;
将块元素转化为行元素：display:inline;
<style>
a{
width:100px;
height:100px;
border:1px solid red;
display:block;
}
p{
width:100px;
height:100px;
border:1px solid red;
display:inline;
}
</style>浮动技术：float:left;
<style>
div{
border:1px solid red;
width:100px;
height:100px;
margin:10px;
float:left;
}
</style>CSS3中的新样式:参考W3C菜鸟教程
JavaScript
引入JS的三种方式
方式一：在任意的html标签中可以嵌入JavaScript属性 适合于某一个标签做样式的单独修改
<div onclick="alert(0)"></div>方式二：在任意的html页面中的head标签块中，嵌入style代码块 适合于在一个页面中有相同样式的时候
<script>
alert(0);
</script>方式三：在任意的html页面中的head标签中，引入外部的css文件 适合于多个页面中有相同样式的时候
<script scr="js/test.js"></script>JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
JavaScript 变量
在 JavaScript 中，可以使用 var、let 和 const 关键字来声明变量。
-
var：ES5 引入的变量声明方式，具有函数作用域。 -
let：ES6 引入的变量声明方式，具有块级作用域。 -
const：ES6 引入的常量声明方式，具有块级作用域，且值不可变。
<script>
//let变量
for (var i =0;i < 5;i++){
let name = "admin"
}
alert(name)
//全局var
for (var i =0;i < 5;i++){
var name = "admin"
}
alert(name)
//函数块内var
function fun1(){
var name = "admin"
alert(name)
}
fun1()
alert(name)
</script>JavaScript 数据类型
值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。
数据类型之间的转化
number-->string
方式一：数字+""
方式二：String(数字)
<script>
var a = 12
var b = a + "" //方式一：数字+""
//var b = String(a) //方式二：String(数字)
alert(typeof a)
alert(typeof b)
</script>string-->number
方式一：Number（字符串） 当字符串为纯数字的时候，转换成功，得到number类型，可以进行四则运算。 当字符串不为纯数字的时候，可以转换成功得到number类型，不可以进行四则运算，会得到NaN。
方式二：parseInt(字符串) 当字符串为纯数字的时候，转换成功，得到number类型，可以进行四则运算。 当字符串不为纯数字的时候，数字开头：可以转换成功得到number类型，可以进行四则运算， 不是数字开头：可以转换成功得到number类型，不可以进行四则运算，会得到NaN。
<script>
var a = "45"
var b = Number(a) //方式一：Number(字符串)
//var b =parseInt(a) //方式二：parseInnt(字符串)
alert(typeof a)
alert(typeof b)
alert(b+1)
</script>number-->boolean
使用Boolean(数字)：有数字，得到true；没数字，得到false
<script>
var a = 12
var b = Boolean(a)
alert(typeof a)
alert(typeof b)
</script>boolean-->number
使用Number(boolean):true:1;false:0
<script>
var a = true
var b = Number(a)
alert(typeof a)
alert(typeof b)
alert(b)
</script>boolean-->string
方式一：true+“” 方式二：String(boolean)
<script>
var a = true
var b = a + "" //方式一：true + ""
//var b = String(a) //方式二：String(boolean)
alert(typeof a)
alert(typeof b)
</script>string-->boolean
使用Boolean（字符串）：字符串有内容，转换得到true；字符串没内容得到false
<script>
var a = "sdffw"
var b = String(a)
alert(typeof a)
alert(typeof b)
alert(b)
</script>对象调用
<script>
//定义函数
function time(){
var date = new Date(); //定义对象
//调用对象
var timestr = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"+date.getHours()+":"+
date.getMinutes()+":"+date.getSeconds()+" "+"星期"+date.getDay();
var div = document.getElementById("div")
//将时间放入div
div.innerHTML = timestr
}
//周期函数
setInterval("time()",1000)
</script>自定义对象及JSON对象
<script>
//创建对象方式一
var user = new Object()
user.username = "zs"
user.age = 12
user.study = function(){
alert("学习")
}
alert(typeof user)
//创建对象方式二
class User{
constructor(username,age) {
this.username = username
this.age = age
}
study(){
alert(this.username+"学习")
}
}
var user = new User("张三",21)
user.study()
//后端(Python字典对象)-------字典格式的字符串-----JavaScript-----字典格式字符串转化为JSON对象--------前端(负责展示)
//创建对象方式三
var user = {"username":"张三","age":21}
var user2 = "{'username':'张三','age':21}"
var user4 = "{\"username\":\"张三\",\"age\":21}"
//var user3 = eval("("+user2+")")
var user3 = JSON.parse(user4)
alert(typeof user2)
alert(user3.username)
</script>
将json格式的字符串转换为json对象方式：
eval("("+json格式的字符串+")")在json格式的字符串中可以使用单引号，也可以使用双引号。
JSON.parse(json格式的字符串)json格式的字符串必须是严格的json格式，必须是双引号。
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
56
0- 0
已为社区贡献1条内容
所有评论(0)