博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
08_前端笔记-html-css-js总结
阅读量：785 次
发布时间：2019-03-25

本文共 6249 字，大约阅读时间需要 20 分钟。

文章目录

HTML使用

标题

这是title						#注：浏览器的标题

语言

语言
		
二级标题
		
1、标记语言（html、xml、xhtml）带有ml
		
2、脚本语言
		
3、编译语言
				
html  超文本标记语言(HyperText Markup Language)
		
第一行						#注：br换行 ，没有闭合标签 单标签		
第二行
	#注：内容放在body里面 	 #注：头信息 	
 #注：段落标签

列表

列表
		
无序列表
					#注：无序列表 ul   · · ·		
   
    			
        
  • 第一个
    • 			
        
  • 第二个
    • 		
       
		
有序列表
					#注：有序列表 ol   1  2  3		
   
    			
        
  1. first
    2. 			
        
  2. second
    3.

链接图像处理

链接图像处理
		
链接: a标签
		在上级窗口打开		在新窗口打开		忽略框架在浏览器中打开		在当前窗口打开

图片

图片

文本格式化标签

文本格式化标签
		加粗		斜体		加大		下标字		上标字		下划线		中划线		引用				
			按照文本				原样输出

文本格式化标签

表格

表格
		
   
			    				     
      第一列				      			     
    			         
      第一行第一列      第一行第二列     
			     
      第一行第一列

表格

表单

表单
		
   
			
    
用户名:
			
    
密码:
			
    
				下拉选项:			
			
    
性别:女生					男生			
			
    
爱好:女生					男生

表单

布局

布局
		
div标签
		
流式布局
		
   
    第一个div
   
		
   
    第二个div
   
		
   
    第三个div
   
		
左右布局
		
   
    第一个div
   
		
   
    第二个div
   
		
厂式布局
		
   
    第一个div
   
		
   
    第二个div
   
		
   
    第三个div
   
		
工式布局
		
   
    第一个div
   
		
   
    第二个div
   
		
   
    第三个div
   
		
   
    第四个div

div

CSS样式

css层叠样式表

			
   				
   						
css 层叠样式表
		
1、内联样式
		
2、内部样式表
		
3、外部样式表
		
4、浏览器默认样式
		
注意加载优先级

mycss.css文件下

.p_class {
   	color: orange;}

css选择器

			
css选择器
		
titleh3
		
这是title1
		
这是title1
		
这是p_id
		
这是p_class

样式设置

			
背景样式
		
   
			
    
背景样式
		
   
		
文字字体
		
这是文本字体

样式

链接样式

		
链接样式
		
百度		
百度		
百度		
百度

列表样式

		
列表样式
		
有序列表 无序列表
		
   
    			
        
  • 苹果
    • 		
       
		
   
    			
        
  1. 苹果
    2.

列表样式

隐藏与显示

隐藏与显示
		通过		display  none 隐藏 (不占位置)  inline  block		visibility  hidden (占位置)

盒子模型和边框

盒子模型和边框
		padding  内边距		margin   外边距		border   边框

选择器的组合定义

选择器的组合定义
		
1、后代选择器
		
2、组合选择器
		
3、子选择器
		
4、相邻兄弟选择器
		
5、普通兄弟选择器

定位

定位
		position			static  没有定位，出现在正常的流中			fixed   元素出现在窗口的固定位置			relative 相对于元素出现的本来正常的位置			absolute 相对于已经定位的父元素的位置

浮动

浮动
		float			left			right						clear  清除浮动

pyquery 爬虫库 对于一些比较简单的爬虫。对于 交互式的 比较困难

(venv) E:\web_cpen\flask_proj\devopscmdb>pip install pyqueryimport pyqueryimport requestsfrom pyquery import PyQuery as pqresult_text = requests.get("http://www.baidu.com").textpq_html = pq(result_text)img =pq_html("img")# print(result_text)print(img)#结果  # img_item = pq_html("#dem img").items()		#注：可以这样更细的写img_item = pq_html("img").items()for item in img_item:    print(item.attr.src)#结果 # //www.baidu.com/img/bd_logo1.png# //www.baidu.com/img/gs.gif

JavaScript使用

		
javascript输出示例
		
js 数据类型 (弱类型语言)
		
"1"+1
		
 string
		
 number
		
 boolean
		
 undefined
		
 null
		
 object

js

函数

函数
		
function定义

箭头函数

事件

事件
		
鼠标移动
		
鼠标点击

流程控制

流程控制
					// 流程控制			function func03() {				var hour = 12				if(hour<12) {					console.log("上午好")				}				else if(hour<18) {					console.log("下午好")				}				else {					console.log("晚上好")				}			}			func03()			function func04() {				for(let i=0;i<5;i++) {		#注：let局部定义；var 局部定义 是函数类的定义					console.log(i)				}				# console.log(i)		#注：报错			}			func04()			# console.log(i)			#注：报错

运算符

		
运算符

正则

		
正则

