html是什么
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
http不是什么
HTML是一种标记语言（markup language），它不是一种编程语言。
HTML使用标签来描述网页。不像python编程语言一样，有逻辑什么的，这个标记语言是没有逻辑的
html标签： 超文本标记语言 就是标记用的
- <!DOCTYPE html>声明为HTML5文档。
- <html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）。
- <head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据，配置信息等，是给浏览器看的，你看到的是在body标签里面写的。
- <title>、</title>定义了网页标题，在浏览器标题栏显示。
- <body>、</body>之间的文本是可见的网页主体内容。
html 标签分类
内敛标签（行内标签）： 不独占一行 b\i\u\s\button\span\img\a
块级标签（行外标签）：自己独占一行
\h1-h6\br\hr\p\div
p标签:不能嵌套p标签,也不能嵌套块级标签
html常用标签
| 标签 |
意义 |
| <title></title> |
定义网页标题 |
| <style></style> |
定义内部样式表 |
| <script></script> |
定义JS代码或引入外部JS文件 |
| <link/> |
引入外部样式表文件 |
| <meta/> |
定义网页原信息 |
<meta>元素可提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键词
<meta>标签位于文档的头部，不包含任何内容
<meta>提供的信息是用户不可见的
meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> #如果把URL和后面的内容去掉，就是2秒钟刷新一次，这些内容了解一下就行
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微软的一个全新的浏览器,其实就是告诉IE浏览器，你按照最高标准来渲染我的页面，了解一下就可以啦
name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> #关键字，也就是别人是可以通过这些关键字搜索到我的这个文章的，搜索引擎就是能够这个content内容来帮别人搜索到你的这个文档的
#SEO就是做这个的，就是怎么让你们公司的网站在别人搜索的时候能够靠前显示，不算那个花钱的，百度是充值的，你冲个20w，别人可能一天就给你点击完了，特别的贵
<meta name="description" content="xxxxxpythonxxx学习"
img标签
<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">
src的路径又分为两种：网上的一个图片路径和本地的一个相对图片路径
a标签
<a href="http://www.baidu.com" target="_blank" >点我</a>
target_blank 以一个新的页面打开百度
href 超链接地址
target_self 当前窗口打得开百度页面
ul 标签 无序列表
<ul type="square">
<li>mike</li>
<li>hahah</li>
<li>shenji</li>
</ul>
type属性：
disc 实心圆点 默认值
circle 空心圆圈
square 实心方块
none 无样式
ol标签 有序列表
<ol type="A" start="2">
<li>heihei</li>
<li>haha</li>
<li>amy</li>
</ol>
type属性 ：start是从数字几开始
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
标题列表标签 就像大纲一样，有一个层级效果
<dl>
<dt>动漫 人物</dt>
<dd>玛卡<巴卡></dd>
<dt>剧情人物</dt>
<dd>汤波荔波</dd>
</dl>
特殊字符
| 空格(html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要这些特殊字符才能显示出空格效果) |
|
| > |
> |
| < |
< |
| & |
& |
| ¥ |
¥ |
| 版权标识（写公司网站的时候会用到） |
© |
| 注册（一个圆圈里面有个R） |
® |
表格标签
<table border="1px" cellpadding="10" cellspacing="20">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>alex</td>
<td>14</td>
<td>奥利给</td>
</tr>
<tr>
<td>mike</td>
<td>16</td>
<td>heiheihei</td>
</tr>
<tr>
<td>amy</td>
<td>17</td>
<td>mike</td>
</tr>
</tbody>
</table>
border 外边框的宽度
- border: 表格边框宽度.
- cellpadding: 内边距 （内边框和内容的距离）
- cellspacing: 外边距.（内外边框的距离）
- width: 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
input标签
- name：表单提交时的“键”，注意和id的区别
- value：表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本年内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
- checked：radio和checkbox默认被选中的项
- readonly：text和password设置只读 针对输入框
- disabled：所有input均适用 只能读不能写 但是有一个黑框效果 设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的
form 表单触发提交数据的操作 必须放在from表单里面 卸载外面就是普通按钮
<input type="submit">
<button>提交按钮</button>
checked 默认选中当属性名和属性值相同时 可以简写
<form action="http://127.0.0.1:9001">
用户名:<input type="text" name="username">
密码:<input type="password" name="password">
<input type="radio" name="sex" value="1">man
<input type="radio" name="sex" value="2">woman
<input type="checkbox" name="hobby" value="a"> 喝酒
<input type="checkbox" name="hobby" value="b"> 唱歌
<input type="checkbox" name="hobby" value="c"> 烫头
<!-- <input type="submit">-->
<button>提交按钮</button>
<hr>
<input type="date">
<input type="button" value="普通按钮">
<input type="reset">
<input type="file">
</form>
select 标签
<select name="city" id="" multiple>
<option value="1">北京</option>
<option value="2" selected>上海</option>
<option value="3">天津</option>
</select>
- multiple：布尔属性，设置后为多选下拉框，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
label标签
<label for="username">用户名</label>
<input id="username" type="text" name="username">
<label>
密码:<input type="password" name="password">
</label>
- label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本，那么和他关联的input标签就获得了光标，让你输入内容
- <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10">
默认内容
</textarea>
