目录
前言
大二暑假在家，由于之前在学校做课设的时候，自己想做好看的界面，但总是在样式上调试很久，参考网上代码时也有些地方看不懂，想着系统复习和学习一下前端知识，希望能在以后的项目里熟练地写出好看的界面。为了记录我的学习过程也方便我以后查看，于是就有了在CSDN上写博客的想法。那现在就从HTML5开始吧！
一、HTML5简介
二、HTML5网页基本骨架
1.框架代码
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello world!
</body>
</html>
2.框架解析
定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。
body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。） 它会直接在页面中显示出来，也就是用户可以直观看到的内容。
三、HTML5基本标签介绍
一、标题标签
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。<h1> 定义最大的标题 <h6> 定义最小的标题。ps : 生成h1~h6快捷键： h$*6
<h1> 一级标题 </h1><h2> 二级标题 </h2><h3> 三级标题 </h3><h4> 四级标题 </h4><h5> 五级标题 </h5><h6> 六级标题 </h6>
二、标签之段落、换行、水平线
段落 ： <p></p>
换行 ： <br>
水平线 ： <hr/>
<p></p>
<br>
<hr color="" width="" size="" align=""/>
1 color ：设置水平线的颜色
2 width ：设置水平线的宽度
3 size ：设置水平线的高度
4 align ：设置水平线的对齐方式（默认居中），可取值 left | right
三、图片标签
<img> 是单标签，不需要进行闭合操作
<img src="" alt="" title="" width="" height="">
1 src ：路径（图片地址与名字）
2 alt ：规定图像的替代文本
3 width ：规定图像的宽度
4 height：规定图像的高度
5 title ：鼠标悬停在图片上给予提示
四、超链接
<a href="url">链接文本</a>
HTML使用标签 <a> 来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，
可以点击这些内容来跳转到新的文档。
属性：
在标签 <a> 中使用了 href 属性来描述链接的地址
默认情况下，链接将以，以下形式出现在浏览器中：
1 一个未访问过的链接显示为蓝色字体并带有下划线。
2 访问过的链接显示为紫色并带有下划线。
3 点击链接时，链接显示为红色并带有下划线。
表现：
当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。
五、文本标签
标签 描述
<em> 定义着重文字
<b> 定义粗体文本
<i> 定义斜体字
<strong> 定义加重语气
<del> 定义删除字
<span> 元素没有特定的含义
特别提示:
常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇
六、列表
1.有序列表
<ol>
<li>CSDN</li>
<li>B站</li>
</ol>
type属性
<ol> 的属性type 拥有的选项
1 1 表示列表项目用数字标号（1,2,3...）
2 a 表示列表项目用小写字母标号（a,b,c...）
3 A 表示列表项目用大写字母标号（A,B,C...）
4 i 表示列表项目用小写罗马数字标号（i,ii,iii...）
5 I 表示列表项目用大写罗马数字标号（I,II,III...）
2.无序列表
<ul>
<li>CSDN</li>
<li>B站</li>
</ul>
type属性
<ul> 的属性type 拥有的选项
1 disc 默认实心圆
2 circle 空心圆
3 square 小方块
4 none 不显示
ps ：快捷键 ：快速生成ul+li的布局：ul>li*3（数字根据自己的需要的li数量修改）
七、表格
水平合并：colspan
垂直合并：rowspan
<table>
<tr>
<td>CSDN</td>
<td>B站</td>
</tr>
<tr>
<td>阿里</td>
<td>京东</td>
</tr>
</table>
ps：快捷键：快速生成表格结构：table>tr*2>td{单元格}
八、form表单
表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。
所有的用户输入内容的地方都用表单来写，如登录注册、搜索框表单是由容器和控件组成的,
一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,
它能够容纳各种各样的控件。
<form action="url" method="get|post"name="myform"></form>
属性说明：
1 action服务器地址
2 name表单名称
3 method中Get和Post的区别：
1 数据提交方式，get把提交的数据url可以看到，post看不到
2 get一般用于提交少量数据，post用来提交大量数据
表单元素 ：
一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮
<form>
<input type="text">
<input type="submit">
</form>
文本框
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name: <input type="text" name="firstname">
<br>
Last name: <input type="text" name="lastname">
</form>
密码框
密码字段通过标签 <input type="password"> 来定义
<form>
Password: <input type="password" name="pwd">
</form>
提交按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。
表单的动作属性定义了目的文件的文件名。
由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
四、HTML5之路径
一、绝对路径
绝对路径是电脑的盘符存储与访问的具体地址
eg： E:\itbaizhanCode\1.jpg <img src="E:\itbaizhanCode\1.jpg">
二、相对路径
两者相对关系，两者在同⼀路径下可以直接访问
1 子级关系: /
2 父级关系: ../
3 同级关系: ./ （可以省略）
三、网络路径
网络路径
具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png
五、HTML5之块元素与内联元素
块级元素 内联元素
1.块元素会在页面中独占一行 1.行内元素不会独占页面中的一行，只占自身的大小
2.可以设置width，height属性 2.行内元素设置width，height属性无效
3.⼀般块级元素可以包含行内元素和其他块级元素 3.⼀般内联元素包含内联元素不包含块级元素
~ 常见块级元素 : div、form、h1~h6、hr、p、table、ul、等
~常见内联元素(行内元素) : a、b、em、i、span、strong 等
~行内块级元素（特点：不换行、能够识别宽高）： button、img、input 等
六、笔记总结
这个笔记内容中的“重点”和“轻点”是我根据自己的理解来的，有什么不足还请多多包涵~
2655
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
