HTML
HTML的概念
网页：由各种标记组成的一个页面就叫网页。
HTML:超文本标记语言,是一种用于创建网页的标记语言。网页文件的扩展名.html或.htm
HTML是一种标记语言，它不是一种编程语言。HTML使用标签来描述网页
html:负责描述文档语义的语言 html中除了语义什么都没有
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”
h1标签有什么作用？给文本增加主标题的语义
HTML的文档结构
<!DOCTYPE html> 声明为HTML5文档 <html lang="en"> 是文档的开始标记 <head> #<head>、</head>定义了HTML文档的开头部分。内容不会在浏览器显示 <meta charset="UTF-8"> #对于中文网页需要声明编码，否则会出现乱码 <title>Title</title> 定义了网页标题，在浏览器标题栏显示 <style> /*CSS代码*/ </style> <script> // JS代码 </script> </head> <body> #<body>、</body>之间的文本是可见的网页主体内容 </body> </html> 结束的标记
HTML标签是由尖括号包围的关键字，如<html>, <div>等
HTML标签通常是成对出现的，比如：<div>和</div>带/的是结束
也有一部分标签是单独呈现的，比如：<br/>、<hr/>、<img src="1.jpg" />等
标签里面可以有若干属性，也可以不带属性
标签的语法：内容部分会在浏览器上以标签制定的格式显示出来
<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />
重要的属性：
id：定义标签的唯一ID，HTML文档树中唯一
class：为html元素定义一个或多个类名（classname）(CSS样式类名)
style：规定元素的行内样式（CSS样式）
<!--注释内容--> 和python注释操作一样
HTML常用标签
head内常用的标签
<title></title> 定义网页标题 <style></style> 定义内部样式表 <script></script> 定义JS代码或引入外部JS文件 <link/> 引入外部样式表文件 <meta/> 定义网页原信息
Meta标签:<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name属性
1.http-equiv属性：它可以向浏览器传回一些有用的信息
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.name属性: 主要用于描述网页
<meta name="keywords" content="论坛,python，linux">
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、
体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）
boby内常用的标签
1.基本标签
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>
<br> 换行
<hr> 水平线
上标<sup> 下标<sub>
5<sup>2</sup>
8<sub>2</sub>
2.标题标签 h1~h6
<h1>标题1</h1> h1的字体最大 h6字体最小
3.段落标签
<p>段落标签</p> 自占一行,多用来表示大段的文本
align='属性值'：对齐方式。属性值包括：left、center、right
<p align="center">这是一个段落标签</p>
4.div标签和span标签：无默认样式,方便后期用CSS调整样式
div标签用来定义一个块级元素，并无实际的意义。
<div>天青色等烟雨</div>
<div>而我在等你</div> #各占一行
span标签用来定义内联(行内)元素，并无实际的意义。
<span>确认过眼神</span>
<span>我遇上对的人</span> #在同一行
5.超链接标签
超链接是指从一个网页指向一个目标的连接关系
URL是统一资源定位器，也被称为网页地址
<a href="http://www.oldboyedu.com">点我</a>
<a href="http://www.oldboyedu.com" target="_blank" >点我</a>
不加target或者target='_self'在本页面打开
_blank表示在新标签页中打开目标网页
<!--超链接锚点-->
返回页面顶部的位置
<a href="#">跳转到顶部</a> <a href="#d1">点我调到本页面ID为d1的标签那里</a> <div style="height: 1000px;</div> <h1 id="d1">我是id值是d1的标签</h1>
6.img标签
width：宽度
height：高度
title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。
align：指图片的水平对齐方式，属性值可以是：left、center、right
alt：当图片显示不出来的时候，代替图片显示的内容。
<img src="图片的路径" alt="图片的提示" title="提示信息" width="宽" height="高">
src可填网址，也可填路径。在图片不存在或加载失败时显示alt中信息。在鼠标放到图片时显示title中内容
(宽高两个属性只用一个会自动等比缩放)
<img width=400 src="IM.jpg" alt="图片加载失败" title="美女">
src属性：指图片的路径
图片的路径时，有两种写法：相对路径、绝对路径
相对路径： . 和 .. 分表代表当前目录和父路径 <!-- 当前目录中的图片 --> <img src="2.jpg"> <img src="./2.jpg"> <!-- 上一级目录中的图片 --> <img src="../2.jpg"> 绝对路径:以盘符开始的绝对路径 <img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
7.特殊字符
内容 对应代码
空格
> >
< <
版权 ©
& &
¥ ¥
注册 ®
在页面上显示"这是个<p>标签"
<div>这是个<p>标签</div>这样写时显示不出来<p>的
正确写法:<div>这是个<p>标签</div>
8.标签的分类
独占一行(块儿级标签):div h1~h6 p hr tr li
默认在一行展示(行内标签/内联标签):span a b/i/u/s img input
文本标签里只能放文字、图片、表单元素。容器级标签里可以放任何东西
9. 标签嵌套的规则
1. 行内标签不能包块儿级标签
2. p标签不能包div标签
<div>
<h1>缘分写在三生石上面</h1>
<div>圈圈圆圆圈圈</div>
</div>
一个段落里不能换行
列表
1.无序列表 ul
ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的
<ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> type属性： disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式）
2.有序列表 ol
<ol type="1" start="2"> #start起始大小 <li>第一项</li> <li>第二项</li> </ol> type属性： 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
3.标题列表 dl
<dl> <dt>标题1</dt> <dd>内容1</dd> <dt>标题2</dt> <dd>内容1</dd> <dd>内容2</dd> </dl>
表格<table>
一个表格<table>是由每行<tr>组成的，每行是由<td>组成的
<table> <thead> #表的开头 <tr> #存放字段 <th>序号</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> #表的内容 <tr> #存放内容 <td>1</td> <td>Egon</td> <td>杠娘</td> </tr> <tr> <td>2</td> <td>Yuan</td> <td>日天</td> </tr> </tbody> </table>
属性: border: 表格边框. cellpadding: 内边距 cellspacing: 单元格和单元格之间的距离 width: 像素 百分比.（最好通过css来设置长宽） rowspan: 单元格竖跨多少行 colspan: 单元格横跨多少列（即合并单元格） align：表格的水平对齐方式。属性值可以填：left right center bgcolor="#99cc66"：表格的背景颜色。 background="路径src/..."：背景图片 背景图片的优先级大于背景颜色
form表单
功能：
1.表单用于向服务器传输数据，从而实现用户与Web服务器的交互
2.表单能够包含input系列标签，比如文本字段、复选框(多选）、单选框、提交按钮等等
3.表单还可以包含textarea、select、fieldset和 label标签
表单属性
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。#输入自动补全
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。一般用post
novalidate 规定浏览器不验证表单。
<form action="http://127.0.0.1:8000/index/" method="post" autocomplete="off" enctype="multipart
input
type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框 <input type="password" />
email 邮箱
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" />
radio 单选框 <input type="radio" />
submit 提交按钮 <input type="submit" value="提交" />
reset 重置按钮 <input type="reset" value="重置" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" />
value="内容"：文本框里的默认内容（已经被填好了的）
button 普通按钮 通常用js绑定事件<input type="button" value="普通按钮" />
submit：提交按钮，传送当前表单的数据给服务器或其他程序处理
reset：重置按钮，清空当前表单的内容，并设置为最初的默认值
input两种默认显示文字方式
1.placeholder属性 规定帮助用户填写输入字段的提示，值不会被提交， 且该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
<input type="text" name="tname" placeholder="请在这里输入用户名">
2.value属性 规定 input 元素的值，值会被提交
<input type="text" name="tname" value ="admin">
用户登录页面
<form action=""> <p> <label >用户名： <input type="text" name="username"> </label> </p> #name：表单提交时的“键”，用户输入的内容作为value #还可添加默认值。在输入时默认值失效 在点击用户名时就会连接到输入框 <p> <label >密码： <input type="password" name="username"> </label> </p> #如果为文本类型，则密码是明文。此时是密文 <p> <label>邮箱: <input type="email" name="email" > </label> #必须有@ </p> <p> <label >性别： <input type="radio" name="gender" value="1" checked=''>男 默认选中 <input type="radio" name="gender" value="2">女 <input type="radio" name="gender" value="3">不详 </label> ##进行选择，只能单选 </p> <p> <label >爱好： <input type="checkbox" name="gender" value="basketball">篮球 <input type="checkbox" name="gender" value="football">足球 <input type="checkbox" name="gender" value="voallbe">网球 </label> </p> #多选 <p> <label >出生日期： <input type="date" name="birthday" > </label> </p> ##选择年月日 <p> <label >头像： <input type="file" name="head_img" > </label> </p> #上传头像 <p> <label > <input type="submit" value="点我立即注册"> <input type="reset" value="点我立即重置"> <input type="button" value="点我就点我"> </label> </p> #选择是注册还是撤销 </form>
select标签
下拉框选择:
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。
属性说明：
multiple：布尔属性，设置后为多选，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值
单选
<select name="book" > <option value="book1">围城</option> <select name="book" > <option value="book1">围城</option> <option value="book1">活着</option> <option value="book1" selected=''>大秦帝国</option> 默认选中 <option value="book1">平凡的世界</option> <option value="book1">穆斯林的葬礼</option> </select>
多选
<select name="book" multiple> <option value="book1">围城</option> <select name="tv" multiple> <option value="tv">唐人街探案</option> <option value="tv">泰囧</option> <option value="tv" selected=''>极限挑战</option> 默认选中 <option value="tv" selected=''>伪装者</option> 默认选中 <option value="tv">琅琊榜</option> </select>
多级选择
<select name="hobby4" multiple> <optgroup label="北京市"> <option value="bo">昌平区</option> <option value="bo">海淀区</option> <option value="bo">朝阳区</option> </optgroup> <optgroup label="上海市"> <option value="">浦东新区</option> <option value="">静安区</option> <option value="">普陀区</option> </optgroup> </select>
textarea多行文本
text就是“文本”，area就是“区域”。
<textarea name="memo" id="memo" cols="30" rows="10"></textarea>
属性说明：
name：名称
rows：行数
cols：列数
disabled：禁用 输入框不能操作
<p>个人简介:</p>
<textarea name="info" cols="30" rows="10">默认内容可以不写</textarea>
