HTML
简介
HTML：超文本标记语言，几乎所有网站都是由HTML构建而成
它不是一门编辑语言，没有任何的逻辑，只有固定的标记功能。
🌼 1、标记分类
| 双标签 | <a></a> |
|---|---|
| 单标签 | <img/> |
🌼 2、HTML文档结构
<html>
<head>
编写给浏览器给的内容
</head>
<body>
编写展示给用户查看的内容
</body>
</html>
🌼 3、HTML语法注释
<!--单行注释-->
<!--
多行注释
多行注释
-->
在编写的时候 编程工具也有注释快捷键 ctrl+?
创建和展示
1、以pycharm为例，建立第一个html文档，建立完之后会自动有框架，如图
2、右上方会提供多种浏览器
head内常见标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name = "keywords" content = "judy">
<!-- keywords（关键字）; 用于告诉搜索殷勤，网页的关键字-->
<meta name = "keywords" content = "文科生 python">
<!-- description 用于告诉搜索引擎，网站内容的描述-->
<title>judy's first web</title>
<script>
// 这里插入js代码
</script>
<script src = "01.js">
// 可以引入外部的js文件
</script>
<style>
/*可以插入css代码*/
</style>
<link rel="stylesheet" href="02.css">
<!-- 通过link标签可以引入外部的css文件-->
</head>
<body>
</body>
</html>
body基本标签
h1-h6 标题标签
p 段落标签
b 加粗
i 斜体
u 下划线
s 删除线
br 换行
hr 水平分割线
🌼 标签分类
| 分类1 | 单标签：<meta> | 双标签：<title></title> |
|---|---|---|
| 分类2 | 块儿级标签：h1-h6或p 独占一行 | 行内标签：uisb 自身多大就占多大 |
特殊符号
 ； 空号
>； >
<；<
&；&符号
¥；¥
©；版权符号
®；注册
常见标签
网页在制作之前要提前制作好，所以我们需要提前布局好
| div | 块儿级标签 |
|---|---|
| span | 行内标签 |
🌼 注意点
1、块儿级标签，是可以无限嵌套块儿级标签和行内标签
特例：p标签虽然是块儿级标签但是不能嵌套块儿级标签
2、行内标签不能嵌套块儿级标签，但是可以嵌套行内标签
🌼 链接标签和图片标签
一、a标签-->链接标签
🌹 用法1: 通过href属性置顶网址（URL）点击跳转，跳转过程中有两种方式
（1）当前页面跳转 --> 默认
（2）新建页面跳转
🌹 用法2: 锚点功能
二、img标签-->图片标签
1、src属性置顶图片地址-->可以是本地的地址也可以是网络上的地址
2、alt属性编写文本-->用于在图片无法加载的时候写提示信息用的
3、title属性写文本-->用于鼠标悬浮在图片上之后提示的文本信息
4、heigt、width属性写像素-->用于调整图片的尺寸
需要注意的时候：修改一个另外一个自动等比例缩放
如果同时调整两个，那么可能会造成图片失真
标签的两大重要属性
1、id属性 个体查找 --> 类似于标签的身份证号，在同一个html页面上第不能重复
2、class属性 群体查找--> 类似于python面向对象类的继承，可以将多个标签划为一类
⚠️ 一个标签可以有很多类
列表标签
1、无序标签（很重要）
2、有序列表
3、标题列表
表格标签
当需要掌握一些具体固定格式的多条数据的时候可以考虑使用
🌼 表格标签的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>judy's first web</title>
</head>
<body>
<table>
<thead>
<tr> # tr表示一行
<th>name</th> # th在表头的字段名称
<th>age</th>
<th>job</th>
</tr>
</thead>
<tbody>
<tr>
<td>judy</td> # td是普通的单元格数据
<td>18</td>
<td>teacher</td>
</tr>
<tr>
<td>amber</td>
<td>20</td>
<td>worker</td>
</tr>
</tbody>
</table>
</body>
</html>
🌼 补充
border ：表格边框
cellpadding ：那边狂
cellspacing ：外边框
width ：像素 百分比
rowspan ： 单元格竖跨多少行
colspan ：单元格横垮多少列（合并单元格）
form表单
form表单用于获取用户的数据并发送给后端，比如网站的登录，注册，验证码等等。
🐒 1、input标签-->行内标签。
input语法格式-->在body标签内部：<input type="text">
通过type参数的不同变换不同的表现形式
| 参数 | 表现形式 |
|---|---|
| text | 普通文本 |
| password | 密文展示 |
| data | 日历展示 |
| radio | 单选>>>：多个选项标签需要有相同的name属性，默认选中添加额外配置checked="checked" 当属性名和属性值相等的时候可以简写checked |
| checkbox | 多选>>>：默认选中也是checked |
| eamil | 邮箱格式 |
| file | 上传文件>>>：默认只支持单个文件，如果需要一次性上传多个文件需要添加额外配置multiple |
| submit | 提交按钮>>>：点击触发提交数据的动作 |
| button | 普通按钮>>>：本身没有任何功能 |
| reset | 重置按钮，按钮组的提示信息通过value属性自定义，如果不自定义的话那么不同的浏览器会显示出不同的提示信息 |
🐒2、select标签-->下拉框选项
<select name="" id="">
<option value="sh">上海</option>
<option value="hz">杭州</option>
</select>
注意：一个表单就是一个option标签，如果想要多选就添加multiple属性
🐒3、 textarea标签-->获取大量文本内容
<textarea name="" id="" cols="30" rows="10"></textarea>
🐒 4、需要注意的点
（1）input标签需要格lable一起使用，否则会出现黄色阴影
方式1：able包裹input标签并且绑定id
<label for='d1'><input type="text" id="d1"></label>
方式2：label与input单独出现并绑定id
<label for="d1">username:</label>
<input type="text" id="d1">
5、form表单提交数据
action参数控制form表单数据的提交
action="URL" -->如果不写的话默认朝当前页面所在的地址提交
method="数据的提交方式"
数据的提交方式由很多种：get post put delete pacth
form表单在提交数据的时候，如果含文件则需要指定两个固定参数
method="post"
enctype="multipart/form-data"
⚠️：提交的时候各项标签里面必须有name和value 用户输入的值是存在value里面的
浙公网安备 33010602011771号