1、HTML简介
超文本标记语言 要想让浏览器能够渲染出你写的页面 旧必须遵循HTML语法
浏览器看到的页面 都是HTML代码
HTML就是书写网页的一套标准
# 注释：注释是代码之母
<!--单行注释-->
<!--
多行注释
多行注释
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续查找
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->
<!--左侧菜单栏开始-->
左侧菜单栏的html代码
<!--左侧菜单栏结束-->
'''
HTML文档结构
'''
<html>
<head></head>:head内的标签不是给用户看的 而是定义一些配置主要给浏览器看
<body></body>:body内的标签 写什么就渲染什么用户就能看到什么
<html>
ps:文件的后缀名是给用户看的，只不过对应不同的 文件后缀名有不同的软件来处理
并添加很多功能
注意: HTML代码是没有格式的，可以全部写在一行都没有问题，只不过我们习惯了缩进来表示代码
两种打开HTML文件的方式
1、找到文件所在的位置右键选择浏览器打开
2、再pycharm内部 集成了自动调用浏览器的功能，点击即可 需要电脑安装
推荐使用谷歌浏览器
标签的分类
1、双标签
2、单标签(自闭和标签)
2、body内常用标签
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我真帅1</h1> 标题标签 1~6级标题
<h2>我真帅2</h2>
<h3>我真帅3</h3>
<h4>我真帅4</h4>
<h5>我真帅5</h5>
<h6>我真帅6</h6>
普通文本
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<p>段落标签</p>
<br> 换行
<hr> 水平分割线
<p>段落标签</p>
<div>div</div>
<span>span</span>
</body>
</html>
# 标签的分类2
# 1、块儿级标签:独占一行 h1~h6 p div
# 2、行内标签:自身文本多大就占多达 i u s b span
块儿级标签可以修改长宽 行内标签不可以 修改了也不会变化
块儿级标签内部可以嵌套 块儿级标签和行内标签
但是 p 标签虽然是块儿级标签 但是它只能嵌套行内标签 不能嵌套块儿级标签
如果你套了 浏览器会自动解开（浏览器是面向用户 不会轻易报错）
行内可以嵌套行内标签 但是没什么用
# 3、div span 两个标签是在构造页面初期最常使用的 页面的布局一般先用div span
占位之后再去调整样式 尤其是div使用非常的频繁
div可以看成是一块区域 也就意味着用div来提前规定所有的区域
之后往该区域内部填写内容即可
而普通的文本想先用span标签顶替
# 4、img标签 图片标签
<img src="" alt="" title="" height="" width="">
src:
1、图片的路径 可以是本地的也可以是网上的
2、url 自动朝该url发送get请求获取数据
alt:
图片加载不出的时候 给图片的描述信息
title:
当鼠标悬浮到图片上 自动显示的信息
height='800px'
width='600px'
高度和宽度当只修改一个的时候 另外一个参数会等比例缩放
如果你只修改了两个参数 并且没有考虑比例的问题 图片会造成失真
# 5、a 链接标签
<a href="" target="_self"></a>
当a标签指定的网址从来没有被点击过 那么a标签的字体颜色是蓝色
点击过了 会变紫色 浏览器记忆
href
放的是url 用户点击就会跳入网址
放其他a标签的id值 点击即可跳转到对应的标签位置
target
默认a标签是在当前页面完成跳转 _self
修改新建页面跳转 _blank
a标签的锚点功能
点击一个文本标题 页面自动跳转到对应区域内容
<table border="1px" width="500px" height="500px">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>智商</td>
</tr>
<tr><td>刘某</td>
<td>24</td>
<td>999</td>
</tr>
<tr><td>刘某某</td>
<td>25</td>
<td>999</td>
</tr>
</table>
标签具有两个重要属性
1、id值
类似于标签的身份证号 在同一个html页面上id值不能重复
2、class值
类似面向对象里面的继承 一个标签可以继承多个class值
3、head内常用标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> 网页标题
</head>
<style>
h1 {
color: red;
}
</style> 内部用css代码
<script>
alert(123) 弹出显示
</script> 内部用js代码
<script src="myjs.js"></script> 还可以引入外部文件js
<link rel="stylesheet" href="mycss.css"> 引入外部文件css
<meta http-equiv="refresh" content="2;URL="> 跳转对应网站
<meat name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meat name="description" content="老色批集中营"> 网页的描述信息
浏览器搜索的时候 只要输入了keywords后面指定的关键字那么该网页都有可能被百度搜索出来展示给用户
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,
网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,
网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<body>
</body>
</html>
4、特舒符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>好好学习，天 天向上</p>
1 > 2
2 < 3
我&你
你¥900
版权©特
商标®你
</body>
</html>
<!--  空格-->
<!--> 大于号-->
<!--< 小于号-->
<!--& &-->
<!--¥ ￥-->
<!--© ©-->
<!--® ®-->
5、表格标签table
<table>
<thead>
<tr>
<th>username</th> 加粗文本
<td>username</td> 正常文本
</tr>
</thead> 表头(字段信息)
<tbody></tbody> 表单（数据信息）
</table>
<table border="1"> 加外边宽
<td colspan="2">egon</td> 水平方向占两行
<td rowspan="2">dbj</td> 竖直放上占两行
原生表格标签很丑、但是后续使用框架
6、表单标签
能够获取前端用户数据(用户输入的、用户选择、用户上传等
<form action=""></form> 在该form标签内部书写的获取用户的数据都会被form标签
提交到后端
action：控制数据提交的后端路径（给哪个服务端提交数据）
1、什么都不写 、默认朝当前页面所在的url提交数据
2、写全路径：https://www.baidu.com朝百度服务器提交
3、只写路径后缀action='/index/'
自动识别出当前服务端的ip和port拼接到前面
host:port/index/
<label for="d1"> 第一种 直接将input框写在label内
username<input type="text" id="d1"
</label>
<label for="d2"></label> 第二种 通过id连接即可 无需嵌套
password<input type="text" id="d2"> 不和label关联也没有问题
input标签:类似于前端的变形金刚 通过type变形
text:普通文本
password:密文展示
date:日期
submit:用来触发form表单提交数据的动作
button:就是一个普通的按钮、本身没有任何功能 但是是最有用的 学完js后可以给它自定义各种功能
reset：重置内容
radio:单选
默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签属性值一样的时候可以简写
<input type="radio" name="gender" checked>男
checkbox:多选
<input type="checkbox" checked>dbj
file:获取文件
<input type="file" multiple>
select标签:默认是单选 可以加mutiple多选
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="">桥本环奈</option>
<option value="">小泽玛利亚</option>
</select>
textarea:获取大段文本
<textarea name="" id="" cols="30" rows="10"></textarea>
ps:能够触发form表单提交数据的按钮
1、<input type="submit" value="注册">
2、<button>点我</button>
ps:所有获取用户输入的标签 都应该有name属性
name就类似字典的key
用户的数据就类似于字典的value
<p>gender:
<input type="radio" name="gender" checked>男
<input type="radio" name="gender">女
<input type="radio" name="gender">其他
</p>