37. HTML
2024-03-17 本文已影响0人
薛东弗斯
image.png
body标签：页面内容
<!--HTML5版本的文档类型声明-->
<!DOCTYPE html>
<!--根标签，所有其他标签都必须放在html标签里面-->
<html lang="en">
<!--定义文档的头部，包括title标签、script标签、style标签、link、meta-->
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
</head>
<!--定义网页的主体内容，浏览器的显示内容都放在body内-->
<body>
HTML文档的主要部分，在此标记对之间可包含众多的标记和信息
</body>
</html>
p标签、span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<h1>这是一个标题</h1>-->
<!--<h2>这是一个标题</h2>-->
<!--<h3>这是一个标题</h3>-->
<!--<h4>这是一个标题</h4>-->
<!--<h5>这是一个标题</h5>-->
<!--<h6>这是一个标题</h6>-->
<p>这是一个文本标签</p>
<p>这是一个文本标签</p>
<p>这是一个文本标签</p>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
</body>
</html>
span 标签不换行，p标签会换行
h标签作为标题，也是换行的
a标签、链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.bilibili.com" target="_blank">打开哔哩哔哩网页</a>
</body>
</html>
target="_blank 用于打开新的网页、“打开哔哩哔哩网页”这里的文字部分用于点击链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="https://www.bilibili.com">
<img src="https://www.yuanrenxue.com/wp-content/uploads/2018/12/selenium-demo.jpg" alt="">
</a>
</body>
</html>
img标签包含在a标签内部，点击图片，就会跳转都a标签指定的网页
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li style="list-style: none">DOTA</li>
<li>LOL</li>
</ul>
</body>
</html>
ul标签：整块
li标签：列表子项
块状元素div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 200px;height: 200px;background-color: blue">
<div>我是一个div元素</div>
</div>
<div style="width: 200px;height: 200px;background-color: red"></div>
</body>
</html>
form表单
表单元素：首先是input标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<input type="text" placeholder="请输入内容">-->
<!--<input type="radio">按钮1-->
<!--<input type="radio">按钮2-->
<!--<br>-->
<!--<input type="button" value="提交">-->
<h2>登录</h2>
<form>
<div>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<select name="" id="">
<option value="">老师</option>
<option value="">学生</option>
</select>
</div>
<div>
<input type="submit" value="登录">
</div>
</form>
</body>
</html>
iframe 内联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="HTML_07.html" width="500px" height="500px"></iframe>
<iframe src="https://www.bilibili.com" width="500px" height="500px"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>IFRAME Tests</h2>
<input type="text" id="checkRecord" value="verify me"/><br/>
<input type="button" value="Click me" onclick="document.getElementById('checkRecord').value='1111'"/><br/>
<br/>
<iframe id="iframe_id" name="iframe_name" src="http://www.bilibili.com" height="300px" style="float:left;margin:20px;">
</iframe>
</body>
</html>
css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p style="font-size: 28px; color: red">这是一个没有id的p</p>
<p id="p1">id=p1的元素</p>
<p id="p2">id=p2的元素</p>
<p class="class1">class1的元素</p>
<style>
.class1 {
color: orange;
}
#p1 {
color: blue;
}
#p2 {
color: green;
}
</style>
</body>
</html>
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
text-align: center;
margin: 10px auto;
line-height: 100px;
}
.num {
width: 80px;
}
</style>
<script>
function add() {
let a = document.getElementById("num1").value
let b = document.getElementById("num2").value
document.getElementById("result").value = parseFloat(a) + parseFloat(b)
}
</script>
</head>
<body>
<div>
<input class="num" type="text" id="num1">
+
<input class="num" type="text" id="num2">
=
<input class="num" type="text" id="result">
<input type="submit" value="加法" onclick="add()">
</div>
</body>
</html>
