HTML
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签(元素)
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容.
结构 
新建一个HTML文件，会自动生成初始代码
<!DOCTYPE html> <!--文档类型-->
<html lang="en"> <!--根标签-->
<head> <!--网页头部-->
<meta charset="UTF-8"> <!--国际编码UTF-8-->
<title>我的第一个HTML网页</title> <!--网页标题-->
</head>
<body><!--网页的主体 可视化区域-->
666
fde
</body>
</html>
HTML书写规范
1.名字用小写字母
2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文
3.驼峰命名
className 第二个单词首字母大写
4.id命名
id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样
5.class命名
class可以出现多次，而且相同的名字可以有多个，相当于人名一样
常用标签
标题标签（heard）(h + tab)
一般用在文章的标题，有h1~h6（h1标签，一个网页只能有一个）
<body><!--网页的主体 可视化区域-->
<!--标题标签-->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>
</body>
段落标签（paragraph）(p + tab)
会把HTML文档分成若干个段落
<body> <h2>段落标签</h2>
<p>我欲乘风归去</p>
<p>又恐琼楼玉宇</p><br>
<p>高处不胜寒</p><br><!--<br>标签是换行标签-->
<p>起舞弄清影</p> </body> -->
段落标签
我欲乘风归去
又恐琼楼玉宇 高处不胜寒 起舞弄清影
粗体斜体标签
粗体标签将文字加粗，斜体标签将文字倾斜
<body>
<h2>粗体标签</h2>
<!--b标签 只是物理加粗 strong 不仅加粗 还利于seo搜索-->
<b>我是b标签加粗</b><br><!--<br>标签是换行标签-->
<strong>我是strong标签加粗</strong> <h2>斜体标签</h2>
<i>我是i标签斜体</i><br>
<em>我是em标签斜体</em><hr><!--<hr>水平线标签--> <h2>粗体 + 斜体标签</h2>
<b><i>我是粗体加斜体标签</i></b><br>
<i><b>我是粗体加斜体标签</b></i>
</body> -->
粗体标签
我是b标签加粗
我是strong标签加粗
斜体标签
我是i标签斜体
我是em标签斜体
粗体 + 斜体标签
我是粗体加斜体标签
我是粗体加斜体标签
超链接标签，也叫a标签（a + tab）
用于网页之间的跳转，也可以作为锚点在页面内跳转
只有拥有name属性的a标签才有锚点
其他标签可以通过id属性实现锚点
target属性
_self 当前页面打开 默认
_blank 在新窗口打开
<body>
<h2>a标签</h2>
<!--href是a标签的标签属性-->
<a href="http://www.baidu.com">去百度</a><!--当前页面跳转（target=_self）默认-->
<a href="http://www.baidu.com" target="_blank">新页面跳转</a>
<a href="javasript:void(0);">死链接(不会跳转的链接)</a>
<a href="#">回到顶部</a>
</body>
a标签之间的跳转
<body>
<!--实现来回跳转-->
<a href="#wrap" name="box">我是顶部的锚点</a> .........(表示页面很长) <!--#固定写法，点击跳转到a标签name为box的位置-->
<a href="#box" name="wrap">锚点</a>
</body>
a标签跳转其他标签
<body>
<h2 id="hex">
我是h2标签
</h2> 。。。。。。 <a href="#hex">前往h2标签<a>
</body>
图片标签（img + tab）
用于向页面插入图片
src 定义图片路径 相对、绝对
alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上
width 定义图片宽度
height 定义图片高度
title 鼠标划入 有提示
当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小
<body>
<h2>引入图片</h2>
<img src="python.jpg" alt="错误路径" title="python" width="350" height="300"> </body>
列表标签
无序标签（ul>li*4 tab键 >这个后面 跟的是子元素 *代表前面的元素几个）
border-radius: 50%; #增加圆滑的视觉体验
<body>
<h2>列表</h2>
<h3>无序列表</h3>
<!--ul>li*4 tab键 >这个后面 跟的是子元素 *代表前面的元素几个-->
<ul type="circle">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul> <!-- type
disc 默认 小黑圆点 默认不写
circle 空心圆
square 小方框
--> </body>
<head>
<style>
li{
list-style: none;/*去掉列表li前面的默认符号*/
}
</style>
</head>
有序标签(ol>li{$}*4)
<body>
<h2>有序列表</h2>
<ol type="a">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<!--
1 1 2 3 4 默认
a a b c d
A A B C D
I
i
-->
</body>
自定义列表
<body>
<h2>自定义标签</h2>
<dl>
<dt>前端</dt>
<dd>html</dd>
<dd>css</dd>
<dd>js</dd>
</dl>
<dl>
<dd>前端</dd>
<dd>html</dd>
<dd>css</dd>
<dd>js</dd>
</dl>
</body>
div标签
用来分化一个一个的区域
文字标签
span标签是单纯的文字标签，只有配合css才有效果
块级元素（block）会自动换行，行内元素（inline）前后不会换行，
块级元素可以包含行内和块级行内元素包含文本和其它行内元素，不建议包含块级，
块级元素可以给宽高值，行内元素不行，
块级元素可以给上下外边框，行内元素不行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div_span</title>
<style>
div{
width: 300px;
height: 25px;
background: cornflowerblue;
}
span{
width: 300px;
height: 25px;
background: palevioletred;
}
</style>
</head>
<body>
<div>第一个</div> <!--div是一个块级元素，独自占一行,即display:block-->
<div>第二个</div>
<span>第1个</span> <!--span是行内元素，display:inline-->
<span>第2个</span>
<!--div独自占一行-->
<div>第三个</div>
</body>
</html>
块级元素div display:block;
可以包含任何块和行内元素
独占一行，支持设置宽高
如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度
没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0
行内（内联）元素span display:inline;
可以和其他行内元素位于同一行
行内元素不要包块级元素
不支持设置宽高
内容撑开宽高
如果既想设置行内元素，又想设置宽高：inline-block
<style>
div{
width: 50px;
height: 25px;
background: cornflowerblue;
display: inline-block;
}
span{
width: 50px;
height: 25px;
background: palevioletred;
display: inline-block;
}
</style>
行内块元素 display:inline-block;
块级元素可以横排展示
行内元素可以设置宽高
元素既能设置宽高 也能排在一排
display:none
隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了
特殊符号
<body>
<h2>特殊符号</h2>
<p>小于号：---<</p>
<p>大于号：---></p>
<p>空格符号：--- ---</p>
<p>空白位：--- ---</p>
<p>&字符：---&</p>
<p>版权符号：---©</p>
</body>
表格
table：表格标签
thead：表头标签
tbody：表身标签
tfoot：表脚标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!--边框-->
<table border="1">
<thead><!--表头位置-->
<tr><!--新开一行-->
<th>姓名</th><!--新开一列-->
<th>年龄</th><!--新开二列-->
<th>住址</th><!--新开三列-->
</tr>
</thead>
<tbody><!--表身位置-->
<tr>
<td>pywjh</td>
<td>18</td>
<td>武汉</td>
</tr>
<tr>
<td>wjh</td>
<td>18</td>
<td>重庆</td>
</tr>
</tbody>
</table>
</body>
</html>
可以head里面进行style装饰
<head>
<meta charset="UTF-8">
<title>table</title>
<style>
table{
border-collapse: collapse;
/*
collapse 边框合并，如果相邻的话，共用一个框
separate 默认值，边框分开，不合并
*/
/*文字水平居中*/
text-align: center;
}
</style>
</head>
列合并
<body>
<!--边框-->
<table border="1">
<thead><!--表头位置-->
<tr><!--新开一行-->
<th>姓名</th><!--新开一列-->
<th>年龄</th><!--新开二列-->
<th>住址</th><!--新开三列-->
</tr>
</thead>
<tbody><!--表身位置-->
<tr>
<td>pywjh</td>
<td rowspan="2">18</td><!--列合并-->
<td>武汉</td>
</tr>
<tr>
<td>wjh</td>
<!--<td>18</td>-->
<td>重庆</td>
</tr>
</tbody>
</table>
</body>
行合并
<body>
<!--边框-->
<table border="1">
<thead><!--表头位置-->
<tr><!--新开一行-->
<th>姓名</th><!--新开一列-->
<th>年龄</th><!--新开二列-->
<th>住址</th><!--新开三列-->
</tr>
</thead>
<tbody><!--表身位置-->
<tr>
<td>pywjh</td>
<td colspan="2">18</td>
<!--<td>18</td>-->
</tr>
<tr>
<td>wjh</td>
<td>18</td>
<td>重庆</td>
</tr>
</tbody>
</table>
</body>
表单
表单是搜集用户数据的各种表单元素的集合区域
用于搜集数据并向后台发送，前后交互的方式之一
常用于注册登录，搜索，文件上传
表单的属性：
action：提交时候的地址，默认使用当前页面
method：提交的方法，有get和post两种，默认使用get
entype：设置编码格式默认：application/x-www-form-urlencoded上传文件：multipart/form-data不建议使用：text/plain
表单中常用的标签：
input：表单中使用频率最高的标签，没有之一
input常用的type属性值：
text：文本框
password：密码框
radio：单选框
checkbox：复选框
file：文件选择
hidden：隐藏域
submit：提交
reset：重置
其他属性：
textarea：文本域，一般用于多行文本
select：下拉框，一般用于选项
表单中常用的标签：
fileset标签：给表单设置分组
legend标签：设置分组表单的标题
label标签：提高用户体验度
创建form表单（form + tab）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<!--创建form表单-->
<form action=""> </form>
</body>
</html>
登录页面
action：规定当前提交表单向何处发送表单数据
method： 提交方式get，post 默认get
autocomplete：on，off ，输入框自动完成，（on表示记住账号）
placeholder：输入框的提示信息
required：将输入框设置为必填
<form action="" autocomplete="on" method="post">
<!--action 规定当前提交表单向何处发送表单数据-->
<!--method 默认get post-->
<!--autocomplete自动完成，on输入框会提示 off输入框不会提示-->
<!--?name=value&name=value&name=on-->
账号：<input type="text" name="user" placeholder="请输入你的账号"><br>
密码：<input type="password" name="psd" required placeholder="请输入你的密码">
<!--required 必填字段-->
<br>
</form>
文件上传
<input type="file">
单选框
<!--name一样的才能多选一-->
<input type="radio" name="sex">男
<!--只有点到小圆圈才能勾选-->
<input type="radio" name="sex">女
<input id="secret" type="radio" name="sex" disable>
<!--disable禁止勾选-->
<!--用label标签通过id进行连通，达到点文字也能勾选的效果-->
<label for="secret">保密</label><br>
多选框（input + tab）
<input type="checkbox">抽烟
<input type="checkbox">喝酒
<input type="checkbox">烫头
<input id="crosstalk" type="checkbox" checked>
<!--checked 默认勾选-->
<label for="crosstalk">相声</label><br>
文本域（testarea + tab）
<head>
<meta charset="UTF-8">
<title>form</title>
<style>
textarea{
/*resize: horizontal水平;*/
/*resize: vertical垂直;*/
resize: None;
width: 200px;
height: 20px;
}
</style>
</head>
<body>
文本域：<textarea></textarea>
</body>
下拉框（select + tab）+ （option + tab）
喜欢的水果：<select name="fruit">
<!--size规定下拉列表中可见选项的数目-->
<!--selected 规定在option里面默认展示第几项-->
<option value="1">菠萝</option>
<option value="2" selected>西瓜</option>
<!--select 默认显示-->
<option value="3">苹果</option>
<option value="4">梨子</option>
</select><br>
提交
提交：<input type="submit" value="确认"><br>
重置
重置：<input type="reset">
