HTML
基本标签
<!DOCTYPE html>
<hml lang="en">
<head>
<meta charset="UTF-8">
<title>这是title</title>
<a>这是a标签</a>
<title>1234asdadadad</title>
<!-- -------------------------link---------------全局更改样式-->
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<!--h是标题字-->
<h1>这是一个标题</h1>
<!--p是段落标签，每个p标签包裹的内容相隔一行-->
<p>阿萨大大大苏打撒旦阿萨大大大苏打<!--br是换行--><br></br>撒旦阿萨大大大苏打撒旦</p>
<P>阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿
萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿
萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿
萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿
萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦阿萨大大大苏打撒旦</P>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>
<h4>这是一个标题</h4>
<h5>这是一个标题</h5>
<h6>这是一个标题</h6>
<!-----------------input---------------这是输入框-->
<input>
<!--------------------hr----------------水平线-->
<hr color="red">
<!------------------------------------html对单双引号不敏感,甚至可以没有引号-->
<hr color='red'>
<!--------------------------------------不区分大小写-->
<hr color=greEn>
<!---------------------br--------------换行-->
换行<br>换行
<!------------------pre---------------保留格式-->
<!-----------------------------------在源码上什么格式，在网页上就是什么格式-->
<!------------------------------------比如，源码上的回车在网页上不显示，空格只显示一个，pre就可以保留原来的格式-->
<pre>啊啊啊 啊啊啊
啊
啊啊啊啊啊啊</pre>
<!-------------------b---------------- 粗体字-->
<b>粗体字</b>
<!--___________________i________________斜体字-->
<i>斜体字</i>
<!------------------ins---------------插入字-->
<ins>插入字</ins>
<!------------------del--------------删除字--->
<del>删除字</del>
<!---------------sup----------------右上角-->
m<sup>n</sup>
<!---------------sub----------------右下角-->
m<sub>n</sub>
<!---------------font--------------font字体标签-->
<font color="red" size="15">HHHHHHH</font>
<!-- -------------- ；-----------------空格-->
a bc
<!-- -------------< >------大小于号-->
<!-- -------------------.class---#id----------类和id-->
<!-- -------------------以下三个方式全部写在head中的style标签中-->
.class{
样式参数（作用于类）
}
#id{
样式参数（作用于id）
}
div{
样式参数作（用于所有div）
}
</body>
</hml>有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>西瓜</li>
</ol>
</body>
</html>无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--黑方块-->
<ul type="square">
<li>山东
<!-- 空心⚪-->
<ul type="circle">
<li>济南
<!-- 黑心⚪-->
<ul type="disc">
<li>高恒区</li>
<li>海钓区</li>
</ul>
</li>
<li>青岛</li>
</ul>
</li>
<li>上海</li>
<li>北京</li>
</ul>
</body>
</html>文本加线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="text-decoration: overline">adafaf</div>
<div style="text-decoration: underline">adafaf</div>
<div style="text-decoration: line-through">adafaf</div>
<div style="text-decoration: blink">adafaf</div>
</body>
</html>控制文本输入数量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 最大长度，最多可输入三个字符-->
<input type="text" maxlength="3"/>
</body>
</html>插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!------------------------只指定宽度或者高度，另一个属性自动提等比例调整-->
<!--title 鼠标放在图片上会出现提示信息-->
<!---alt 图片有问题的时候的提示信息-->
<img src="images/fc22eb3f819caa3b4c8051ebafb80cd7f75c6783.jpg@.webp" width="500px" height="" title="1235">
<img src="错误路径" width="500px" alt="图片找不到啦">
</body>
</html>CSS样式块控制样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*<!-- 类型选择器-->*/
div{
background-color:rebeccapurple;
width:100px;
height:100px;
}
/*id选择器*/
#a{
background-color:blue;
width:100px;
height:100px;
}
/* 类选择器*/
.a{
background-color:red;
width:100px;
height:100px;
}
/* 优先级id>class>标签类型*/
/*还有一种连接外部文件链接*/
</style>
</head>
<body>
<div ></div>
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
<div id="a"></div>
</body>
</html>登录表单
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表单项只有是name时才能提交-->
<!--浏览器向服务器提交数据的格式是:-->
<!-- url?name=value&name=value&name=value&name=value&name=value-->
<!--例如,下面如果输入 账号:zhanghao
密码:123
提交之后就是: http://localhost:63342/html/html基本标签.html?x=zhanghao&y=123-->
<form action="html基本标签.html">
账号:<input type="text" name="x">
<br>
密码:<input type="password" name="y">
<br>
<!-- -------------------radio ----------------单选框--同一组的甄选按钮name需要一致-->
<!-- checked表示默认选中-->
性别:<input type="radio" name="gender" value="1" checked>男</input>
<input type="radio" name="gender" value="2">女</input>
<br>
<!-- -----------------checked 多选框 ,同一组同样的name-->
爱好:<input type="checkbox" name="hobby" value="1">抽烟</input>
<input type="checkbox" name="hobby" value="2">喝酒</input>
<input type="checkbox" name="hobby" value="3">烫头</input>
<br>
<!-- ------------------ select 下拉列表-->
学历:<select name="xueli">
<option value="小学">小学</option>
<option value="高中">高中</option>
<option value="大学">大学</option>
</select>
<br>
简介:<textarea name="文本域" cols="100" rows="30">
</textarea>
<input type="submit" value="登录">
</form>
</body>
</html>选择项——列表多选和列表显示数目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉列表多选</title>
</head>
<body>
<!-- mutiple表示下拉列表可以多选 按住ctrl多选
size 表示最多可以显示的条目-->
<select name="shengfen" size="3" multiple >
<option value="s">山东省</option>
<option value="h">河南省</option>
<option value="j">江苏省</option>
<option value="h">湖北省</option>
<option value="q">撒旦北省</option>
<option value="g">阿松大省</option>
</select>
</body>
</html>表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- ------------table----------------表格-->
<!-- -----------------th-----------------可以代替td，th中的内容自动加粗居中-->
<table border="1px" width="300px" height = "300px">
<!-- ---------tr-----------------表格中的一行-->
<tr border="1px" width="298px" height = "99px">
<!-- ----------td---------------表格一行中的一个-->
<td border="1px" width="99px" height = "99px"></td>
<td border="1px" width="99px" height = "99px"></td>
<td border="1px" width="99px" height = "99px"></td>
</tr>
<tr border="1px" width="298px" height = "99px">
<!-- -----colspan------------列合并表格------>
<td border="1px" width="99px" height = "99px" colspan="2">ab</td>
</tr>
<tr>
<td border="1px" width="99px" height = "99px" ></td>
<td border="1px" width="99px" height = "99px"></td>
<td border="1px" width="99px" height = "99px" rowspan="2" color = "red"></td>
<td></td>
</tr>
</table>
</body>
</html>超链接
_parent 在父窗口打开链接中的网页（窗口嵌套）
_blank 在新窗口打开
_self 在当前窗口打开
_top 在最外层窗口打开（窗口嵌套）
隐藏域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏域</title>
</head>
<body>
<!-- hidden -->
<form>
<!-- 可见第一个input输入框消失-->
<input type="hidden" name="a" value="1">
<input type="submit">
input
</form>
</body>
</html>鼠标悬停效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- hover-->
<style>
a:hover{
color: red;
font-size: 10px;
}
</style>
</head>
<body>
<a href="html基本标签.html">aaaaa</a>
</body>
</html>输入框权限——只读
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- readonly只读，不可修改，可以提交
disabled只读，不可修改，不能提交到服务器-->
<form>
<input type="text" name="user" value="111" readonly/>
<input type="text" name="passw" value="222" disabled/>
<input type="submit"/>
</form>
</body>
</html>CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
<!--
----------------CSS的简洁配置方式-- >
input {
border: solid red 2px;
/*------------------复杂方式----------------
border-style = "";
border-color = "";
border-width = "";
*/
}
#input1 {
/*----------------------显示*/
/*display: block;*/
/*----------------------隐藏*/
display: none;
}
#a1 {
/* -------------------font--------设置字体*/
font-size: 100px;
color: crimson;
}
</style>
</head>
<body>
<input>
<a id="a1">awdadadwa</a>
<input id="input1">
<em>强调</em>
</body>
</html>JavaScript
行间事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 事件语句的引号和字符串的引号只要不是同一种引号就行，不然无法识别-->
<!-- click 鼠标点击 onmouse 鼠标指向 -->
<input type="button" value="按钮" onclick="window.alert('helloworld');"/>
<input type="button" value="按钮" onclick='window.alert("helloworld");'/>
<input type="button" value="按钮" onmouseover='window.alert("helloworld");'/>
</body>
</html>脚本块
<script>
window.alert("hi 1");
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 脚本块中的js语句在网页一开始打开的时候自上而下执行-->
<!-- 脚本块的位置可以在代码的任意位置 执行顺序都是自上而下 window可以省略-->
<script>
window.alert("hi 1");
window.alert("hi 2");
window.alert("hi 3");
</script>
</head>
<body>
<script>
window.alert("hi 1");
window.alert("hi 2");
window.alert("hi 3");
</script>
</body>
</html>
<script>
window.alert("hi 1");
</script>脚本引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="链接文件引入脚本.js"></script>
</body>
</html>alert("asaaaaa");//.js文件变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--var 标配是变量，variable的简写-->
<!-- 可以表示任意类型的数据，而且可以多次赋值-->
<script type="text/javascript">
<!-- 这样声明变量只有c可以被赋值，如果变量未赋值，其默认值为undefied，意为默认的-->
//和普通编译语言一样，在函数体中声明的变量作用范围只在方法之中
//特殊的，如果变量声明的时候没有使用var关键字，这个变量无论在哪声明，都是全局变量,这种变量
//在声明的时候必须=赋值
variable = 1;
var a,b,c = 1;
alert(a);
alert(b);
alert(c);
alert(variable);
</script>
</body>
</html>函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- function是函数关键字 调用函数的时候对参数类型和数量没有限制-->
<script type="text/javascript">
// <!-- js中函数声明的优先级比较高，打开网页的时候先声明函数，所以可以在
// 定义函数的上面调用函数-->
sum();
function sum(x,y){
alert(x+y);
}
//下面这种方式和上面效果是一样的
// sum = function(x,y){
// alert(x+y);
// }
sum();
sum(1);
sum(1,2);
sum(1,2,3);
sum(1,1.111);
sum(1,'hello');
</script>
<input id="input1" type="button" value="按钮" onclick="sum(10,10)"/>
<!-- js中没有函数重载，当第二个同名函数出现时，不论参数如何，于第一个函数消失-->
<script type="text/javascript">
method = function (x,y){
alert("hello");
}
method = function (){
alert("world");
}
method(1,2);
</script>
</body>
</html>
扫一扫
1595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
