本人使用的是sublime text3编辑器，这款软件的汉化破解版会随资料一起上传的😀
然后找到的一些比较好的博文同大家一起share！！！
Sublime text 3 汉化 破解版 分享
Sublime Text3快捷键大全
用sublime text3编写的html网页用浏览器打开出现中文乱码的原理及解决方法
目录
一、html基本结构
二、html基本标签使用
1、标题标签
2、段落标签
3、换行标签
4、字符实体
5、块标签
6、含样式和语义标签
7、图像标签
8、链接标签
9、列表标签
三、表格
四、传统table页面布局
一、html基本结构
直接在编辑器的开头输入！，然后按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>”内编写网页上显示的内容。
二、html基本标签使用
通过 <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>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
<img src="images/lyf.jpg" alt="刘亦菲" /><a>标签可以在网页上定义一个链接地址，它的常用属性有：
<a href="#"></a> <!-- # 表示链接到页面顶部 -->
<a href="/" title="baidu">百度</a>
<a href="2.html" target="_blank">测试页面2</a><ol><li>列表文字一</li><li>列表文字二</li><li>列表文字三</li>
</ol><ul><li><a href="#">新闻标题一</a></li><li><a href="#">新闻标题二</a></li><li><a href="#">新闻标题三</a></li>
</ul>通常用于术语的定义
<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>标签：声明一个表格，它的常用属性如下：
2、<tr>标签：定义表格中的一行
3、<td>和<th>标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下：
<!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>四、传统table页面布局
布局也可以叫做排版，它指的是把文字和图片等元素按照我们的意愿有机地排列在页面上，布局的方式分为两种：
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>
再来一张刘亦菲（这一张太太太好看了）
本文发布于:2024-01-31 19:01:15，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170669887530674.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
