HTML(HyperText Markup Language,超文本标记语言)是用于创建和描述网页的标准标记语言。他不是编程语言,而是通过标记标签来定义网页结构和内容的标记语言。
<html>
<head>
<title>这是一个页面</title>
</head>
<body>
hello
</body>
</html>
在VS Code中,创建xxx.html,直接输入!,可以自动生成代码的主题框架。
代码生成:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
常见标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
显示效果
<p>这是一个段落</p>
效果显示:
这是一个换行标签<br/>
这是一个换行标签<br/>
<!-- 写法一 -->
<img src="图片.jpg">
<!-- 写法二 -->
<img src="图.jpg" alt="这是一张图片">
<!-- 写法三 -->
<img src="图片.jpg" alt="这是一张图片" width="100px" height="100px">
效果显示
<!-- 写法一:在本页面跳转网页 -->
<a href="https://hao.360.com/?src=lm&ls=n009c1cd49d" > 搜索 </a><br/>
<!-- 写法二:在新建一个网页进行跳转-->
<a href="https://hao.360.com/?src=lm&ls=n009c1cd49d" target="_blank"> 搜索 </a><br/>
<!-- 空连接:使用#在href占位 -->
<a href="#"> 空链接 </a>
标签:
<body>
<body>
<!-- border:边框粗细
cellpadding:内容边距
cellspacing:单元格边距 -->
<table style="width: 100px;height: 150px;"
border="4px" cellspacing="10" cellpadding="30">
<!-- tr:表格行
td:单元格 -->
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<!-- 跨列合并 -->
<td colspan="2">b</td>
</tr>
<tr>
<!-- 跨行合并 -->
<td rowspan="2">c</td>
</tr>
<tr>
<td>d</td>
</tr>
</body>
结果显示:
用于创建交互表单,收集用户数据
分成两个部分
<form action="test.html" method="get">
内容
</form>
input:输入框(通过type属性定义类型)
文本框
<input type="text">
<input type="text" placeholder="请输入姓名">
结果显示:
密码框
<input type="password">
单选框
<input type="radio" name="gender" id="gender1" value="1"><label for="gender1">男</label>
<input type="radio"name="gender" id="gender2" value="2"><label for="gender2">女</label><br/>
效果:
多选框
<input type="checkbox" name="Evaluation" id="evaluation1" value="1"><label for="evaluation1">很好</label>
<input type="checkbox" name="Evaluation" id="evaluation2" value="2"><label for="evaluation2">一般</label>
<input type="checkbox" name="Evaluation" id="evaluation3" value="3"><label for="evaluation3">不好</label>
提交
<input type="submit" value="提交">
select标签:下拉菜单
<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
</select><br/>
结果显示
textarea标签:多行文本输入框
<textarea row="3" cols="40"></textarea>
结果显示:
div:块级元素,会独占一行,常用来做页面大结构
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color:rgb(216, 17, 17)
}
</style>
</head>
<body>
<div style="color: blue;">1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</body>
span:行内元素,不会独占一行,常用来包裹小段文本
<span style="color: blue;">1</span>
<span style="color: blue;">1</span>
<span>1</span>
案例:
用户注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action method="get">
<table>
<tr>
<td>用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
</table>
<input type="submit" value="注册">
<span>已有账号?</span>
<a href="#">登入</a>
</form>
</body>
</html>
CSS(Cascadong Style Sheets,层叠样式表)用于控制页面的样式,主要负责网页的视觉表现、包括布局、颜色、字体、间距等外观样式。HTML决定网页“有什么内容”,CSS决定网页内容“看起来什么样的”。
下面的布局就是由css控制的,而里面布局的内容是由html写的
<div style="属性">文本</div>
示例:
<div color:red>hello</div>
<div color:black>hello</div>
<div color:blue>hello</div>
结果显示
<style>
div{
属性;
}
</style>
<body>
<div>文本</div>
</body>
示例:
<style>
div{
color:aquamarine;
}
</style>
<body>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</body>
显示结果
<link rel="stylesheet" href="css外部文件">
示例:
<link rel="stylesheet" href="style.css">
<body>
<div>hello</div>
<div>hello</div>
<div>hello</div>
</body>
//style.css文件
div{
color: blueviolet;
}
在创建css外部文件时,可以先先直接写<link ret=""...>,在点击ctrl+clik自动创建外部文件
遵循就近原则
<style>
div{
color:aquamarine;
}
</style>
<body>
<div style="color: chocolate;">hello</div>
<div>hello</div>
<div>hello</div>
</body>
示例
<style>
#div1{
color: #ba1515;
font-size:large;
}
#div2{
width: 300px;
height: 200px;
margin: 50px;
padding: 20px;
border: 60px;
}
</style>
<body>
<div id="div1">hello</div>
<div id="div2">world</div>
<!-- <div id="div3">zhangsan</div> -->
</body>
结果显示
a{
属性;
}
div{
属性;
}
span{
属性;
}
.box{
属性;
}
示例:
<style>
.a1{
color:aquamarine;
}
</style>
<body>
<a class="a1">这个一个</a>
<div class="div1">这个一个</div>
<span class="a1">这个一个</span>
</body>
#a{
属性;
}
示例:
<style>
#a{
color:aquamarine;
}
</style>
<body>
<a id="a">这个一个</a>
<div id="a">这个一个</div>
</body>
</html>
*{...}
示例:
<style>
*{
color: rgb(17, 207, 67);
}
</style>
<body>
<a>这个一个</a>
<div>这个一个</div>
</body>
ul li{...}
示例:
<style>
ol li{
color:aqua;
}
</style>
<body>
<ol>
<li>这个一个li</li>
<li>这个一个li</li>
</ol>
</body>