Html5基础
一、Html5标签
1.基础标签解释
| 标签 | 解释 |
|---|---|
| body | 身体标签 |
| DOCTYPE html | document:文档，type:类型，html5的标志 |
| html lang="en" | 告诉浏览前本页面是何种语言，提示用户是否需要翻译。 |
| meta charset="UTF-8" | 元标签，charset="UTF-8",设置字符类型为全体字符集 |
| title | 标题 |
| div | 无实意标签 |
| span | 无实意标签 |
| ul | 无序列表 |
| ol | 有序列表 |
| h1 | 一级标题 |
| h2 | 二级标题 |
| h3 | 三级标题 |
| h4 | 四级标题 |
| h5 | 五级标题 |
| h6 | 六级标题 |
| a | 超链接标签 |
| img | 图片标签 |
| table | 表格标签 |
| thead | 表格头部标签 |
| tr | 行标签 |
| th | 头部单元格标签 |
| tbody | 表格内容标签 |
| td | 表格内容单元格标签 |
| form | 表单标签 |
| label | 表单内部标签 |
| input | 输入框 |
| button | 按钮 |
代码展示：
<!-- 标签.html -->
<!-- document:文档,type:类型，html5的标志 -->
<!-- 结构和表现分离 -->
<!DOCTYPE html>
<!-- 告诉浏览前本页面是何种语言，提示用户是否需要翻译。 -->
<html lang="en">
<head>
<!-- 元标签，charset="UTF-8",设置字符类型为全体字符集 -->
<meta charset="UTF-8">
<!-- 标题 -->
<title>标签</title>
<script src="../js/v3.2.8/vue.global.prod.js"></script>
<link rel="stylesheet" href="css/标签.css"/>
</head>
<body>
<div id="app">
<!-- 无实意标签 -->
<div></div>
<!-- 无实意标签 -->
<span></span>
<!-- 无序列表 circle：圆形，disc：默认，square：方块 -->
<ul type="circle">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>
<!-- 有序列表 -->
<ol type="A">
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ol>
<ol type="A">
<li v-for="item in 30">{{item}}</li>
</ol>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签</p>
<hr>
<!-- 连接到外部资源：href,链接内部资源：src-->
<a href="http://www.baidu.com">百度</a>
<img src="http://36.137.167.83:9857/webstorm.png" alt="">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in tableRes" :key="index">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
</tr>
</tbody>
</table>
<form class="form" action="">
<!-- for的值与input的id一致 -->
<label for="username">
账号：<input id="username" type="text" v-model="username">
</label>
<label for="password">
密码：<input id="password" type="password" v-model="password" placeholder="请输入密码">
</label>
<label for="">
<input name="" type="number">
</label>
<label for="">
<input name="" type="date">
</label>
<label for="">
<input name="" type="time">
</label>
<label for="">
<input name="" type="search">
</label>
性别：
<label for="man">
<input id="man" name="gender" type="radio" checked>男
</label>
<label for="woman">
<input id="woman" name="gender" type="radio">女
</label>
<label for="">
邮箱：<input type="email">
</label>
<label for="">
<input type="button" value="提交" id="" @click="btn">
</label>
<label for="">
<input type="color">
</label>
<input type="submit">
</form>
<button>提交</button>
</div>
</body>
<script>
const App = {
data() {
return {
counter: 0,
tableRes: [
{
name: "王二小",
age: "18",
sex: "男"
}, {
name: "王小红",
age: "20",
sex: "女"
}, {
name: "王二小",
age: "16",
sex: "男"
}, {
name: "王小红",
age: "18",
sex: "女"
}, {
name: "王二小",
age: "19",
sex: "男"
},
],
username:"15865795240",
password:"asdekid254"
}
},
methods:{
btn(){
console.log("用户名"+this.username+"密码"+this.password);
}
}
};
Vue.createApp(App).mount('#app');
</script>
<style>
</style>
</html>
/* 标签.css */
#app{
width: 90vw;
height: auto;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #f2ecde;
border-radius: 20px;
box-sizing: border-box;
box-shadow: 0 0 20px #ccc;
}
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
margin: auto;
}
th,
td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
th {
background-color: #4caf50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.form {
width: 20vw;
height: 50vh;
display: flex;
margin: 0 auto;
flex-direction: column;
align-content: center;
justify-content: space-around;
}
二、CSS样式
三种样式表
外部样式表
<link rel="stylesheet" href="css/样式.css">头部样式表
<style></style>行内样式表
<div style="width:100px;height:100px"></div>
代码展示：
<!-- 样式.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式</title> <link rel="stylesheet" href="css/样式.css"> </head> <body> <div class="box"> </div> </body> </html>
/* 样式.css */
.box{
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 20px;
box-shadow: 0 0 10px #aaa;
box-sizing: border-box;
}
三、行块属性
一般将div改为：行内块属性
display:inline-block;
1.块属性：
div、ul、li、p、h1、h2、h3、h4、h5、h6、ol
独自占用一整行，可以设置宽高，默认宽度100%
2.行内标签：
span、a、em、strong
可以与其他标签共处一行，不可以设置宽高，其宽高由内容撑开
3.3.行内块属性：
input、img、button
既可以设置宽高，又可以共处一行
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行块属性</title>
<style>
div,span {
width: 100px;
height: 100px;
background-color: red
}
div{
display: inline-block;
}
span{
display: inline-block;
}
img{
width: 200px;
height: 100px;
}
</style>
</head>
<body>
一般将div改为：行内块属性
display:inline-block;
<!--行块属性分为三类：-->
<!--1.块属性：div、ul、li、p、h1、h2、h3、h4、h5、h6、ol——独自占用一整行，可以设置宽高，默认宽度100%-->
<div>kjfhjklsahfhds</div>
<div>mclksdjoiafjcsklmef</div>
<!--2.行内标签：span、a、em、strong——可以与其他标签共处一行，不可以设置宽高，其宽高由内容撑开-->
<span>dsafadfds</span>
<span>dasfdasjflkd</span>
<!--3.行内块属性：input、img、button——既可以设置宽高，又可以共处一行-->
<img src="uTools_1684133760546.png" alt="">
<img src="uTools_1684133760546.png" alt="">
</body>
</html>
四、浮动
解决多余空格，其他定位
不适应
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
#box {
width: 300px;
height: 50px;
background-color: red;
/*display: inline-flex;*/
}
#div1 {
width: 100px;
height: 50px;
background-color: yellow;
float: left;
/*display: inline-block;*/
}
#div2 {
width: 200px;
height: 50px;
background-color: green;
float: right;
/*display: inline-block;*/
}
</style>
</head>
<body>
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
浮动的定义：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框为止
</div>
</body>
</html>
五、定位
-
相对定位：
position:relative;
定位根据：组件原本的位置
并且占据原本位置
-
绝对定位
postion:absolute;
定位根据：距离最近的已定位父组件位置
-
固定定位
position:fixed;
定位依据：浏览器框
-
粘性定位
position:sticky;
作用：滚动到设定位置，进行绝对定位
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style>
div{
width: 100px;
height: 100px;
}
#xiangDui{
background-color: #4caf50;
position: relative;
top: 100px;
left: 100px;
}
#jueDui{
background-color: #0045aa;
position: absolute;
top: 100px;
left: 100px;
}
#guDing{
background-color: red;
position: fixed;
bottom: 100px;
right: 100px;
}
</style>
</head>
<body>
<div id="xiangDui"></div>
<div id="jueDui"></div>
<div id="guDing"></div>
</body>
</html>
六、在css样式：权重/优先级
id/class/tag/行内属性：权重/优先级
!important》10000
行内属性》1000
id》100
class》10
tag》1
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
