【WEB】教我表弟学习HTML系列二
本帖最后由 wushaominkk 于 2018-6-23 14:03 编辑如果你是第一次来到此贴，请先往系列一的帖子看看，地址为：https://www.52pojie.cn/thread-752334-1-1.html
很高兴再次来写系列二教程，看到上次帖子底下的评论，集体来解答一次，写这一系列教程文章呢是从零开始学习html，现在只是在html阶段，如果楼主本人时间等等其他不冲突的情况下我会依次把系列出到html+CSS+Javascript这三个系列，html呢是用来搭建网站的基本框架的，后期装饰和交互呢要用到的是CSS+javaScript，所以建议大家只要把前面的基础打好，后面看到代码也就不会太难了。上篇呢我们学了html的基本部分，分别是由声明html版本，双标签html（网页的窗口）、万国码的书写、双标签title（网页的页头）、双标签body（网页的身体，内容显示区域），这几个部分组成，这次的内容呢带大家了解一下书写html用的软件、html的其他几个元素的构成等。让我们一起走进今天的核心部分。
写代码的软件呢会有很多很多，上篇中我们用到了记事本，在没有软件的情况下呢，记事本用来写html也比较合适的，但是对于我们初学者来说，用软件写呢，一方面呢增加大家对代码的更快熟悉性，第二方面呢能让大家对代码不会有那么多的排斥心理、也能更会的让我们喜欢代码，喜欢代码带给你的成就感。
软件介绍：Dreamweaver，简称“DW”，中文名称"梦想编织者"，是集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver CC 2017/64位下载地址：
链接：https://pan.baidu.com/s/1qXD9cPA 密码：n55k
Dreamweaver CC 2017/32位下载地址：
链接：https://pan.baidu.com/s/1eSs4Zr8密码：cy4v
安装步骤：1.右击软件压缩包，选择解压到“DWcc2017安装程序”选项
2. 双击打开Set-up文件
3. 需要获取一个Adobe ID 点击 获取 Adobe ID
4. 姓名随便写，需要是英文，邮箱也随便写，但要好记，因为一会还要用这个邮箱登陆。（邮箱是不需要验证的，这一步只是要通过这个Adobe ID 将软件成功安装上）密码(建议:Abcd123456）填完后点击 注册
.
5. 勾选同意条款，点击 接受
6. 之后安装程序会自动安装，默认安装目录：C:\Program Files \Adobe\Adobe Dreamweaver CC 2017（备注：安装路径位置是没有选项的）
7. 安装完成后，在弹出的窗口点击 登陆
8. 点击 开始试用（注：此时DW还是试用状态）
9. 点击开始试用后就会进入主界面，会显示7天的试用期（不用急，马上就破解）
10 .在附带的文件夹中打开 破解文件
11. 复制该文件
12. 找到刚才默认安装目录C:\Program Files \Adobe\Adobe Dreamweaver CC 2017）双击进入主文件夹,右击粘贴，弹出替换窗口，点击 替换目标中的文件
13. 在开始菜单中找到新安装的软件
14. 打开后DW试用期限消失，安装到此完成。
注意：以上软件安装教程来源网络，感谢那位分享的朋友，楼主只负责搬砖传达，相关软件版权问题有侵犯楼主不承担任何责任。
安装就绪以后我们打开软件，文件——新建文档——文档类型——选择HTML——右下角创建。
我们看到软件已经帮我们创建好一个基本的html基础框架了，是不是感觉轻松好多了，先保存一下文件，再开始我们今天的内容。
（还记得上期建立的那个站点（cousin）我们尽量保存在此文件夹下，方便我们后续的教程工作展开）
这是我们基础的html框架，今天正式来详细讲一下html的语法规则。
html的标签语言是什么？什么是标签HTML的标签放在小于号（<）和大于号（>）之间，一般我们叫做尖括号内。比如：<html></html><head></head>这些都是html的标签，但是标签按照标签数量还分为单标签和双标签两种。
双标签是由“起始标签”与“结尾标签”两部分构成，必须成对使用，缺一不可。其中起始标签是代替我们告诉web浏览器我们的行动从此开始，而结尾标签同样也是代替我们告诉web浏览器我们的动作在这里就结束。结尾标签必须要内加一个斜杠（/）和起始标签形成相对。这种标签的语法是：
<标签 属性="值">内容</标签> 。
<起始标签 我们要加的属性=（等号在这里是赋值）“我们要赋予的值”>要显示的内容</结尾标签>
我们再来看看单标签
单标签相对双标签还是很少的几个代码，因为它只需要单独使用就可以完整低表达意思。所有这类标签的语法是：<标签 属性="值">
相对的标签已经传达完毕，我们在书写的的时候一定要注意以下几项：
1. 所有的标签和属性，都使用小写的英文字母。标签之间禁止出现中文输入法输入。2. 所有的属性值要添加双引号。3. 标签是双标签的时候需先写开始和结尾标签后，在书写我们的里面的内容。反正后期代码量增大而出现的问题。4. 代码的编写规范需要从外到内，从左到右，先写标签在写属性。
今天拿以下内容来熟悉我们的标签使用
标题：我爱吾爱论坛，论坛是我家
内容：
欢迎每一位来到论坛的宝宝
请到来之前先看我们的基本规则【点击查看】
论坛2017TOP精华榜 【点击查看】
搜索 【百度一下你就知道】
吾爱论坛是个什么样的论坛？
1. 吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。
2. 里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。
3. 淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。
4. 里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
这是我们今天要用到的文字。我们就拿这些开启我们第二阶段的代码之路。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我爱吾爱论坛，论坛是我家</title>
</head>
<body>
欢迎每一位来到论坛的宝宝
请到来之前先看我们的基本规则【点击查看】
论坛2017TOP精华榜 【点击查看】
搜索 【百度一下你就知道】
吾爱论坛是个什么样的论坛？
1.吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。
2.里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。
3.淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。
4.里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。
5.吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
</body>
</html>
我们需要把标题写在标签标题内，把我们的内容写在body标签内，软件内按F12可以直接跳转到绑定的浏览器中，现在可以先去看看浏览器中的效果，可定呢是乱糟糟的效果，我们预想效果很定不是这样。
这个时候我们要加上我们今天使用的标签了
<h1></h1>
H1会根据h1到h6在网页中文字实现从大到小，并且加上此标签会自动进行换行。
<p></p>段落标签
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我爱吾爱论坛，论坛是我家</title>
</head>
<body>
<h3>欢迎每一位来到论坛的宝宝</h3>
<p>请到来之前先看我们的基本规则【点击查看】
论坛2017TOP精华榜 【点击查看】
搜索 【百度一下你就知道】</p>
<h3>吾爱论坛是个什么样的论坛？</h3>
<p>
1.吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。
2.里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。
3.淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。
4.里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。
5.吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
</p>
</body>
</html>
这是我们加上以后的效果。我们保持浏览器中打开看看
有点像但是还差很多，需要换行的地方没有换行，我们在来加上换行标签<br>一起来看看加完以后的效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我爱吾爱论坛，论坛是我家</title>
</head>
<body>
<h3>欢迎每一位来到论坛的宝宝</h3>
<p>请到来之前先看我们的基本规则【点击查看】<br>
论坛2017TOP精华榜 【点击查看】<br>
搜索 【百度一下你就知道】</p>
<h3>吾爱论坛是个什么样的论坛？</h3>
<p>
1.吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。<br>
2.里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。<br>
3.淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。<br>
4.里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。<br>
5.吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。<br>
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
</p>
</body>
</html>
在需要换行的地方放上我们的换行标签，但是记住br是一个单标签。
我的效果出现了，这时候我有个要求，我背景看到太白了，想要个其他颜色，应该怎么让他换个颜色呢，bgcolor背景颜色的属性，
我们需要加到标签上并且给予赋值为自己喜欢的颜色<body bgcolor="#26FF2A"><标签 背景颜色=“我们要给的颜色”
这样保存下来我们看到了，我们的背景颜色就为绿色。当我们代码在软件中码完bgcolor的时候软件会提示出代码，我们负责回车选择自己喜欢的颜色即可。
这里的代码和实际图就不发出了，直接调到下一个效果，给背景图插入图片
这是我们要放的图片，论坛的小伙伴需要拿一张自己的图片，格式可以为（jif、jpg、png），存储在我们的站点下方便我们调用，
<body background="01.png">
<标签 背景=“指定图片”>
默认图片为平铺显示的，像有些网页中的那些，大多数是因为图片的大小等于背景浏览器窗口的大小。需要注意的是背景图片存放处和我们的文件要处于一个兄弟级关系才可。
我们代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我爱吾爱论坛，论坛是我家</title>
</head>
<body background="01.png">
<h3>欢迎每一位来到论坛的宝宝</h3>
<p>请到来之前先看我们的基本规则【点击查看】<br>
论坛2017TOP精华榜 【点击查看】<br>
搜索 【百度一下你就知道】</p>
<h3>吾爱论坛是个什么样的论坛？</h3>
<p>1.吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。<br>
2.里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。<br>
3.淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。<br>
4.里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。<br>
5.吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。<br>
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
</p>
</body>
</html>
背景图片我们会插入了，要是在文本后加入图片我们应该怎么做？我们先把背景图片删掉。
这是我做完的效果图，我把图片放在了我们的第一句标题下，带大家先一起看看代码是怎么写的。
<h3>欢迎每一位来到论坛的宝宝</h3>
<img src="01.png" width="100px" height="100px">
<p>请到来之前先看我们的基本规则【点击查看】<br>
我在要插入图片的位置写了<img>的单标签，给予属性，并且给予属性图片值。后面的那两个代码大家可以先不考虑理解（因为我的图片像素太大，我就强制加了一个宽高为100px，就是100像素的大小图片，这个后面会讲到，这里我先调用一下）<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我爱吾爱论坛，论坛是我家</title>
</head>
<body>
<h3>欢迎每一位来到论坛的宝宝</h3>
<img src="01.png" width="100px" height="100px">
<p>请到来之前先看我们的基本规则【点击查看】<br>
论坛2017TOP精华榜 【点击查看】<br>
搜索【百度一下你就知道】</p>
<h3>吾爱论坛是个什么样的论坛？</h3>
<p>1.吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。<br>
2.里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。<br>
3.淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。<br>
4.里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。<br>
5.吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。<br>
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
</p>
</body>
</html>
相对除了加入固定地址链接以外，我们还可以在赋予值里面加入网页中的图片连接地址，比如我们去百度图片后，随便一张右键复制图片连接地址，粘贴在我们属性的赋予值中。这个我就不就行演示了，希望大家自己去试炼下。
网页中一个超级连接点击跳转的效果制作，我们把点击连接放在点击查看的内容中文字内。比如这样
<a href="https://www.52pojie.cn">【点击查看】</a>
我们在点击查看文字两侧加入了<a></a>超级链接跳转标签，可以看到我们加入了吾爱论坛的链接。
这是效果图，可以看到加入超级链接的文字显示颜色和周围文字还有区别，这时候只要我们点击一下，就可以跳转到吾爱的乱套首页。
最后我在加几个属性，我统一解释一下相关属性和赋予值，这是我们今天最好说到的一个效果图。
可以看到给每个点击查看，都加了跳转链接。吾爱论坛是个什么样子的论坛加粗，段落第一想进行下划线的处理。第二项进行了倾斜的处理。并且给图片也加了一个跳转链接的功能。在来一起看我们的代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我爱吾爱论坛，论坛是我家</title>
</head>
<body text="#F00647">
<h3>欢迎每一位来到论坛的宝宝</h3>
<a href="https://www.52pojie.cn/forum-13-1.html"><img src="01.png" width="100px" height="100px"></a>
<p>
请到来之前先看我们的基本规则<a href="https://www.52pojie.cn/thread-143136-1-1.html">【点击查看】</a><br>
论坛2017TOP精华榜 <a href="https://www.52pojie.cn">【点击查看】</a><br>
搜索<a href="http:www.baidu,com">【百度一下你就知道】</a></p>
<h3><b>吾爱论坛是个什么样的论坛？</b></h3>
<p>
<u>1.吾爱破解里面的程序员，大神，黑白帽子、非常对，当然，现在很多高校的计算机专业的学生也有很多在内。</u><br>
<i>2.里面的资源更新频繁，没一天的发帖量都有几千几千，单个板块内，主题有非常明确的分类。</i><br>
3.淘宝和其他网赚论坛，有很多东西在吾爱论坛破解搬运，偷过去的。<br>
4.里面的教程和软件还是比较安全齐全的，不过有些也是有利有弊。<br>
5.吾爱破解非常注重原创，非常尊重原创者，但是也打击那些在附件中夹杂病毒，盗取用户信息，或者留个人联系信息的行为。<br>
论坛三位老哥2008年3月13号创立。论坛成员团队，分别管理论坛各版块，留言，维护网站，系统维修等。
</p>
</body>
</html>
我们一起分析一下加过的标签属性说明，
<b></b>文字加粗
<u></u>文字加入下划线
<i></i>文字倾斜
<a href=“链接跳转地址”>文字或者图片</a>
<img src="图片地址，可以是网络，也可以为本地图片地址">
其实我们这次讲到的也并不是很多，主要还是希望大家在熟练软件的同时规范自己的代码写法顺序等，先打好基础，在做些有难度的就会理解很多。好了第二系列也就结束了，如果对本次教程有不会的可以在帖子下留言，楼主在线就会回答给你，多练多想多动手，要学会举一反三。写代码的虽无聊点，但是形成后的网页成就感的时候，那个时候是你这一天中最幸福的时刻。下期见，肯能现在内容比较枯燥点但是代码之路也希望大家坚持下来，多学一样东西，就少求他人一点。时间不冲突的话，下期也将会在三天后或者几天后发出，顺便祝大家端午节快乐。
ps：为了写教程，ps、dw双开电脑卡死关机很多次，路过就顶顶，谢谢大家的支持。
灰墨水 发表于 2018-6-15 21:31
https://download.csdn.net/download/qq_34038295/10416001
https://download.csdn.net/download/huakat ...
发错厂子了 不好意思 uwar123 发表于 2018-6-17 11:36
期待下一其，我也高考结束。，也想学习，哈哈
会尽更新的，这两天有点忙，推迟一下更新{:301_1010:} 本帖最后由 陌宇轩 于 2018-6-15 20:13 编辑
记住我们的宗旨学之所爱三字
码了一天文本字了，大家多多支持{:301_1009:} 谢了~很详细，喜欢的小白慢慢看 谢谢分享咯！改行了 不错，循序渐进，{:301_997:}谢谢指教！ 感谢分享优秀教程 这个教程不错~ 优秀的教程不错 不错,,,学习了