小生整理之前学习做过的笔记，分享出来，后续笔记会陆续整理出来，不喜勿喷~~~~~
如有错误，虔请各位大牛指正~~~
一、HTML5
1、HTML5概念及发展史
HTML（Hyper Text Markerup Language）超文本标记语言，特点是通过“<>”的形式，，将标签包围起来，可以设置对应属性，形成在页面中的结构部分。
HTML从最早的1993-6发布第一个版本，在1999-12-24年发布了HTML4.01版本，随着互联网移动应用的快速发展，在2013-5-6发布了HTML5版本，新增了部分面向移动终端的特性。
2、VScode开发者工具快捷键
VScode常用快捷键列表
- 代码格式化：shift+alt+f
- 向上或者向下移动一行：alt+up/down
- 快速复制一行代码：shift+alt+down
- 快速查找：ctrl+f
- 快速替换：ctrl+h
3、HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
该部分是主要完成页面显示功能，包括块级标签以及行级标签
</body>
</html>
4、HTML5基本骨架
4.1html标签
定义HTML文档，这个元素我们浏览器看到后就明白了这个是HTML文档，所以其他元素要包裹在他里面，标签限定了文档的开始点和结束点。
<!DOCTYPE html>
<html>
</html>
4.2head标签
head标签用于定义文档的头部，文档的头部描述了文档的各种属性信息，包括文档的标题、在web中位置以及和其他文档的关系相等，绝大多数文档头部包含的数据都不会真正的作为内容显示给读者。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
4.3body标签
body元素定义了文档的主体。
body元素包含文档的所有的内容（比如文本、超链接、表格、和列表等等）
他会直接在页面中显示出来，也就是用户可以直接看到的内容。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
我会显示在浏览器中喔~~
</body>
</html>
4.4title标签
- 可以定义文档的标题
- 他显示在浏览器窗口的标题栏或者状态栏上
- **
<strong>标签是</strong>**标签中唯一必须要求包含的东西，就是说写的head一定要写title - **
**的增加有利于优化SEO优化
SEO是搜索引擎的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求。
<!DOCTYPE html>
<html>
<head>
<title>第一个页面</title>
</head>
<body>
我会显示在浏览器中
</body>
</html>
4.5meta标签
meta标签是用来描述一个HTML网页的文档的属性，关键词等，例如：charset=“utf-8”，代表当前使用的书utf-8编码格式，在开发中我们经常会看到utf-8，或者是gbk，这些都是编码格式，通常使用utf-8。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>itbaizhan</title>
</head>
<body>
</body>
</html>
5、常用块级及行级标签
5.1 h1标题标签
标题标签从h1–h6，如果超出范围，浏览器会按照默认形式显示内容。该标签的特征，可以进行标签字体的缩放以及标签加粗显示效果，一般可以作为命名布局来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>内容</h1>
<h2>内容</h2>
<h3>内容</h3>
<h4>内容</h4>
<h5>内容</h5>
<h6>内容</h6>
</body>
</html>
5.2 段落标签
表示一个页面中的段落标签，会在上下产生间距。
<p>内容</p>
4.3换行标签
<br/>
br标签显示的效果与段落不同，该标签一般放在一个段落中作为内容间换行使用，因此不会产生上下的间距。
4.4水平线
从浏览器的左侧贯穿到右侧的一条灰色的水平线。
<hr/>
5.5字体样式
strong：代表加粗显示 em：代表斜体显示
加粗：<strong>...</strong>
斜体：<em>...</em>
5.6注释与特殊符号
- 注释：一般代表对某一段代码的解释说明。
- 特殊符号：为了避免出现很多无法预知的问题。
| 特殊符号 | 字符实体 | 示例 |
|---|---|---|
| 空格 | | 百度 新浪 |
| 大于号(>) | > | 如果时间>晚上6点，就坐车回家 |
| 小于号(<) | ⁢ | 如果时间早上7点，就走路上学 |
| 引号(‘’) | " | W3C规范中，HTML的属性必须用成对的"引起来 |
| 版权符号@ | © | ©；2003-2013 Jerry |
5.7图像与超链接
-
img：是image的简写，其中包含src(source)图片路径,alt代表图片无法显示时的提示内容，title表示鼠标悬停时显示的提示内容，width表示图片的宽度，heigth，图片的高度，默认的单位是px像素
<img src="path" alt="text" title="text" width="x" height="y" />src的选项包括：
-
绝对路径（不建议）
通过本地资源记载文件，例如c:\xxxx\xxx,jpg,如果图片或者盘符发生变化，就会导致图片无法加载。
通过网络的形式加载图片，又可能发生的情况是网络地址变化，或者是网站维护删除了图片，都会导致图片加载失败。
-
相对路径
从当前的文件作为相对参照物找到对应路径的位置，一般都没有盘符，直接通过文件夹的方式进行映射，如果是上层目录，可以使用“…/”返回上一级的目录。
-
-
a:超链接标签主要依靠与href（hyper refrence）属性实现超链接功能，如果没有添加href属性，最终的显示效果就是一个普通的文本，target属性代表要打开的网页形式。
-
target:
_slef:代表从当前的标签页打开
_blank:代表凶一个新的标签页打开
_name:使用iframe的名字打开对应的页面
<a href="path" target="目标窗口位置">链接文本或图像</a> -
普通超链接
-
锚连接
快速定位到当前页面中或者是其他页面的某个定位点，该定位点即为锚连接。
<a href="页面名称#锚点名称">锚点跳转</a> <a name="锚点名称"> 内容 </a> -
功能性链接
融合了系统调用的功能，比如下面的代码可以实现邮件的发送
<a href="mailto:xxxx@163.com">联系站长</a>
-
6.文本标签
| 标签 | 描述 |
|---|---|
| <em> | 定义着重文字 |
| <b> | 定义粗体文字 |
| <i> | 定义斜体文字 |
| <strong> | 定义加重语气 |
| <del> | 定义删除文字 |
| <span> | 元素没有特顶的含义 |
特别提示：
常用文本标签和段落是不同的，段落代表的是一段文本，而文本标签一般代表文本词汇
7、列表标签
-
7.1有序列表（order list）ol
有序列表是一列项目，列表项目使用的数字进行标记。有序列表始于/
- /标签。每个列表始于/
- /标签。
特别适合顺序导航、考试试卷、选择项等
<ol> <li>hello</li> <li>world</li> </ol>type属性
<ol>的属性type拥有的选项- 1代表列表项目用数字表示（123…）
- a表示列表用小写字母标号（abc…）
- A表示列表用大写字母标号（ABC…）
- i表示列表项目用小写罗马数字标号（i ii iii…）
- I表示列表项目用大写罗马数字标号（I II III…）
-
7.2无序列表（under list）ul
无序列表是一个项目的列表，此列表使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于
<ul>标签。每个列表项始于<li>标签。适用于整体页面的排版。菜单栏的功能设计。
<ul> <li>hello</li> <li>world</li> </ul>type属性
<ul>的属性type拥有的选项-
disc默认实心圆
-
circle空心圆
-
square小方块
-
none不显示
type属性已经废弃，在开发中尽量不要使用
-
-
7.3定义列表（defined list）dl
适合于一些解释性的场景。
对定义的内容进行解释，所以呈现的效果更加的是个一些商品的详情，论文设计，电子文稿等方面的布局。
<dl> <dt>标题</dt> <dd>内容</dd> </dl>
8、表格标签
表格：<table>
行：<tr>
单元格（列）：<td>
<table>
<tr>
<td>尚学堂</td>
<td>百战程序员</td> </tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>
-
表格属性
- border：设置表格的边框
- width：设置表格的宽度
- height：设置表格的高度
-
单元格合并属性
- 水平合并：colspan
- 垂直合并：rowspan
<tableborder="1"width="500px"height="200px"> <tr> <tdcolspan="3">单元格1单元格2单元格3</td> <td>单元格4</td> <td>单元格5</td> </tr> <tr> <tdrowspan="2">单元格6-11</td> <td>单元格7</td> <tdrowspan="3">单元格8、13、18</td> <tdcolspan="2"rowspan="2">单元格9101415</td> </tr> <tr> <td>单元格12</td> </tr> <tr> <td>单元格16</td> <td>单元格17</td> <td>单元格19</td> <td>单元格20</td> </tr> </table>9、表单
表单是作为客户端与服务端交互的重要的一种组件，其中包含了大量的表单元素
<input type="text" name="fname" value="text"/>属性 说明 type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认 name 指定表单元素的名称 vlaue 元素的初始值。type为radio时必须指定一个值 size 指定表单元素的初始宽度。当type为text或者password时，表单元素的大小以字符为单位。对于其他类型。宽度以像素为单位 maxlength type为text或者password时，输入的最大是字符数 checked type为radio或者CheckBox时，指定按钮的是否是被选中 9.1文本框
<input type="text" name="username" id="username" required placeholder="请输入 用户名" autocomplete="off" />9.2密码框
<input type="password" name="password" id="password" required placeholder="请 输入密码" />9.3复选框
弹琴<input type="checkbox" name="instr" value="playpiano" /> 吹牛<input type="checkbox" name="instr" value="chuiniu" checked /> 篮球<input type="checkbox" name="instr" value="basketball" />复选框：可以同时选中多个选项，但是选项要按组进行设置。同一组的name必须保持一致，表现值一般都是文本，真实值需要按照实际的需求进行设置。
9.4
男孩 <input type="radio" name="gender" value="boy" /> 女孩 <input type="radio" name="gender" value="girl" />单选框：同时只能多选其一，name也必须保持一致，如果出现不一致的情况，那么所有的单选框都可以被选中。
9.5
-
重置按钮
重置按钮要求放在表单中，可以将表单的元素内容恢复到初始化状态。
<input type="reset" value="重置" /> -
提交按钮
提交按钮也要放在表单中，可以将表单中的元素数据提交给服务器。
<input type="submit" value="提交"> -
图片按钮
替代提交按钮，使用图片的方式显示。
<input type="image" src="img/button.jpeg" /> -
普通按钮
该按钮默认情况下没有任何交互机制，需要结合JS实现交互功能。
<input type="button" value="这是一个按钮" onclick="show()" /> -
文件域
文件上传的组件。
<input type="submit" value="提交">当使用文件域时，由于文件可能是由音频、视频、动画等方式组成，所以在设置文件域时，需要设置提交的方式为post，还需要设置提交的内容为form-data。
<form action="index.jsp" method="post" enctype="multipart/form-data"> <input type="file" name="pic" /> </form> -
文本域
一个多行的文本框，能够通过cols设置宽度，通过rows设置高度。
<textarea cols="200" rows="20"> 购买协议：如果从本店购买的商品出现任何的质量问题，一概不换、不退，就这样， 咋滴吧！！！ </textarea> -
表单高级操作
-
隐藏域
当我们需要要将数据传输给服务器，但是又不想让用户看到，此时可以使用隐藏域
<input type="hidden" name="" value="必须有值" /> -
只读
如果在文本框上设置只读，就只能看到对应的内容，而无法更新修改
<input type="text" readonly /> -
禁用
如果在某个元素上添加禁用属性，会导致该元素无法使用
<input type="text" disabled /> -
标注
能够快速通过标签定位到所对应的表单元素上，形成焦点。
<label for="username">用户名</label> <input type="text" id="username" />for属性和id的属性必须对正！！！！！
-
10、媒体
-
音频
<audio src="音频路径" autoplay controls />src：对应音频的相对路径
autoplay：自动播放
controls：控制组件
-
视频
<video src="" autoplay controls />
11、内联框架
<iframe src="默认的页面地址" frameborder="0" scorlling="0" width="宽度" height=“高度" name="名字" /> <div class="left" style="width: 20%;float:left;margin-left: 20px;"> <ul> <li><a href="audio.html" target="showframe">百度</a></li> <li><a href="table.html" target="showframe">搜狐</a></li> <li><a href="表格.html" target="showframe">163</a></li> </ul> </div> <div class="right" style="width: 70%;float:left"> <iframe name="showframe" src="audio.html" frameborder="0" scrolling="yes" width="100%" height="500px"></iframe> </div> 内联框架适合于后台的管理系统布局
12、HTML5新增布局
元素名 描述 header 标题头部区域的内容（用于页面或者页面中的一块区域） footer 标记脚部区域的内容（用于整个页面或者页面的一块区域） section web页面中的一块独立区域 article 独立的文章内容 aside 相关内容或者应用（常用于侧边栏） nav 导航类辅助内容
es"
width=“100%” height=“500px”>
内联框架适合于后台的管理系统布局
12、HTML5新增布局
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或者页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或者页面的一块区域） |
| section | web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或者应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
6385
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
