JavaWeb5——html及其它
2022/7/8
html，所有网页都是html写出来的。超文本标记语言。
W3C标准：结构html、表现css、行为JavaScript
标签种类很多，自己用的时候上网查找就好了，举常用例子：
一、html各种各样的常用标签
标题、段落、字体、图像、超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张翰哲test(hanzhe.test.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<h2>我的第二个标题</h2>
<h3>我的第三个标题</h3>
<h4>我的第四个标题</h4>
<h5>我的第五个标题</h5>
<h6>我的第六个标题</h6>
<p>
我的第一个段落。
<font face="黑体" size="10" color="#ffc0cb">张翰哲字体颜色</font><br>
<b>我是粗体</b><br>
<i>我是斜体</i><br>
<u>我是下划线</u><br>
<center>我在文本中间</center><br>
<hr><br>
我可以<br>折行<br>
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a><br>
<img id="h" src="https://images.cnblogs.com/cnblogs_com/blogs/742637/galleries/2130392/o_220323052849_back1.jpg" style="height: 100; width: 200">
</p>
<p>
<table width="50%" border="1" cellspacing="0">
<tr height="50">
<th>序号</th>
<th>品牌logo</th>
<th>品牌名称</th>
<th>企业名称</th>
</tr>
<tr align="center">
<td>010</td>
<td>三只松鼠的图片</td>
<td>三只松鼠</td>
<td>三只松鼠</td>
</tr>
<tr align="center">
<td>009</td>
<td>优衣库的图片</td>
<td>优衣库</td>
<td>优衣库</td>
</tr>
<tr align="center">
<td>008</td>
<td>小米的图片</td>
<td>小米</td>
<td>小米科技有限公司</td>
</tr>
</table>
</p>
</body>
</html>
二、html表格类型：
跨列：colspan
跨行：rowspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张翰哲test(hanzhe.test.com)</title>
</head>
<body>
<table width="50%" border="1" cellspacing="0">
<tr height="50">
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>早自习</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
<td>语文</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第1节</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr align="center">
<td>第2节</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
</tr>
<tr align="center">
<td>第3节</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr align="center">
<td colspan="7">午休</td>
</tr>
<tr align="center">
<td rowspan="4">下午</td>
<td>第4节</td>
<td>生物</td>
<td>生物</td>
<td>生物</td>
<td>生物</td>
<td>生物</td>
</tr>
<tr align="center">
<td>第5节</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr align="center">
<td>第6节</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
三、html表单项：（注意命名可以传递内容）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张翰哲test(hanzhe.test.com)</title>
</head>
<body>
<form action="#" method="post">
<input type="hidden" name="123">
<label for="username">用户名：</label>
<input type="text" name="username" id="username"><br>
<label for="password">密码</label>
<input type="password" name="password" id="password"><br>
性别：
<input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
<br>
爱好：
<input type="checkbox" name="hobby" value="1"> 旅游
<input type="checkbox" name="hobby" value="2"> 电影
<input type="checkbox" name="hobby" value="3"> 游戏
<br>
头像：
<input type="file"><br>
城市：
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="hubei">湖北</option>
<option value="hunan">湖南</option>
<option value="heilongjiang">黑龙江</option>
<option value="taiwan">台湾</option>
<option value="Hongkong">香港</option>
<option value="xinjiang">新疆</option>
<option value="xizang">西藏</option>
</select><br>
个人描述：
<textarea cols="50" rows="5"></textarea>
<br>
<input type="submit" value="免费注册">
<input type="reset" value="重置">
<input type="button" value="一个按钮">
</form>
</body>
在web开发工具那里可以查看网页动态，传递表单的值可以显示。
四、css一点点内容
1、css是一门语言，控制网页表现。
2、css导入方式：
内联样式：
<div style="color:chartreuse">hello css green!</div><br>
内部样式：（头内定义样式，实际表现用标签显示）
<!--head内定义-->
<style>
<!--元素选择器-->
span{
color:blue;
}
<!--id选择器-->
#name{
color:red
}
<!--类选择器-->
.cls{
color:pink
}
</style>
<!--实际运用-->
<span>hello css blue!</span><br>
<span id="name">hello css red!</span><br>
<span class="cls">hello css pink!</span><br>
<span class="cls">hello css pink 2!</span>
外部样式：
<!--head内建立link-->
<link href="demo.css" rel="stylesheet">
<!--段落文本-->
<p>hello css brown!</p>
<!--配置css文件内容-->
p{
color:brown
}
五、JavaScript入门
JavaScript用来控制网页行为，使网页可交互，面向对象。
1、引入：
使用标签来编写代码块：
<!--直接标签引入-->
<script>
alert("hello js!")
</script>
<!--定位js文件-->
<script src="../js/demo.js"></script>
2、语法类似java，区分大小写，但语句不敏感。注释方式也一样，分单行和多行。
输出语句：(运算、流程控制基础不再赘述)
<script>
window.alert("hello js!");//写入警告框
document.write("I'm zhz!");//写入html页面
console.log("zhz is here!");//写入浏览器控制台
</script>
基础类型一个代码块解：
<script>
var test = 20; //全局变量
let show = 30; //局部变量（大括号代码块）
const PI = 3.14; //常量
var arr = [1, 2, 3];
// alert(test);
// alert(typeof test);
// alert(show);
function add(a, b) {
return a + b;
}
var multiply = function (a, b) {
return a * b;
}
// alert(add(1, 4));
// alert(multiply(4, 9.3));
// alert(arr);
arr.push(4);
arr.splice(0, 2);
// alert(arr);
var string = ' abc ';
// alert(1 + string.trim() + 1);
var person = {
name: "zhangsan",
age: 23,
eat: function () {
alert("干饭");
}
}
// alert(person.age);
// alert(person.name);
// person.eat();
</script>
3、BOM
window对象（浏览器窗口对象，具体方法可以去查）
几个重要方法：window.alert()、window.confirm()、setTimeout()、setInterval();
分别可以警告（带确认）、选择（确认、取消）、设定一段时间后动作、设定周期性间歇动作。
history：获取历史记录 location：地址栏对象（href：返回完整的URL）
4、DOM
可以通过DOM来改变静态的标签内容，检索元素并获取可以通过id、name、tagName等多种途径：
<img id="light" src="../img/off.gif"> <br>
<div class="cls">传智教育</div>
<br>
<div class="cls">黑马程序员</div>
<br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<script>
var img = document.getElementById("light");
// img.src="../img/on.gif"
// alert(img);
var divs = document.getElementsByTagName("div");
// alert(divs.length);
// for (let i = 0; i < divs.length; i++) {
// alert(divs[i]);
// divs[i].style.color = "red";
// divs[i].innerText = "hello!"
// }
var hobbies = document.getElementsByName("hobby");
for (let i = 0; i < hobbies.length; i++) {
// alert(hobbies[i]);
hobbies[i].checked = true;
}
var clss = document.getElementsByClassName("cls");
// for (let i = 0; i < clss.length; i++) {
// alert(clss[i]);
// }
</script>
DOM元素属性可以用来进行事件绑定，优化html的事件绑定方式：
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn"> <br>
<form id="register" action="#">
<input type="text" name="username" />
<input type="submit" value="提交">
</form>
<script>
function on() {
alert("我被点了");
} //html事件处理
document.getElementById("btn").onclick = function () {
alert("我又被点了");
} //用DOM来批量处理
document.getElementById("register").onsubmit = function () {
return true;
}
</script>
据此可以开展表单验证等一系列基础内容部署。
