投稿
  1. 首页
  2. html-js-css

html

code•2022-5-17•html-js-css•阅读51

html,第1张

HTML

自学文档：https://www.runoob.com/html/html-formatting.html

网页基本标签 
<h1> ~ h6>		标题
<p>p>				段落
<a href="">a>		链接
<img src=""/>		图片
<br>				换行
<hr>				水平线
<b>b>				加粗
<i>i>				斜体
 				空格
>				大于号
<				小于号
图片属性 
<img src="" alt="" title="" width="" height=""/>

src属性：图片路径（必填）

alt属性：图片不显示时 显示alt中的文本内容（必填）

title属性：悬停时显示文本内容

width属性：宽

height属性：高

超链接 
<a href="" target="">a>

<a href="">
    <img src="" alt="" title="" width="" height=""/>
a>

target属性：跳转方式

_blank 新网页跳转_self 当前网页跳转 锚链接

当前页面跳转

<a name="top">顶部a>

<a href="#top">回到顶部a>

跨页面跳转

<a href="xxx.html"#down>跳转a>

<a href="down">donwa>
需要一个锚标记跳转到标记 功能链接

邮件链接

<a href="mailto:1257791157@qq.com">发送邮件a>

QQ链接

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1257791157&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1257791157:53" alt="蔡文杰" title="蔡文杰"/>a>
登录QQ推广官网：https://shang.qq.com/v3/index.html点击 推广工具QQ登录
列表

有序

<ol>
    <li>javali>
    <li>Pythonli>
    <li>phpli>
ol>

无序

<ul>
    <li>javali>
    <li>Pythonli>
    <li>phpli>
ul>

自定义列表

<dl>
    <dt>学科dt>
    <dd>javadd>
    <dd>Pythondd>
    <dd>phpdd>
    
    <dt>位置dt>
    <dd>长沙dd>
    <dd>深圳dd>
    <dd>广州dd>
dl>
表格

行 tr ，列 td，边框 border，合并列 colspan，合并行 rowspan

<table border="1px">
    <tr>
        <td colspan="3">学习成绩td>
    tr>
    <tr>
        <td rowspan="2">张三td>
        <td>语文td>
        <td>100td>
    tr>
    <tr>
        <td>数学td>
        <td>100td>
    tr>
    <tr>
        <td rowspan="2">李四td>
        <td>语文td>
        <td>100td>
    tr>
    <tr>
        <td>数学td>
        <td>100td>
    tr>
table>
视频和音频 




<video src="../xxx.mp4" controls autoplay>video>

<audio src="../xxx.mp3" controls autoplay>audio>
表单 
<form action="https://www.baidu.com/" method="POST">
	<p>名字:<input type="text" name="username"/> p>
	<p>密码:<input type="password" name="password"/> p>
	<p>	
	<input type="submit"/>
	<input type="reset"/>
	p>
form>

单选框 
<p>性别:

<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
p>
多选框 
<p>爱好:

<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="code" name="hobby" checked/>敲代码
<input type="checkbox" value="game" name="hobby"/>游戏
p>
按钮 

<input type="button" name="" value="确定"/>

<input type="image" src="xxx"/>

<input type="submit"/>

<input type="reset"/>
下拉框 

<select name="listName">
<option value="广东">广东option>
<option value="广西">广西option>
<option value="湖南" selected>湖南option>
<option value="湖北">湖北option>
select>
文本域 

<textarea name="textarea" cols="100" rows="5">文本内容textarea>
文件域 

<input type="file" name="files"/>
简单校验 
<p> 邮箱:
<input type="email" name="email" />
p>
<p> URL
<input type="url" name="url" />
p>
<p> 数字:

<input type="number" name="number" min="0" max="100" step="1" />
p>
<p> 音量:
<input type="range" name="volume" min="0" max="100" step="1" />
p>
<p> 搜索:

<input type="search" name="search" />
p>
应用

隐藏域 hidden

只读 readonly

禁用 disabled

非空判断 required

增强鼠标可用性 
<p>
    <label for="mark">点我试试label>
    <input type="text" id="mark"/>
