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

最新推荐文章于 2024-07-25 15:19:10 发布
最新推荐文章于 2024-07-25 15:19:10 发布
阅读量272 收藏 1
点赞数
分类专栏： 前端笔记 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cPen_web/article/details/111564009
版权

文章目录


个人博客
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 onmousemove="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

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

Flask解决跨域问题 https://www.cnblogs.com/zyndev/p/13696549.html

devopscmdb --> app.py文件

(venv) E:\web_cpen\flask_proj\devopscmdb>pip install flask-cors

from flask_cors import CORS

def create_app(config=None):
    app = Flask(__name__)
    ### 跨域解决
    #允许所有的源来访问/vi/api/下的所有url
    #给返回的消息头中添加 access-control-allow-origin
    CORS(app, resources = {"/v1/api/*":{"origins":"*"}})

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的路径 第二个参数是回调函数
					// 跨域问题 "Access-Control-Allow-Origin"
					//$.get("http://127.0.0.1:8000/v1/api/cmdb/servers/",function(data) {
					//	$(this).text(JSON.srtingify(data));
					$.get("http://127.0.0.1:8000/v1/api/cmdb/servers/",(data) => {
						console.log(this)
						$(this).text(JSON.stringify(data));
					});
					// post请求
					// 第1个参数url  第二个参数传递给服务器的参数  第三个参数回调函数
					//$.post("http://127.0.0.1:8000/v1/api/cmdb/servers/",{"username":"wenyao"},(data) =>{
					//	$(this).text(data)
					//})
				})
			})
		</script>
	</body>

ajax
使用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(){
					//跨域
					//1、请求头的 Origin信息  与 响应头的Access-Crotrol-Allow-Origin 字段信息一致解决跨域问题
					//   flask-cors 这个模块可以为flask核心对象添加响应头（服务代码实现）
					//   中间代理层添加  nginx上可以添加
					$.ajax({
						url: "http://127.0.0.1:8000/v1/api/cmdb/servers/",
						data: {
							"id":123
						},
						type: "GET",
						async: true,
						timeout: 300000, //超时时间
						dataType: "text", //返回的数据格式   json/html/xml/script/jsonp/text
						beforeSend: function (xhr) {
							console.log("发送请求前")
						},
						success: function(data, textStatus, xhr){
							console.log("请求成功");
							console.log(data);
							console.log(textStatus);
							console.log(xhr)
						},
						error: function(xhr, textStatus){
							console.log("请求失败")
						},
						complete: function() {
							console.log("请求结束")
						}
					})
				})
			})
		</script>
	</body>

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

中间代理层添加 nginx上可以添加 响应头部信息
修改windows主机hosts文件

C:\Windows\System32\drivers\etc\hosts
192.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.conf
upstream 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上

	<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(){
					//跨域
					//1、请求头的 Origin信息  与 响应头的Access-Crotrol-Allow-Origin 字段信息一致解决跨域问题
					//   flask-cors 这个模块可以为flask核心对象添加响应头（服务代码实现）
					//   中间代理层添加  nginx上可以添加  http头部信息
					//   服务端或者代理层需要做的事情，客户端不变
					//2、jsonp
					//javascript src属性可以访问别的网站
					//客户端和服务端都要支持
					//只支持get方式
					$.ajax({
						// url: "http://www.sc.com/v1/api/cmdb/servers/",
						url: "http://192.168.0.37/v1/api/cmdb/servers/",
						data: {
							"id":123
						},
						type: "GET",
						async: true,
						timeout: 300000, //超时时间
						dataType: "text", //返回的数据格式   json/html/xml/script/jsonp/text
						beforeSend: function (xhr) {
							console.log("发送请求前")
						},
						success: function(data, textStatus, xhr){
							console.log("请求成功");
							console.log(data);
							console.log(textStatus);
							console.log(xhr)
						},
						error: function(xhr, textStatus){
							console.log("请求失败")
						},
						complete: function() {
							console.log("请求结束")
						}
					})
				})
			})
		</script>
	</body>

