本人使用的是sublime text3编辑器，这款软件的汉化破解版会随资料一起上传的😀
然后找到的一些比较好的博文同大家一起share！！！
Sublime text 3 汉化 破解版 分享
Sublime Text3快捷键大全
用sublime text3编写的html网页用浏览器打开出现中文乱码的原理及解决方法
目录
一、html基本结构
二、html基本标签使用
1、标题标签
2、段落标签
3、换行标签
4、字符实体
5、块标签
6、含样式和语义标签
7、图像标签
8、链接标签
9、列表标签
三、表格
四、传统table页面布局
直接在编辑器的开头输入！，然后按Tab键，就可以将一下的内容不全~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。
通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3><p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开
注意：这个段落与段落之间是有空行的！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 </p> <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 页可以从一个网页链接跳转到另外一个网页。</p> </body> </html>在代码的段落中插入<br />来强制换行
<p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。 </p>代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> <p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p> 一个 ；大概是比一个空格少一点在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体 <!-- “<” 和 “>” 的字符实体为 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>1、<div> 标签 块元素，表示一块内容，没有具体的语义。 2、<span> 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
1、<em> 标签 行内元素，表示语气中的强调词 （加粗） 2、<i> 标签 行内元素，表示专业词汇 （斜体） 3、<b> 标签 行内元素，表示文档中的关键字或者产品名 （斜体） 4、<strong> 标签 行内元素，表示非常重要的内容 （加粗）
<img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
src属性 定义图片的引用地址 绝对地址：相对于磁盘的位置去定位文件的地址相对地址：相对于引用文件本身去定位被引用的文件地址，“ ./ ” 表示当前文件所在目录下，“ ../ ” 表示当前文件所在目录下的上一级目录 alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要 <img src="images/lyf.jpg" alt="刘亦菲" /><a>标签可以在网页上定义一个链接地址，它的常用属性有：
href属性 定义跳转的地址title属性 定义鼠标悬停时弹出的提示文字框target属性 定义链接窗口打开的位置 target="_self" 缺省值，新页面替换原来的页面，在原来位置打开target="_blank" 新页面会在新开的一个浏览器窗口打开 <a href="#"></a> <!-- # 表示链接到页面顶部 --> <a href="http://www.baidu.com/" title="baidu.com">百度</a> <a href="2.html" target="_blank">测试页面2</a>通常用于术语的定义
<dl>标签表示列表的整体
<dt>标签定义术语的题目
<dd>标签是术语的解释
一个<dl>中可以有多个题目和解释
<h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl>1、<table>标签：声明一个表格，它的常用属性如下：
border属性 定义表格的边框，设置值是数值cellpadding属性 定义单元格内容与边框的距离，设置值是数值cellspacing属性 定义单元格与单元格之间的距离，设置值是数值align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
align 设置单元格中内容的水平对齐方式,设置值有：left | center | rightvalign 设置单元格中内容的垂直对齐方式 top | middle | bottomcolspan 设置单元格水平合并，设置值是数值rowspan 设置单元格垂直合并，设置值是数值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <h1 align="center">表格</h1> <br> <table border="1" width="700" height="300" align="center"> <!-- 第一行合并了 --> <tr> <th colspan="5" height="20%" bgcolor="yellow">基本情况</th> </tr> <tr> <td width="15%">姓名</td> <td width="20%"></td> <td width="15%">性别</td> <td width="20%"></td> <td width="28%" rowspan="5"><img src="images/lyf.png" alt="刘亦菲"></td> </tr> <tr> <td>民族</td> <td></td> <td>出生日期</td> <td></td> <!-- <td></td> --> </tr> <tr> <td>政治面貌</td> <td></td> <td>健康情况</td> <td></td> <!-- <td></td> --> </tr> <tr> <td>籍贯</td> <td></td> <td>学历</td> <td></td> <!-- <td></td> --> </tr> <tr> <td>电子邮箱</td> <td></td> <td>联系电话</td> <td></td> <!-- <td></td> --> </tr> </table> </body> </html>布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
1、table布局：通过table元素将页面空间划分成若干个单元格，将文字或图片等元素放入单元格中，隐藏表格的边框，从而实现布局。这种布局方式也叫传统布局，目前主要使用在EDM(广告邮件中的页面)中，主流的布局方式不用这种。
2、HTML+CSS布局(DIV+CSS)：主要通过CSS样式设置来布局文字或图片等元素，需要用到CSS盒子模型、盒子类型、CSS浮动、CSS定位、CSS背景图定位等知识来布局，它比传统布局要复杂，目前是主流的布局方式。
table来做整体页面的布局，布局的技巧归纳为如下几点：
1、按照设计图的尺寸设置表格的宽高以及单元格的宽高。
2、将表格border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作用。
3、针对局部复杂的布局，可以在单元格里面再嵌套表格，嵌套表格划分局部的空间。
4、单元格中的元素或者嵌套的表格用align和valign设置对齐方式
5、通过属性或者css样式设置单元格中元素的样式（暂无）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人简历</title> </head> <body topmargin="0"> <!-- 顶格 --> <table width="800" height="700" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="260" valign="top" bgcolor="#f2f3f3"> <table width="220" height="440" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td height="100"></td> </tr> <tr> <td align="right"><img src="images/lyf.png" alt="lyf"></td> </tr> <tr> <th align="right" heigth="50">zhuzhu</th> </tr> <tr> <td align="right" heigth="30">2503756720</td> </tr> <tr> <td align="right" heigth="30">我是世界上最帅的人</td> </tr> </table> </td> <td width="30"></td> <td width="480" valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td height="10"></td> </tr> <tr> <td align="right"><img src="images/西瓜.png" alt="hahaha"></td> </tr> </table> <!-- <br> --> <hr> <table width="480" height="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><b>个人基本情况</b></td> <!-- <td></td> --> </tr> <tr> <td><b>姓名：</b>zhuzhu</td> <td><b>籍贯：</b>温州</td> </tr> <tr> <td><b>性别：</b>男🚹</td> <td><b>身高：</b>180cm</td> </tr> <tr> <td><b>民族：</b>汉族</td> <td><b>体重：</b>70kg</td> </tr> <tr> <td><b>出生年月：</b>1999.11</td> <td><b>电话：</b>12345678912</td> </tr> <tr> <td><b>专业：</b>ABC的</td> <td><b>地址：</b>温州</td> </tr> </table> <br> <table width="480" height="150" border="0" cellspacing="0" cellpadding="0"> <tr> <th>诗词</th> </tr> <tr> <td align="center">天若有情天亦老</td> </tr> <tr> <td align="center">人间正道是沧桑</td> </tr> <tr> <td align="center">风华秋月几时有</td> </tr> </table> </td> <td width="30"></td> </tr> </table> </body> </html>
再来一张刘亦菲（这一张太太太好看了）