p>
表单初校验 



<p> 邮箱:
    <input type="email" name="email" placeholder="请输入邮箱" required pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/或\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"/>
p>

正则表达式:https://www.jb51.net/tools/regexsc.htm

CSS

自学文档：https://www.runoob.com/css/css-tutorial.html

css四种导入方式

采用：就近原则

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css学习title>
		<style>
			/* 1.引入外部样式 导入式 不推荐 可能存在渲染慢的问题*/
			@import url("1.css");

			/* 2.内部样式 */
			h1 {
				color: green;
			}
		style>
		
		<link rel="stylesheet" href="1.css" />
	head>
	<body>
		
		<h1 style="color: red;">hello worldh1>
	body>
html>

1.css

/* 外部样式 */
h1 {
	color: yellow;
}
选择器 三种基础选择器

标签 选择器

<style>
    /* 选中h1标签 */
    h1 {
        color: red;
    }
style>

类 选择器

<style>
    /* 选中zhangsan类 */
    .zhangsan {
        color: red;
    }
style>

<h1 class="zhangsan">法外狂徒h1>

id 选择器

<style>
    /* 选中h1标签 id全局唯一，只能用一次 */
    #zhangsan {
        color: red;
    }
style>

<h1 id="zhangsan">张三h1>

测试 id > 类 > 标签

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css学习title>
	head>
	<body>
		<style>
			/* 选中id zhangsan */
			#zhangsan {
				color: red;
			}
			/* 选中class zhangsan */
			.zhangsan {
				color: green;
			}
			/* 选中 h1 标签 */
			h1 {
				color: aqua;
			}
		style>

		<h1 id="zhangsan" class="zhangsan">张三h1>
	body>
html>
层次选择器

body里的所有p标签

<style>
    body p {
        background: skyblue;
    }
style>

body里的下一级p标签

<style>
    body>p {
        background: skyblue;
    }
style>

类选择器的下面一个p标签（不包括自己）

<style>
    .a+p {
        background: skyblue;
    }
style>

类选择器的下面所有p标签（不包括自己）

<style>
    .a~p {
        background: skyblue;
    }
style>
结构伪类选择器

h1标签的元素 悬浮变橙色

<style>
	h1:hover{
		color: orange;
	}
style>

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色

<style>
	[title] {
		color: blue;
	}
style>

下面的例子是把包含标题（title=runoob）的所有元素变为蓝色

<style>
	[title=runoob] {
		color: blue;
	}
style>
字体 
<style>
    /* 
    font-family 字体系列
    font-size 字体大小
    font-style 字体样式 italic斜体
    font-weight 字体粗细 bold加粗
    color 颜色
    */
    body {
        font-family: 楷体;
        font-style: italic;
        font-size: 20px;
        font-weight: bold;
        color: black;
    }
style>

<style>
	/* 
	第一种：
	16进制，红 FF0000，绿 00FF00，蓝 0000FF
	第二种：
	第四个参数 透明度 0~1
	color: rgba(255, 0, 0, 0.5);
	color: rgb(0, 255, 0);
	color: rgb(0, 0, 255);
	
	text-align: center 	文本左右居中
	text-indent: 2em	缩进2个字符
	height: 100px;		块高
	line-height: 100px;	行高
	块高等于行高 文本上下居中
	 */
	h1 {
		color: rgb(0, 0, 255, 0.1);
		text-align: center;
		text-indent: 2em;
		height: 100px;
		line-height: 100px;
	}
style>

<style>
	/* 去a标签下划线 */
	a {
		text-decoration: none;
	}
style>
渐变

生成网址：https://www.grabient.com/

<style>
body{
	background-color: #0093E9;
	background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
style>
盒子模型

margin 外边距
border 边框
padding 内边距
内容 ：1707x397
margin + border + padding + 内容 == 盒子大小

<style>
    #id {
        /* 粗细 样式 颜色 */
        border: 3px solid black;
    }
style>
javaScript *** 作BOM对象（重点）

