精品HTML教程之 [教我表弟学HTML] 系列一 [转载自吾爱论坛]

2018年6月15日 0 条评论 565 次阅读 4 人点赞
文章目录[隐藏]
前言:先讲一下我这个标题的故事,表弟确实存在,为什么会出这么一篇文章呢,主要是表弟高考结束后,老是跟我抱怨说他可能考不上大学,所以就来问我去技校学个什么专业好呢,听到他这句话的话的时候,我还是挺懵逼的,我跟他只说了三个字,学之所爱,让我想不到的是他要学计算机,跟我讲什么平常就喜欢打游戏呢,玩电脑呢,想去学计算机行业的东西,还让我教他点基础的代码,这让我顿时汗流直下,我一个打酱油的怎么会这么高级的东西,就赶紧去翻了翻笔记,看了看案例,一下子回想到了当初学习的感觉,言归正传,写这篇文章主要是送给在屏幕前想学习的各位,表弟我们之间可以面对面传授,因为我已经教他到第三天了,所以也整理出一下第一个第一天的一个系列,当然如果这个系列你们要是不喜欢看或者等等其他问题,后面的系列我也确实不会写了,我不会整理素材,整理文字,等等分享给不喜欢看的人。

正式开始我们的学习之旅,学习HTML系列一。

认识HTML

什么是html?html为一个前端语言,和它一起的还包括CSS和javascript三部分组成,这三部分也是我们要掌握的,才能写出一个很好的网页,包括大家上浏览器看到的360首页、百度首页、京东、天猫、包括咱们的葫芦侠首页等大小型网站也是可以用html搭建写出来的。后期用CSS装饰和Javascript的一个动效实现。还有个误区先说明,不一定不会英语就写不好或者说学不好代码的,这个是错误的想法,有些东西只要是你喜欢我相信你会克服一定困难而学好或者做好它。 在写之前我们先建立一个站点文件夹,取名为cousin(这个站点不允许建立在我的文档、系统C盘中,可以建立在D盘,E盘都可以),继续第二步右键建立一个文本文档,取名为index(首页),随后打开我们先写个HTML的一个基础部分;

这些就是一个基础网页html的基础构成部分,我们来一行一行解释一下。

<!doctype html> 感叹号(声明)doc(文档)type(类型)html(html5版本)。

浏览网站截图了一部分,包括360、百度、淘宝京东等各大网站的搭建很多都使用了HTML语言。

我们看到很多网页现在都用html5版本来写,这个具体也是因为版本越高功能越齐全。

<html></html>这是一对标签,夫妻缺一不可,我们看到一个放在代码开头,一个放在代码的结束,这个代表窗口的大小,通俗讲也是说我们所要让别人看到的界面大小,

<head></head> 页头(一对夫妻标签)

<title></title>标题(一对夫妻标签)

<body></bodu>身体,内容(一对夫妻标签)大家只要记住这几个代码所代表的内容即可,不用详细的搞清楚到底是什么什么。


重点也来说一下utf-8,俗称万国码,这个可以在浏览器页面中右键切换显示所有国家语言。找了一个列子带大家一起做做,让我们更熟悉今天所说的这些基础代码。

这段话是某个网页首页中的一个免责声明的一个相关内容。