浏览器下 访问成功
#注：成功获取，因为这是由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框架不支持jsonp

from flask import request

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

Hbuilder下

	<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(){
					//跨域
					//1、请求头的 Origin信息  与 响应头的Access-Crotrol-Allow-Origin 字段信息一致解决跨域问题
					//   flask-cors 这个模块可以为flask核心对象添加响应头（服务代码实现）
					//   中间代理层添加  nginx上可以添加 http头部信息
					//   服务端或者代理层需要做的事情，客户端不变
					//2、jsonp
					//javascript src属性可以访问别的网站
					//客户端和服务端都要支持
					//只支持get方式
					$.ajax({
						url: "http://127.0.0.1:8000/jsonp",
						type: "GET",
						//jsonp方式实现跨域
						dataType: "jsonp",
						jsonp: "callback",	//指定jsonp处理函数存放的标识名字
						success: function(data) {
							console.log(data)
						},
						error: function(xhr, textStatus){
							console.log("请求失败");
							console.log(textStatus);
							console.log(xhr)
						},
					})
				})
			})
		</script>
	</body>

访问成功
success
Bootstrap
bootstrap 响应式框架
官网 https://v3.bootcss.com/css/
栅格参数

Hbuilder下

		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<style>
			[class*="col-"] {
				background-color: #5F9EA0;
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<h1>bootstrap 响应式框架</h1>
		<div class=".container">
			<div class = "row">
				<div class = "col-md-6">col-md-6</div>
				<div class = "col-md-3">col-md-3</div>
				<div class = "col-md-3">col-md-3</div>
				<!-- <div class = "col-md-3">col-md-3</div> -->
			</div>
			<div class = "row">
				<div class = "col-xs-6">col-xs-6</div>
				<div class = "col-xs-3">col-xs-3</div>
				<div class = "col-xs-3">col-xs-3</div>
				<!-- <div class = "col-md-3">col-md-3</div> -->
			</div>
			<div class = "row">
				<div class = "col-xs-6 col-md-4 col-lg-3">col</div>
				<div class = "col-xs-6 col-md-4 col-lg-3">col</div>
				<div class = "col-xs-6 col-md-4 col-lg-3">col</div>
				<div class = "col-xs-6 col-md-4 col-lg-3">col</div>
				<!-- <div class = "col-md-3">col-md-3</div> -->
			</div>
		</div>
		<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
	</body>

bootstrap

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	</head>
	<body>
		<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
		<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
		<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
		<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
		<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
		<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
		
		<table class="table table-striped">
			<thead>
				<th colspan="2">第一列</th>
				<!-- <th>第二列</th> -->
			</thead>
			<tr class="success"><td rowspan="2">第一行第一列</td><td>第一行第二列</td></tr>
			<tr><td>第一行第一列</td>
		</table>

		<span class="glyphicon glyphicon-education"></span>
		<span class="glyphicon glyphicon-search"></span>
	</body>
</html>

bootstrap
bootstrap

mycpen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
个人博客项目搭建（三）
weixin_45068278的博客
11-14 289
用户登录功能实现
前端随手笔记-html-css-js-vue
weixin_43992935的博客
05-11 472
1 兼容性配置 <meta http-equi v="X-UA-Compatible" content="IE=Edge,chrome=1" 2 双核浏览器渲染，优先使用webkit内核渲染 <meta name="renderer" content="webkit"> 3 提升网站性能，DNS预解析 <link rel="dns-prefetch" href=".....
Python 实现个人博客系统
Python小二
07-26 7378
项目描述开发环境：PyCharm、python3.7、MySQL5.5使用技术：服务端是使用Flask开发的，前端是使用的Layui和Markdown编辑器所实现的。项目包含功能如下：注册...
mysql尝试重新启动事务_超过mysql锁等待超时,尝试重新启动事务
weixin_39918128的博客
02-02 305
我在尝试执行具有一个更新语句的存储过程时遇到以下错误.下面是错误发生后的INNODB STATUS OUTPUT：=====================================090828 12:54:36 INNODB MONITOR OUTPUT=====================================Per second averages calculated f...
HTML + CSS + JS知识点复习（第一次）
持续Java学习中
04-07 7025
文章目录HTML1、基本概述2、思维导图CSS1、引入样式的四种方式2、选择器（重点）2.1、基本选择器（三个）2.2、层次选择器（四个）2.3、伪类选择器2.4、属性选择器3、美化网页3.1、字体样式3.2、文本样式3.3、阴影3.4、设置背景图片3.5、渐变色4、盒子模型（重点）4.1、边框4.2、内外边距4.3、其他5、浮动5.1、display5.2、浮动6、定位6.1、相对定位6.2、绝...
斑码教育大前端笔记-HTML第二天
10-09
在“斑码教育大前端笔记-HTML第二天”的学习资源中，我们主要聚焦于HTML这一核心前端技术。HTML，全称为HyperText Markup Language，是构建网页的基础语言，它定义了网页的结构和内容。HTML5是其最新版本，带来了...
前端学习笔记, html, css, js.zip
01-05
前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习笔记, html, css, js前端学习笔记, html, css, js 前端学习笔记, html, css, js前端学习...
html-css-note.rar_html 前端
09-23
HTML和CSS是构建网页前端的基础技术，它们共同决定了网页的结构和样式。这份"html-css-note.rar"压缩包集合了关于HTML与CSS的常见效果笔记，对于初学者来说，是一份非常实用的学习参考资料。 HTML（HyperText ...
html css js网页制作实例processing-开发笔记p
06-21
另外，JavaScript库和框架，如jQuery、React或Vue.js，提供了更高级的功能和更简洁的API，简化了前端开发。 在"processing"部分，可能是指Processing.js，这是一个基于JavaScript的编程环境，专门用于创建可视化和...
03前端笔记_2017-07-08-11-17-091
08-08
我们看到添加了两个Bootstrap相关的样式表和JavaScript文件，分别是`bootstrap.min.css`和`bootstrap.min.js`。页面结构也进行了调整，添加了一个顶部导航栏`<div class="top">`，包含链接文本。同时，原有的logo和...
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 799
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
Windows10+vs 2017中创建WEB API教程
Explinks的博客
07-24 991
本文将介绍如何在Windows10+vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 + VS2017（MVC5）win server2016+vs2017，vs2013 vs2019当中测试通过。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 354
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
Hutool SoapClient 调用使用@webservice 发布的webService接口，参数传递为空
FangX_u的博客
07-24 584
采用工具类Hutool SoapClient调用@webservice 发布的webService接口时，参数传递不到webService,可以借助SoapUI工具辅助查看。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 275
【代码】TS如何处理js模块的类型？
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 226
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
通过不同方式在 Vue 3 中传递路由参数
最新发布
点点滴滴
07-25 545
通过path参数传递：在路由路径中定义动态参数，并使用将其作为 props 传递。通过query参数传递：在路由跳转时通过query参数传递数据，并在组件中使用useRoute获取。通过props选项传递：在路由配置中使用props选项传递静态或动态参数。
前端学习1——自学习梳理
qq_63125992的博客
07-24 326
【代码】前端学习1——自学习梳理。
Vue3扁平化Tree组件的前端分页实现
felix_alone2012的博客
07-24 381
大家好，我是小卷。得益于JuanTree的扁平化设计，在数据量很大的情况下除了懒加载，使用前端分页也是一种解决渲染性能问题的可选方案。
Java学习中的前端精要：HTML-CSS-JS-Bootstrap
前端开发是构建用户界面的关键部分，主要包括HTML、CSS和JavaScript，以及一些流行的库和框架，如jQuery和Bootstrap。 1. HTML (HyperText Markup Language) - HTML标签：HTML是构成网页的基本元素，如`<a>`用于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mycpen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值