HTML
一、什么是HTML？
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一。
简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。
二、HTML的作用
用来开发网页
三、网页的组成部分
网页由HTML+CSS+js组成
- HTML:网页的骨架
- CSS：网页的颜色
- js：网页的动作
被称为前端三剑客 目的 为了写网页
四、工具介绍
python开发推荐推荐工具pycharm
网站开发推荐工具vscode
五、结构介绍
1. 生成结构
vscode会自动帮我们生成html结构
shift + ! 然后回车
2. 结构详情介绍
- html由标签和属性构成。
- 标签：长在尖角号后面的第一个单词就是标签
- 属性：长在标签后面的并且用空格隔开的，称作 属性
- 结构标签介绍
<!DOCTYPE html>
<html lang="en">
<!-- head包裹的称为头部区域 -->
<head>
<!-- 网页采用utf-8的编码格式 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网页标题 -->
<title>Document</title>
</head>
<!-- body包裹的称为内容区域 -->
<body>
</body>
</html>
四、网页中常见的标签
1. 标题标签
- h1标签
- h2标签
- h3标签
- h4标签
- h5标签
- h6标签
代码演示：
<body>
<h1>hello word</h1>
<h2>hello word</h2>
<h3>hello word</h3>
<h4>hello word</h4>
<h5>hello word</h5>
<h6>hello word</h6>
</body>
2. 段落标签
一般用来写文章段落
- p标签
<body>
<p>
这是一段优美的文章
</p>
</body>
3. 强调标签
- em标签：
作用：倾斜 - b标签：
作用：加粗
代码演示：
<body>
你们真<em>帅</em>
你们真<b>帅</b>
</body>
4. 换行标签
- br标签
代码演示：
<body>
窗前明月光<br>疑是地上霜<br>举头望明月<br>低头思故乡
</body>
5. hr标签
- hr标签
作用：标签变成分割线
代码演示：
<body>
你好呀
<hr>
哈哈
</body>
6. div标签
- div标签 是用来布局的，并没有语义，只是一个区块
<body>
<div>
这是个盒子
</div>
</html>
7. span标签
- 没有语义，一般用来包裹文字,让文字更好被选中。
<body>
<span>这是个盒子</span>
</html>
8. img标签(图片标签)
- 作用：插入图片
- 属性
- src: 引入图片路径
- alt: 对图片的描述
- height: 设置图片的高
- width: 设置图片的宽度
代码演示：
// 可以链接引入
<img src="https://image.baidu.com/search/detail?
ct=503316480&z=undefined&tn=baiduimagedetail&ipn=d&word=csdn&step_word=&ie=u
tf-
8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined©right=undefi
ned&cs=3710574112,2880096239&os=1416383172,4248936337&simid=3710574112,28800
96239&pn=2&rn=1&di=7214885350303334401&ln=1613&fr=&fmq=1684939880586_R&fm=&i
c=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face
=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=1e&objurl=https
%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%25
2F2021%252F1228%252F42dd5c8ej00r4t6c6000ld200u000iug00u000iu.jpg%26thumbnail
%3D660x2147483647%26quality%3D80%26type%3Djpg&rpstart=0&rpnum=0&adpicid=0&no
jc=undefined&dyTabStr=MCw2LDEsNCw1LDMsMiw3LDgsOQ%3D%3D" alt="">
// 也可以本地引入
<img src="./图片.png" alt="">
9. a标签
- 作用:点击跳转到另一个网页
- href：指定访问资源的URL
- target:指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开
代码示例：
<body>
<a href="https://baidu.com">点击当前页面跳转到百度</a>
<a href="https://baidu.com" target="_blank">点击重新打开页面跳转到百度</a>
</body>
10. 列表标签
- 有序列表 ol li
<body>
<ol>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
</body>
- 无序列表 ul li
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
11. 表单标签
在网页中主要负责数据采集功能
表单项(元素)：不同类型的input元素、下拉列表、文本域等
- input 标签
type属性： - text: 默认值、定义单行输入字段
<body>
输入文本: <input type="text">
输入密码: <input type="password">
</body>
- password：定义密码字段
<body>
<input type="password">
</body>
- radio：定义单选框
<!--单选框-->
<!--想要多个单选按钮互斥，需要把他们的name设为一样的-->
<!--要格外注意加value及对应的值，这样提交以后会把这个值提交进去，从而区分
是男是女-->
<body>
<input type="radio" name="gender" value="1" id="male">
<label >男</label>
<input type="radio" name="gender" value="2" id="female">
<label >女</label>
</body>
- checkbox：复选框
<body>
<input type="checkbox" name="hobby" value="1">旅游
<input type="checkbox" name="hobby" value="2">电影
<input type="checkbox" name="hobby" value="3">阅读
</body>
- button: 按钮
<!--按钮-->
<input type="button" value="一个普通按钮">
按钮: <input type="button" value="点击我" onclick="alert('按钮被点击了！')"><br>
<button>一个普通按钮的第二个写法</button>
- file：会将头像文件上传
<!--上传文件-->
<input type="file"><br>
- select :定义下拉列表，option定义列表项
<body>
<select
>
<option value="1">红色</option>
<option value="2">绿色</option>
<option value="3">黄色</option>
</select>
</body>
- textarea ：文本域
<body>
<textarea></textarea>
</body>
- color ：颜色
选择你喜欢的颜色: <input type="color" name="favcolor">
- data/datetime/datetime-local/month/time/week：时间类型
生日: <input type="date" name="bday"><br>
生日 (日期和时间): <input type="datetime" name="bdaytime"><br>
生日 (日期和时间): <input type="datetime-local" name="bdaytime"><br>
生日 ( 月和年 ): <input type="month" name="bdaymonth"><br>
选择时间: <input type="time" name="usr_time"><br>
选择周: <input type="week" name="year_week">
- E-mail：邮件
E-mail: <input type="email" name="usremail">
- number：数量
数量 ( 1 到 5 之间): <input type="number" name="quantity" min="1" max="5">
- range：滑动选择点
音量: <input type="range" name="points" min="1" max="10">
- search：搜索输入框
Search Google: <input type="search" name="googlesearch">
- tel：号码输入框
电话号码: <input type="tel" name="usrtel">
- url：地址输入框
添加你的主页: <input type="url" name="homepage">
- submit：提交按钮
提交按钮: <input type="submit">
- reset：重置按钮
重置按钮<input type="reset">
- image：上传图片
选择上传图片: <input type="image" src="./photo/常规方形logo 蓝底白字.png" width="50" height="36">
- hidden：隐藏（不常用）
<form action="submit.php" method="post">
<input type="hidden" name="hiddenField" value="hiddenValue">
<input type="text" name="visibleField" placeholder="可见字段">
<input type="submit" value="提交">
</form>
