ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

08_前端笔记-html-css-js总结

2020-12-22 19:03:55  阅读：137  来源： 互联网

标签：function console log color 08 js html div 选择器


文章目录


个人博客
https://blog.csdn.net/cPen_web

HTML使用

标题

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

语言

		<h1>语言</h1>
		<h2>二级标题</h2>
		<p>1、标记语言（html、xml、xhtml）带有ml</p>
		<p>2、脚本语言</p>
		<p>3、编译语言</p>
		
		<p>html  超文本标记语言(HyperText Markup Language)</p>
		<br>第一行						#注：br换行 ，没有闭合标签 单标签
		<br>第二行

	<body>	#注：内容放在body里面 </body>
	<head> #注：头信息 </head>
	<p> #注：段落标签 </p>

列表

		<h1>列表</h1>
		<p>无序列表</p>					#注：无序列表 ul   · · ·
		<ul>
			<li>第一个</li>
			<li>第二个</li>
		</ul>
		<p>有序列表</p>					#注：有序列表 ol   1  2  3
		<ol>
			<li>first</li>
			<li>second</li>
		</ol>

链接图像处理

		<h1>链接图像处理</h1>
		<p>链接: a标签</p>
		<a href="http://www.baidu.com" target="_parent">在上级窗口打开</a>
		<a href="http://www.baidu.com" target="_blank">在新窗口打开</a>
		<a href="http://www.baidu.com" target="_top">忽略框架在浏览器中打开</a>
		<a href="http://www.baidu.com" target="_self">在当前窗口打开</a>

	<iframe> #注：框架 </iframe>

图片

		<p>图片</p>
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=10400358,3341701483&fm=26&gp=0.jpg" width="100" height="100">
		<img src="./cs.jpg" width="200" height="200">

文本格式化标签

		<h1>文本格式化标签</h1>
		<b>加粗</b>
		<i>斜体</i>
		<big>加大</big>
		<sub>下标字</sub>
		<sup>上标字</sup>
		<u>下划线</u>
		<s>中划线</s>
		<q>引用</q>
		
		<pre>
			按照文本
				原样输出
		</pre>

文本格式化标签
表格

		<h1>表格</h1>
		<table border="1">
			<thead>
				<th colspan="2">第一列</th>
				<!-- <th>第二列</th> -->
			</thead>
			<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
			<tr><td>第一行第一列</td><td>
		</table>

表格
表单

		<h1>表单</h1>
		<form action="#" method="post">
			<p>用户名:<input type="text" size="60" name="username"></p>
			<p>密码:<input type="password" size="60" name="password"></p>
			<p>
				下拉选项:<select name="prov">
					<option value ="1">湖南</option>
					<option value ="2">湖北</option>
				</select>
			</p>
			<p>性别:<input type="radio" name="sex" value="f">女生
					<input type="radio" name="sex" value="m">男生
			</p>
			<p>爱好:<input type="checkbox" name="hobby" value="f">女生
					<input type="checkbox" name="hobby" value="m">男生
			</p>
			<button type="submit">登陆</button>
			<input type="submit" value="登陆">
		</form>

表单
布局

		<h1>布局</h1>
		<p>div标签</p>
		<h3>流式布局</h3>
		<div style="background-color: yellow; width: 20%; height: 50px;">第一个div</div>
		<div style="background-color: pink; width: 20%; height: 50px;">第二个div</div>
		<div style="background-color: green; width: 20%; height: 50px;">第三个div</div>
		<h3>左右布局</h3>
		<div style="background-color: yellow; width: 20%; height: 50px; float: left;">第一个div</div>
		<div style="background-color: dodgerblue; width: 20%; height: 50px; float: left;">第二个div</div>
		<h3 style="clear: both;">厂式布局</h3>
		<div style="background-color: yellow; width: 80%; height: 50px;">第一个div</div>
		<div style="background-color: pink; width: 20%; height: 50px; float: left;">第二个div</div>
		<div style="background-color: green; width: 60%; height: 50px; float: left;">第三个div</div>
		<h3 style="clear: both;">工式布局</h3>
		<div style="background-color: yellow; width: 80%; height: 50px;">第一个div</div>
		<div style="background-color: pink; width: 20%; height: 50px; float: left;">第二个div</div>
		<div style="background-color: green; width: 60%; height: 50px; float: left;">第三个div</div>
		<div style="background-color: blue; width: 80%; height: 50px; clear: both;">第四个div</div>

