Day01---Web前端基础
1，换行，分割和超链接
换行命令：
分隔线命令：
超链接命令：
超链接有两种常用用法：页面跳转，下载文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--页面跳转: 如果href的值是网络地址，可以跳转到跳转到指定的网页-->
<a href="http://www.baidu.com">跳转到百度</a>
<!--页面跳转: 如果href的值是本地地址，则可以跳转到本地的内部网页 -->
<a href="11-超链接页面.html">跳转到本地页面</a>
<!-- 下载资源：当href的值是一个浏览器无法直接展示的内容格式时，浏览器会自动下载当前路径对应的内容 -->
<a href="./html.chm">点击下载手册</a>
<!-- 下载资源：当href的值是一个浏览器可以直接识别并展示的内容格式时，用户可以鼠标右键，对当前href的数值的内容进行另存为下载 -->
<a href="./goods.png">点击下载图片[鼠标右键,另存为]</a>
</body>
</html>
实际上页面跳转也是属于下载文件。因为用户能在浏览器里面看到的所有内容，实际上都是经过浏览器下载到本地，用户才能看到的。我们可以通过 F12-> 打开开发者工具 ->network（网络)
2，列表标签
列表标签是一种结构标签，可以让网页的内容形成列表格式。
列表标签在HTML中提供提供了4种：
- 无序列表（UnorderList，ul）
就是没有序号的，内容不分先后的列表。 - 有序列表（OrderList，ol）
- 定义列表（DefineList，dl）
- 菜单列表（Menu）
除了定义列表结构特殊以外，其他的3种列表都有列表项目（ListItem, li）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--无序列表, unordered list，简写: ul列表的单项 list item 简写：li-->
<ul type="circle">
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ul>
<!--有序列表, ordered list，简写：ol列表的单项 list item li-->
<ol>
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ol>
<!--和任何一个双标签一样，标签内部可以嵌套的标签来使用。-->
<ul><li>
<p>第一章：开端</p>
<ul>
<li>第一节：下山</li>
<li>第二节：命案</li>
<li>第三节：奇遇</li><li></li><li></li>
</ul></li>
</ul><dl>
<dt>赵本山</dt>
<dd>春晚常驻选手，国内一线大品牌</dd>
<dd>乡村爱情故事，二人转，小品</dd>
<dt>小明</dt><dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd></dl>
<!-- 菜单列表是HTML版本中新增的列表标签，实际上就是ul标签（无序列表） -->
<menu>
<li>首页</li>
<li>商品分类</li>
<li>购物狂欢节</li>
<li>会员中心</li></menu>
</body></html>
几种列表标签中最常用的只有ul ，当然也有新版本的menu标签。其他的2种标签（ol与dl），基本不使用。
3，表单标签
是HTML中最终的标签之一，主要是提供了输入框或按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定服务端程序中进行数据处理。
form标签
| 属性 | 描述 |
|---|---|
<action> |
设置当前表单的表单数据处理应用程序的url地址，默认值是当前url地址。 |
<method> |
设置当前表单的HTTP提供方式，默认是get。get，以查询字符串的格式，把表单数据附加在url地址栏上提交数据post，以数据包格式，把表单数据附在HTTP网络请求体中提交数据 |
<enctype> |
设置当前表单提交的数据格式，默认值是application/x-www-form-urlencoded。application/x-www-form-urlencoded：以普通表达数据格式提交multipart/form-data ：以多种数据格式提交text/plain：以纯文本数据格式提交 |
4，表单项标签
| 类型 | 用法 | 描述 |
|---|---|---|
| 单行文本框 | <input type="text" name="" value="" placeholder=""> |
name：设置输入框的值的变量名称，用于服务端接受数据。value：设置输入框的默认值。placeholder：设置输入框的提示内容。 |
| 密码框 | <input type="password"name="" value="" placeholder=""> |
只允许输入单行密码，属性描述同上 |
| 单行文本框（数值框） | <input type="number"name="" value="" placeholder=""> |
只允许输入数值内容，属性描述同上。就版本浏览器中不支持时会被默认为text单行文本框。 |
| 单行文本框（日期框） | <input type="date" name=""> |
只允许输入日期格式内容，属性描述同上。低版本浏览器中不支持时会被默认为text单行文本框。 |
| 单行文本框（时间框） | <input type="time" name=""> |
只允许输入时间格式内容，属性描述同上。低版本浏览器中不支持时会被默认为text单行文本框。 |
| 单行文本框（日期时间输入框） | <input type=""datetime-local" name=""> |
只允许输入日期时间格式内容，属性描述同上。低版本浏览器中不支持时，会被默认为text单行文本框。 |
| 文件上传框 | <input type="file" multiple name=""> |
multiple：布尔属性，允许一次性上传多个文件。其他属性描述同上。 |
| 单选框 | <input type="radio" name="" value=""> |
用于提供一组多个选择让用户选一个选项的按钮组。多个单选框必须name值相同才能为一组。同一组单选框中的value值必填，而且值要唯一。 |
| 多选框 | <input type="checkbox" name="fav" value="1"> |
用于提供一组多个选择让用户选多个选项的按钮组。多个多选框必须name值相同才能为一组。同一组多选框中的value值必填，而且值要唯一。 |
| 下拉列表 | <select name=""><option value="选项1值">选项1</option><option value="选项2值">选项2</option><option value="...">...</option><option value="选项n值">选项n</option></select> |
属性描述同上。 |
| 多行文本框/文本域 | <textarea name="" cols="" rows=""></textarea> |
cols：设置多行文本框默认列数[宽度]rows：设置多行文本框默认行数[高度]注意：多行文本框标签中的任意内容都会被原样记录。 |
| 提交按钮 | <input type="submit" value="提交"> |
value：表示当前按钮的提示文本。用于提交表单数据到action属性对应的地址中。 |
| 普通按钮 | <input type="button" value=""> |
属性描述同上，主要用于配合js完成网页特效。 |
| 重置按钮 | <input type="reset" value="重置"> |
点击以后，会把当前表单中用户输入的所有内容进行还原到页面刚刷新状态。 |
| 隐藏域输入框 | <input type="hidden" name="" value=""> |
隐藏域输入框的作用是附带一些默认数据提交给服务端，但是不希望用户看到。 |
表单项的常用属性
| 属性名 | 描述 |
|---|---|
| name | 表示当前表单项的值的变量名，用于提供服务端获取本次提交的数据项 |
| value | 表示当前表单项的值，如果值在代码中提前设置了，则为默认值 |
| type | 表示input框的类型 |
| disabled | 布尔类型，设置当前输入框是否被禁用 |
| maxlength | 设置当前输入框[textarea,input]中最大输入内容的长度 |
| multiple | 设置允许文件上传框选择上传多个文件 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post" enctype="multipart/form-data">
<input type="hidden" name="hide" value="1.0">
<label>账号：
<input type="text" name="username" value="root" disabled placeholder="请输入账号">
</label><br>
<label>密码：
<input type="password" name="password" value="" maxlength="16" placeholder="请输入密码">
</label><br>
<label>年龄：
<input type="number" name="age" value="" placeholder="请输入年龄">
</label><br>
<label>出生年月<input type="date" name="born"></label><br>
<label>时间：<input type="time" name="time"></label><br>
<label>本地日期时间：<input type="datetime-local" name="datetime"></label><br>
头像[单文件]：<input type="file" name="avatar"><br>
头像[多文件]：<input type="file" multiple name="imgs[]"><br>
性别：<label><input type="radio" name="sex" value="1"> 男</label>
<label><input type="radio" name="sex" value="2"> 女</label><br>
爱好：<label><input type="checkbox" name="fav" value="1">篮球</label>
<label><input type="checkbox" name="fav" value="2">足球</label>
<label><input type="checkbox" name="fav" value="3">排球</label>
<label><input type="checkbox" name="fav" value="4">水球</label>
<label><input type="checkbox" name="fav" value="5">气球</label><br>
城市：<select name="city">
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">唐山</option>
<option value="4">廊坊</option>
<option value="5">上海</option>
<option value="6">其他</option>
</select><br>
个性签名：<br><textarea name="description" cols="30" rows="10"></textarea><br>
<input type="submit" value="提交表单">
<input type="button" value="普通按钮">
<button><img src="goods.png" width="30" height="30" alt=""></button>
<input type="reset" value="重置表单数据"></form>
</body></html>
5，表格标签
表格系列标签主要是可以数据以表格的格式展示出来。但是现在table表格已经很少使用了，而是改成div+css实现更漂亮的表格。
| 标签 | 描述 |
|---|---|
<table></table> |
表示网页的一个表格，内部一般直接嵌套的是tr标签 |
<tr></tr> |
表示表格的一行，内部直接嵌套的只能是td或者th标签 |
<th></th> |
表示表格的表头的一个单元格，可以包含其他标签或内容 |
6，合并单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="800" border="1"><tr>
<!-- colspan 表示当前单元格[td,th]占据2列 -->
<th colspan="2">form标签属性说明</th></tr>
<!-- tr>th*2 -->
<tr><th>属性</th><th>描述</th></tr>
<tr>
<td>action</td><td>设置当前表单的表单数据处理应用程序的url地址，默认值是当前url地址。</td>
</tr>
<!-- tr>td*2 -->
<tr>
<!--设置当前单元格，占据3行的空间 -->
<td rowspan="3">method</td><td>设置当前表单的HTTP提供方式，默认是get。</td>
</tr>
<tr><td>get，以<b>查询字符串</b>的格式，把表单数据附加在url地址栏上提交数据</td></tr>
<tr><td>post，以<b>数据包</b>格式，把表单数据附在HTTP网络请求体中提交数据</td></tr>
<tr><td rowspan="4">enctype</td><td>设置当前表单提交的数据格式</td>
</tr>
<tr><td>application/x-www-formurlencoded：默认值，以普通表达数据格式提交</td></tr>
<tr><td><b>multipart/form-data</b>：以多种数据格式提交</td></tr>
<tr><td>text/plain：以纯文本数据格式提交</td></tr>
</table>
</body></html>
7，表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="1680" align="center"><tr><td>
<table align="center" width="1024"><tr><td><a href="">奥运首页</a></td>
<td><a href="">中国军团</a></td>
<td><a href="">赛程赛果</a></td>
<td><a href="">奖牌榜</a></td>
<td><a href="">诸强</a></td></tr>
</table></td> </tr> <tr>
<td><table width="100%" border="1">
<tr><td width="300">
<table><tr><td>全部赛程</td><td width="20%">更多 ></td></tr><tr>
<td colspan="2"><ul>
<li>中国对日本</li>
<li>韩国对日本</li>
<li>朝鲜对日本</li>
<li>俄罗斯对日本</li>
</ul></td>
</tr></table></td><td>
<img src="goods.png" width="100%" height="250" alt=""></td>
<td width="450">右</td></tr></table> </td> </tr></table>
</body>
</html>
早期的很多网页为了排版方便都是采用table布局（table标签来控制页面内容的排版），但是这种方式现在已经没有人使用了。而是改城了div标签+css样式来进行排版，这种方式更加容易入门，更加容易维护代码，更加美观好看。
8，媒体标签
之前说过所谓的超文本，就是超出文本范畴的文档，所以我们在网页编写过程中，经常也需要在网页中展示或播放一些媒体资源，例如：图片，音频，视频。
| 标签 | 描述 | 常见格式 |
|---|---|---|
<img src="" alt=""> |
图片 | png ，jpg/jpeg ，gif(动态图片格式)，svg ，webp ，tiff |
<audio controls autoplay><source src=""></audio> |
音频 | mp3 ，mpeg ，ogg ，wma，aac ，ogv |
<video width="" controls autoplay src=""></video> |
视频 | mp4 ，mpeg ，ogg ，ogv，mov ，flv， |
9，图片的类型
图片一般分2种类型：
矢量图：一种以线、面作为基本画面组织单位的图片。矢量图在放大缩小的时候，不会失真。常见的矢量图格式：cdr，svg格式。
位图：一种以像素(pixel)作为基本画面组织单位的图片。位图在放大缩小的时候，会失真，出现锯齿状边沿或出现马赛克。
常见的位图格式：png，jpg/jpeg，gif(动态图片格式)，webp，tiff
浏览器默认支持部分矢量和所有的位图的。像素，就是组成位图的最小画面组织单位，一个像素只能存储一种颜色。
位图按是否支持图层分2种。
支持图层：psd（photoshop designer），png，cdr，gif。 除了gif以外，其他几种常用于UI工作人员进行设计原稿的制作。
不支持图层：jpg/jpeg，webp，tiff。一般用于在浏览器中展示的。
位图按是否支持动画效果也分2种：动画图片：gif 其他图片都是不支持动画
位图按是否支持透明效果（alpha颜色通道），也分2种：
支持透明效果：png、gif、tiff，网页的背景一般经常会使用透明图片作为背景，特别是背景是非矩形。
不支持透明效果：jpeg/jpg，webp
10，视频
默认提供的视频标签仅仅是基于浏览器提供的视频内容的播放效果以及画中画效果，但是如果要实现视频播放过程中的多倍播放，封面图片，广告图片，弹幕，实际上都要通过js特效来实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video width="600px" controls autoplay src="assets/movie.ogv"></video><hr>
<video width="600px" controls autoplay src="assets/1.mp4"></video>
</body>
</html>
11，实体字符
在HTML网页中，因为标签本身占用了一些特殊符号，而且HTML代码中是不识别的空格的，所以如果我们要在网页中展示一些特殊符号或者空格，就需要使用实体字符（Character entities）。
| 实体符号 | 实体编码 |
|---|---|
| < | < |
| > | > |
| 空格 | |
| & | & |
| " | " |
| × | × |
| ÷ | ÷ |
| © | © |
| ® | ® |