BOM：浏览器对象模型

window 当前窗口 
// 外部高度
window.innerHeight
285
// 外部宽度
window.innerWidth
1707
// 内部高度
window.outerHeight
902
// 内部宽度
window.outerWidth
1010
screen 计算机屏幕 
// 电脑屏幕尺寸 单位px
screen.width
1920
screen.height
1080
location 当前页面信息 
// 网址
host: "www.baidu.com"
// 跳转的网页
href: "https://www.baidu.com/"
// 协议
protocol: "https:"
// 刷新网页
reload: ƒ reload()
// 设置跳转网页
location.assign('https://www.jd.com')
document 当前网页 
// 修改title
document.title="法外狂徒"
// 通过id拿到文档树节点
document.getElementById('');
// 通过class拿到文档树节点
document.getElementsByClassName('');
// 获取cookie
document.cookie

history 浏览器历史记录

// 前进
history.forward();
// 后退
history.back();
*** 作DOM对象（核心）

浏览器网页就是一个Dom树

获取Dom节点 
<script>
	// 对应css选择器
	// 标签
	document.getElementsByTagName('h1');
	// id
	document.getElementById('p1');
	var father = document.getElementById('father');
	// 类
	document.getElementsByClassName('p2');
	// 获取所有子节点
	var childrens = father.children;
	// father.firstChild; 第一个子节点
	// father.lastChild; 最后一个子节点
</script>
更新Dom节点 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="id1"></div>
<script>
	var id1 = document.getElementById('id1');
	// innerText 更新文本
	// innerHTML 更新文本,解析html标签
	// id1.innerText = '法外狂徒 张三';
	id1.innerHTML = '法外狂徒 张三';

	//  *** 作样式
	id1.style.color = 'red'; //字体颜色
	id1.style.fontSize = '10px'; //字体大小
	id1.style.padding = '2em'; //内边距 2字符
</script>
	</body>
</html>
删除Dom节点 
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<div>
			<h1>标题一h1>
			<p id="p1">p1p>
			<p class="p2">p2p>
		div>
		<script>
            // 通过父节点删除子节点
			// 1.拿到子节点
			var p1 = document.getElementById('p1');
			// 2.通过子节点拿到父节点
			var parent = p1.parentElement;
			// 3.通过父节点 删除第一个子节点
			parent.removeChild(parent.children[0]);
			// 4.每次删除 动态刷新 小心使用
			// parent.removeChild(parent.children[1]);
			// parent.removeChild(parent.children[2]);
		script>
	body>
html>
插入Dom节点 
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<p id="js">JavaScriptp>
		<div id="list">
			<p id="se">JavaSEp>
			<p id="ee">JavaEEp>
			<p id="me">JavaMEp>
		div>
		<script>
			var js = document.getElementById('js');
			var list = document.getElementById('list');

			// list节点后面追加js节点
			list.append(js);

			// 创建一个p标签
			var newP = document.createElement('p');

			// 添加id选择器 id="newP"
			newP.id = 'newP';
			// newP.setAttribute('id','newP');

			// 写入文本
			newP.innerText = 'hello';

			// list节点后面追加 p标签
			list.append(newP);

			// 创建一个script标签
			var myScript = document.createElement('script');
			// 设置script标签属性 type="text/javascript"
			myScript.setAttribute('type', 'text/javascript');

			// ist节点后面追加 script标签
			list.append(myScript);

			// 创建style标签
			var myStyle = document.createElement('style');
			// 设置style标签属性 type="text/css"
			myStyle.setAttribute('type', 'text/css');
			// 写入css内容
			myStyle.innerText = 'body {background-color: skyblue;}';
			// 通过下标0 拿到head
			var head = document.getElementsByTagName('head')[0];
			// head追加后面 style标签
			head.append(myStyle);

			var ee = document.getElementById('ee');
			var js = document.getElementById('js');
			var list = document.getElementById('list');
			// 在list节点中 把js节点插到ee节点前面
			list.insertBefore(js,ee);
		script>
	body>