div

CSS样式

css层叠样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/mycss.css"/>
		<style>
			#p_tag {
				color: darkmagenta;
			}
		</style>
	</head>
	<body>
		<h1>css 层叠样式表</h1>
		<p style="color: crimson;">1、内联样式</p>
		<p id="p_tag">2、内部样式表</p>
		<p class="p_class">3、外部样式表</p>
		<p>4、浏览器默认样式</p>
		<p>注意加载优先级</p>
	</body>
</html>

mycss.css文件下

.p_class {
	color: orange;
}

css选择器

		<style>
			/* id选择器 */
			#p_tag {
				color: darkmagenta;
			}
			/* 标签选择器 */
			p {
				color: #8B008B;
			}
			/* class选择器 */
			.p_class1 {
				color: aqua;
			}
			/* 属性选择器 */
			p[title="title1"] {
			p[title] {
			[title] {
				color: cadetblue;
			}
		</style>

	<body>
		<h1>css选择器</h1>
		<h3 title="titleh3">titleh3</h3>
		<p title = "title1">这是title1</p>
		<p title = "title2">这是title1</p>
		<p id = "p_id">这是p_id</p>
		<p class = "p_class">这是p_class</p>
	</body>

样式设置

		<style>
			div {
				width: 200px;
				height: 100px;
				background-color: #00FFFF;
				background-image: url(../../html/cs.jpg);
				background-position: right;
			}
			#p_id {
				font-family: "楷体";
				font-size: large;
				text-align: right;
			}
		</style>

	<body>
		<h1>背景样式</h1>
		<div>
			<p>背景样式</p>
		</div>
		<h1>文字字体</h1>
		<p id="p_id">这是文本字体</p>
	</body>

样式
链接样式

		<style>
			/* 未被访问之前 */
			a:link {
				color: #5F9EA0;
			}
			/* 被访问之后 */
			a:visited {
				color: #8B008B;
			}
			/* 选中 */
			a:hover {
				color: green;
			}
			/* 访问时 */
			a:active{
				color: pink;
			}
		</style>

		<h1>链接样式</h1>
		<br><a href="http://www.baidu.com" target="_blank">百度</a>
		<br><a href="http://www.baidu.com" target="_blank">百度</a>
		<br><a href="http://www.baidu.com" target="_blank">百度</a>
		<br><a href="http://www.baidu.com" target="_blank">百度</a>

列表样式

		<style>
			ul.a {
				list-style-type: circle;
			}
			ol.b {
				list-style-type: lower-alpha;
			}
		</style>

		<h1>列表样式</h1>
		<p>有序列表 无序列表</p>
		<ul class="a">
			<li>苹果</li>
		</ul>
		<ol class="b">
			<li>苹果</li>
		</ol>

列表样式
隐藏与显示

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

盒子模型和边框

		<h1>盒子模型和边框</h1>
		padding  内边距
		margin   外边距
		border   边框

选择器的组合定义

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

定位

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

浮动

		<h1>浮动</h1>
		float
			left
			right
			
			clear  清除浮动

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

(venv) E:\web_cpen\flask_proj\devopscmdb>pip install pyquery

import pyquery
import requests
from pyquery import PyQuery as pq

result_text = requests.get("http://www.baidu.com").text
pq_html = pq(result_text)
img =pq_html("img")
# print(result_text)
print(img)
#结果 <img hidefocus="true" src="//www.baidu.com/img/bd_logo1.png" width="270" height="129"/> <img src="//www.baidu.com/img/gs.gif"/>

# 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使用

	<body>
		<h1>javascript输出示例</h1>
		<h1>js 数据类型 (弱类型语言)</h1>
		<p>"1"+1</p>
		<p> string</p>
		<p> number</p>
		<p> boolean</p>
		<p> undefined</p>
		<p> null</p>
		<p> object</p>
		<!--  -->
		<script type="application/javascript">
			// 控制台输出
			console.log("输出到控制台")
			// 弹框输出
			alert("这是一个弹框")
			// 页面输出
			document.write("这是页面输出")
		</script>
	</body>

		<script type="application/javascript">
			var a=2+"5"
			console.log(a, typeof(a))
			
			b = "this is b"
			console.log(b)
			
			console.log(window)		#注：整个窗口

			// 定义常量
			const c = "this is c"			

			// 定义局部变量
			let d = "this is d"

			// 对象和数组
			var lst = ["a", "b"];
			var dict = {firstname:"wen", lastname:"yao"};
			console.log(lst, typeof(lst));
			console.log(dict, typeof(dict));
		</script>

js
函数

		<h1>函数</h1>
		<p>function定义</p>
		<button onclick="func01()">执行func01</button>

		<script type="application/javascript">
			function func01() {
				alert("这是func01")
			}
			// 函数内不用var声明，就属于全局变量
			// 函数内可以使用var 声明变量
			var a = "20"
			function func02() {
				var a = "20"		
			}
			func02()
			console.log(a)
		</script>

箭头函数

		<script type="application/javascript">

			// 箭头函数
			// 关注this 当前环境
			var obj = {
				a:10,
				c: () => {
					console.log(this.a)		#注：调用它的环境 20
				},
				b: function() {
					console.log(this.a)		#注：当前环境 10
				}
			};
			obj.b()
			obj.c()
		</script>

事件

		<h1>事件</h1>
		<p onm ousemove="func01()">鼠标移动</p>
		<p onclick="func01()">鼠标点击</p>

流程控制

		<h1>流程控制</h1>
		
			// 流程控制
			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)			#注：报错