正则

json类型转换

json类型转换
		
JSON.stringify(obj) 把对象转化成json
		
JSON.parse(str) 把json字符转化成对象

dom

		
这是标题dom
		
这是第一个段落
		
这是第二个p段落

dom

dom
jQuery

		
jquery
		
这是一个段落

jquery

jquery
Ajax

#注：先关闭认证    # api_authorize()(venv) E:\web_cpen\flask_proj\devopscmdb>python manage.py runserver -d -h 0.0.0.0 -p 8000

XMLHttpRequest 是AJAX的基础

		
ajax
		
替换页面
		
跨域问题		
同源策略

同源：协议、域名、端口 都一致。即//后的第一个/之前的 所有内容都一致

devopscmdb --> app.py文件

(venv) E:\web_cpen\flask_proj\devopscmdb>pip install flask-cors
from flask_cors import CORSdef create_app(config=None):    app = Flask(__name__)    ### 跨域解决    #允许所有的源来访问/vi/api/下的所有url    #给返回的消息头中添加 access-control-allow-origin    CORS(app, resources = {
   "/v1/api/*":{
   "origins":"*"}})

ajax

		
ajax
		
替换页面
		
跨域问题		
同源策略

ajax

使用ajax的语法进行访问

		
ajax
		
替换页面
		
跨域问题		
同源策略

ajax

ajax
GET 请求，数据放到 url头部信息里面
POST 请求，数据放到 body里面

中间代理层添加 nginx上可以添加 响应头部信息

修改windows主机hosts文件

C:\Windows\System32\drivers\etc\hosts192.168.0.37 www.sc.com

中控机（centos B主机）上

[root@cPen_B ~]# telnet 192.168.0.61 8000		#注：能访问win的8000端口#注：Windows ip地址：192.168.0.61[root@cPen_B conf.d]# pwd/etc/nginx/conf.d[root@cPen_B conf.d]# vim sc.confupstream sc {
   						#注：一台机器 没用上这个配置    server 192.168.0.37:8000;}server{
   							#注：做代理转发    listen  80 default_server;    server_name  www.sc.com;    location / {
           proxy_pass http://192.168.0.61:8000;    }}

Hbuilder上

		
ajax
		
替换页面
		
跨域问题		
同源策略

浏览器下 访问成功

#注：成功获取，因为这是由flask解决了跨域问题
ajax
Pycharm 注释 让后端 flask 不做 跨域请求头
devopscmdb --> app.py文件

def create_app(config=None):    ……    #CORS(app, resources = {"/v1/api/*":{"origins":"*"}})……

#注：访问失败

error
Linux中转机下
#注：在nginx上添加请求头

[root@cPen_B conf.d]# pwd/etc/nginx/conf.d[root@cPen_B conf.d]# vim sc.conf				#注：在nginx上添加请求头server{
       listen  80 default_server;    server_name  www.sc.com;    location / {
           add_header Access-Control-Allow-Origin *;        add_header Access-Control-Allow-Methods 'GET,POST, OPTIONS';        proxy_pass http://192.168.0.61:8000;    }}[root@cPen_B conf.d]# nginx -t					#注：检测语法[root@cPen_B conf.d]# service nginx restart		#注：重启服务#注：或者nginx -s reload

ajax

jsonp

Pycharm下

devopscmdb --> manage.py文件下

#注：新建路由   因为restful框架不支持jsonpfrom flask import request@app.route("/jsonp")def jsonp():    func = request.args["callback"]	#注：回调函数名，客户端和服务端保持一致    msg = func + "('jsonp调用成功')"    return msg#msg其实是 jQuery20002950525880781112_1608709334606('jsonp调用成功')#注：把参数 作为回调函数名的参数 传递给客户端

Hbuilder下

		
ajax
		
替换页面
		
跨域问题		
同源策略

访问成功

success
Bootstrap
bootstrap 响应式框架
栅格参数

Hbuilder下

		
   						
bootstrap 响应式框架
		
   
			
    
				
     
      col-md-6
     
				
     
      col-md-3
     
				
     
      col-md-3
     
				
     			
    
			
    
				
     
      col-xs-6
     
				
     
      col-xs-3
     
				
     
      col-xs-3
     
				
     			
    
			
    
				
     
      col
     
				
     
      col
     
				
     
      col
     
				
     
      col

bootstrap

			
   				
   				
h1. Bootstrap heading Secondary text
		
h2. Bootstrap heading Secondary text
		
h3. Bootstrap heading Secondary text
		
h4. Bootstrap heading Secondary text
		
h5. Bootstrap heading Secondary text
		
h6. Bootstrap heading Secondary text
				
   
			    				     
      第一列				      			     
    			         
      第一行第一列      第一行第二列     
			     
      第一行第一列

bootstrap

bootstrap

转载地址：http://sctuk.baihongyu.com/

你可能感兴趣的文章
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-03-14 08:08:04   当前IP: 3.129.206.232   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我