免责声明本协议是您(用户)与xxx网站之间的协议,您在浏览xxx网站之前或下载安装xxxx软件之前需认真阅读(未成年人需在家长陪同下阅读)本协议,若您不接受本协议条款,请您立即终止浏览本网站及终止软件的安装使用。1、关于xxx网站及软件1.1xxx软件是基于xxx网站所展示的信息而开发的手机APP软件,xxxx软件与网站内容为相同数据。xxxx软件与xxxx在本协议中称为“本网站”或“本服务”。1.2本网站是一个游戏、工具、其他应用及用户经验的交流分享平台,所有内容均为用户分享,本网站不提供内容。2、用户使用规则2.1、 用户不得利用本服务制作、复制、发布、传播、存储含有下列内容的信息:(一)反对宪法所确定的基本原则的;(二)危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一的;(三)损害国家荣誉和利益的;(四)煽动民族仇恨、民族歧视,破坏民族团结的;(五)破坏国家宗教政策,宣扬邪教和封建迷信的;(六)散布谣言,扰乱社会秩序,破坏社会稳定的;(七)散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的;(八)侮辱或者诽谤他人,侵害他人合法权益的;(九)含有法律、行政法规禁止的其他内容的。2.2、用户必须清楚使用规则,本网站的服务仅供个人学习欣赏交流,非商业性质的使用,用户不可通过本服务从事任何商业目的的发行、传播活动。2.3、用户明白,用户使用本服务不得发布侵犯任何第三方作品的知识产权的信息。同时不得发布侵害第三方姓名权、名誉权、肖像权、隐私权等各类合法权益的信息。3、免责声明3.1用户明白,本网站的信息均由其他用户分享而来,本网站无法保证该等信息的准确性、完整性、可用性。3.2用户明白,本网站的信息均由其他用户分享而来,本网站无法判断用户分享的信息是否构成对第三方侵权,若用户通过本网站获取了第三方侵权的信息,应当立即删除或停止使用。3.3本网站不提供内容存储及下载,若由于第三方存储网站的原因导致用户无法上传或下载内容的,本网站不承担责任。3.4 若用户发布任何违法或侵犯第三方合法权益的信息的,由用户自行承担责任。3.5 本服务的提供受制于服务器、通讯网络的稳定性,若非本网站可控制的因素导致服务中断的,本网站不承担责任。4、账号注册4.1本网站及软件的部分功能的实现需要注册,成为注册用户后可以得到本网站更好的服务。4.2用户注册账号及账户内的道具、数据等用户拥有使用权,该等数据属于本网站的一部分,最终的权利归本网站。4.3 注册用户若违反本协议的约定的,本网站有权在不通知用户的情况下暂停或终止服务账号的使用。5、知识产权5.1本网站的名称、标识、UI、信息内容等受法律保护,任何人不得复制、模仿。5.2本软件程序受知识产权保护,任何第三方不得对本软件反向编辑、开发,在未经本网站同意下修改、发行本软件。5.3本网站内的软件、游戏、文字、图片等由其他用户上传,用户可浏览、下载使用,但不得从事侵犯知识产权的活动。5.4用户在分享游戏、软件链接地址时应当确认内容是合法的、不侵犯任何第三方知识产权的方可发布。5.5用户在浏览下载本网站其他用户分享的信息时,发现有侵犯他人知识产权的,请通知本网站,详见附件版权保护投诉指引。6、纠纷解决若用户与本网站发生任何争议的,用户可通过本网站客服通道提出及协商,若协商不成的,应当将纠纷提交至本网站所在地人民法院诉讼管辖。7、其他本网站有权对本协议做出修改,若用户的继续使用本网站视为接受更新后的协议,更新后的协议对双方继续具有约束力。 附:版权保护投诉指引1、本网站重视知识产权的保护,若本网站中用户分享的内容侵犯您的版权,请告知我们,若属于有效投诉,我们及时删除涉嫌侵权内容或链接。2、有效投诉至少应包含如下信息2.1权利人的权利证明,权利包含被投诉的信息;2.2 提供涉嫌侵权网页的URL地址,或者提供能够准确锁定涉嫌侵权内容的信息。3、投诉方式请将投诉信息发送至邮箱x'x'x'x'x'x'x'x'x'x'x'x'x@qq.com

如何把这段话呢呈现在一个网页中,我们一起做,我们一起学的做


这个呢是我们起始的代码,我们需要把内容复制添加在<body>与</body>标签中

粘贴好以后我们需要把其中的免责声明四个字放在我们的标题内。然后变成这样

我们想看下网页中实际实现的效果。乱糟糟的一片

这个确实不是我们想要的结果。

然后我们给内容加上相应的标签,让他像wps排版一样呈现在网页中,如果不加这些标签呢,我们这些文字也一样会呈现在网页中,但是让人看到时一段话,没有任何排版出现。会让人无法接受所讲内容我们来对应加上几个标签。

总共给内容加了两个标签【<h3></h3>】、【<h4></h4>】两个标签,分别是两个对应的文本标签。我们另存一下.看看效果如何。

文件-另存-保存类型为所有文件-改后缀为html-编码改为utf-8-保存。

然后就可以双击网页打开了,我们一起来看下效果。

最后网站中实现的结果也确实和wps排版一样。网页中真实显示的效果。这个系列一也将要结束了,只是带大家初次认识一下html的基础。

(如果大家喜欢想学,我会一次出下一个系列,直到讲完html和CSS,最后带大家一起做一个属于自己的个人网页。比如像各大官网,百度官网等大小型网页也都是最后可以码出实现的。)

大家如果这个系列一有不清楚不会的也可以问一下我,我在线不忙时也会跟各位讲清楚(补充一点很多电脑的文件后缀名都隐藏不显示了,很多时候我们都需要知道文本后缀名,怎么让他显示,大家就自行百度一下查看吧。不会我也没办法教其他内容了)

下一系列正在准备中,我会尽快更新。

文章转载自吾爱论坛,个人感觉比较好理解,由浅入深,适合自学.

刘晨

未来很明确,无需迷茫!

文章评论(0)

你必须 登录 才能发表评论