运算符

	<body>
		<h1>运算符</h1>

		<script type="application/javascript">
			// 运算符
			y = 2
			x = y ++
			console.log(x)				#注：2  先赋值 再++
			y = 2
			x = ++y
			console.log(x)				#注：3  先++ 再赋值

			// python a = "ok" if 1>3 else "error"
			a = 1>3?"ok":"error",
			console.log(a)
		</script>

正则

	<body>
		<h1>正则</h1>
		<input id="tel" type="text" onblur="checktel()">

		<script type="application/javascript">
			// 正则
			function checktel() {
				// 获取表单输入 
				var tel = document.getElementById("tel").value
				var par = /^12(8|9)\d{8}$/;
				ret = par.test(tel);
				if(ret) {
					console.log("手机号合法")
				}else {
					console.log("手机号不合法")
				}
			}
		</script>

正则
json类型转换

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

dom

	<body>
		<h1>这是标题dom</h1>
		<p id = "firstp" οnclick="func01()">这是第一个段落</p>
		<p id = "secondp">这是第二个p段落</p>

		<script>
			// 通过id获取
			function func01() {
				var pdoc = document.getElementById("firstp")
				pdoc.style.color = "red"
				pdoc.innerHTML = "修改之后的p段落"
				pdoc.addEventListener("mousemove", func02)
			}
			function func02() {
				console.log("move event")
			}
			document.getElementById("secondp").onclick = function () {
				this.style.color = "green"
			}
		</script>
	</body>

dom
dom

jQuery

	<body>
		<h1>jquery</h1>
		<p>这是一个段落</p>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			// $(选择器).action()
			// 与css选择器基本一致
			$(document).ready(	
			// 文档加载完成之后执行的
			function() {					
				$("p").click(				#注：点击事件
				function(){
					$(this).hide()			#注：隐藏
				}
				)
			}
			)
		</script>
	</body>

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的基础

	<body>
		<h1>ajax</h1>
		<p>替换页面</p>
		<br>跨域问题
		<br>同源策略
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script>
			$().ready(function(){
				$("p").click(function(){
					$(this).css("color","red")
					// 发送get请求  第一个参数是url的路径 第二个参数是回调函数
					$.get("http://127.0.0.1:8000/v1/api/cmdb/servers/",function(data) {
						$(this).text(JSON.srtingify(data));
					})
				})
			})
		</script>
	</body>

同源策略和跨域解决方案
博客地址 https://www.cnblogs.com/rain-chenwei/p/9520240.html

标签：function,console,log,color,08,js,html,div,选择器
来源： https://blog.csdn.net/cPen_web/article/details/111564009

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有