html>
*** 作表单（验证） 文本框 text下拉框 select单选框 radio多选框 checkbox隐藏域 hidden密码框 password… 
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
	head>
	<body>
		<form action="post">
			<p>
				<span>用户名:span> <input type="text" id="username" value="123" />
			p>
			<p>
				<span>性别:span>
				<input type="radio" name="sex" value="man" id="boy" />男
				<input type="radio" name="sex" value="women" id="girl" />女
			p>
		form>

		<script>
			// // 拿到input节点
			// var input_username01 = document.getElementById('username');
			// // 默认用户名 123
			// input.value = 123456;

			var input_username = document.getElementsByTagName('input')[0];
			var input_boy = document.getElementsByTagName('input')[1];
			var input_girl = document.getElementsByTagName('input')[2];

			input_username.value = '1257791157';
			// 被选中 返回true
			input_boy.checked;
			input_girl.checked;
			// 默认选中
			input_boy.checked = true;
		script>
	body>
html>
md5加密 
DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>title>
    
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
  head>
  <body>
    <form action="https://www.baidu.com/" method="POST" onsubmit="return login()">
      <p>
        <span>用户名:span>
        <input type="text" id="username" name="username" />
      p>
      <p>
        <span>密码:span>
		
        <input type="password" id="password" />
      p>
      
      <input type="hidden" id="md5_password" name="password" />
	  
      <button type="submit">提交button>
    form>

    <script>
      var password = document.getElementById("password");
      var md5_password = document.getElementById("md5_password");
      function login() {
		// 这种方式 加密后的长串密码闪烁
		// password.value = md5(password.value);
		// 解决长串密码闪烁
        md5_password.value = md5(password.value);

        // 这里业务判断，查询数据库有对应的账号密码才放行 否则false
		// 业务判断...
        return true;
      }
    script>
  body>
html>
jQuery

自学文档：http://jquery.cuishifeng.cn

基础语法

// $('选择器').事件(function{ })

$('#test_jquery').click(function() {
    alert('hello');
})

jQuery *** 作Dom

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="jquery3.6.0.js">script>
	head>
	<body>
		<ul id="test_ul">
			<li class="js">JavaScriptli>
			<li name="python">Pythonli>
		ul>
		<script>
			// 删除Dom节点 原生代码
			// var li_js = document.getElementsByTagName('li')[0];
			// var parent = li_js.parentElement;
			// parent.removeChild(li_js);
			
			// 拿节点到值	无参查询
			$('#test_ul li[class=js]').text();
			// 节点重新赋值	有参赋值
			$('#test_ul li[class=js]').text('JavaScriptJavaScriptJavaScript');
			$('#test_ul li[name=python]').html();
			$('#test_ul li[name=python]').html('PythonPythonPython');
			// 将所有段落的字体颜色设为红色并且背景为蓝色
			$('#test_ul li[class=js]').css({ "color": "#ff0011", "background": "blue" });
			$('#test_ul li[name=python]').show(); //显示
			// $('#test_ul li[name=python]').hide(); //隐藏 本质就是css display: none
		script>
	body>
html>
Ajax 
 <script>
	 function a1(){
		 $.post({
			 url : "${pageContext.request.contextPath}/a3",
			 data : {"name" : $("#name").val()},
			 success : function (data){
				 if(data.toString()==="ok"){
					 $("#userInfo").css("color","green");
				 }else{
					 $("#userInfo").css("color","red");
				 }
				 $("#userInfo").html(data);
			 },
		 })
	 }
	 function a2(){
		 $.post({"${pageContext.request.contextPath}/a3",{"pwd" : $("#pwd").val()},function (data){
				 if(data.toString()==="ok"){
					 $("#pwdInfo").css("color","green");
				 }else{
					 $("#pwdInfo").css("color","red");
				 }
				 $("#pwdInfo").html(data);
			 }
		 })
	 }
 </script>

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/940643.html

赞 (0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
codecode管理员组
00
上一篇 2022-05-17
下一篇2022-05-17

发表评论

登录后才能评论

评论列表（0条）

    保存