web ③：Write web pages in HTML (Review)

一、

上次，已经学习了一个最简单HTML文档的基本格式：

<!DOCTYPE html><html><head>
<title> (这里是窗口标题) </title>
< /head><body>
<h2> (这里是网页内容的一个标题) </h2>
<p> (这里是一个段落..... </p>
</body>< /html>

复习一下HTML“元素”的概念：

注： element 元素

二、

接下来首先在上述简单的HTML文档中加入两个内容：
超链接(用href标签)、
图像(用img标签)。

学习HTML就是学习一系列的“标签”。

HTML标签通常是**“成对出现的”(除少数特例以外)**。

例如：

<a>This is a link</ a>从开始标签<a>到结束标签</ a>，将在页面上创建一个以带有下划线的文字“This is a link”呈现的可点击的超链接。

注意：这个是带有下划线的！

三、

下面则是对上例的扩展，给标签增加了“属性”：

属性放在“开始标签”<a>里面(这个属性有点儿长)

用来说明点击这个链接时跳转到哪里：

<a href="http:/ /www.w3school.com.cn"> This is a link </a>

四、

下一个例子是在网页中加入一幅图像。

假设已有一个图片Lovely dog.jpg：

则下面用img标签把图像Love dog.jpg加入到网页的当前位置：

< img  src="Lovely dog.jpg"/>
其中的 src="Lovely dog.jpg" 也是属性，补充说明图像文件(路径)名。

接下来，再增加属性，进一步规定图像在浏览器中显示时实际的长宽(意味着可以按规定的尺寸自动缩放)：

<img src="Lovely dog.jpg" width="104" height="142" />

有了超链接、图像等，
原来的网页不再是纯文本，变成了“超文本”。

img标签只有开始标签而没有结束标签，因而在开始标签结束之前加了一个“/”表示标签结束，

<br/>、<hr/>都属于这种情况。

五、

关于“属性”，总结一下：
属性是紧跟在“开始标签”后面的末尽事宜。

元素、属性都是很重要的概念，不是要硬记，而是要理解。

从更宏观的角度说，这门课我们要学习的内容其中两部分是HTML和CSS(样式,即style)。

六、

现在开始学一点style叭

已知HTML就是一个标签的集合；
实际上CSS是样式的集合。

复习几个英文单词hhh：
image 图像。
font 字体(类似中文楷体、宋体)。
align 对齐。
underline 下划线。

下面，在保持前面作为例子的HTML文档内容不变的前提下，尝试为其**定义样式(style)**进而改变网页的外观，
也就是W3School网站中的如下内容：W3S style

七、

如何在HTML网页中加入样式？

方法之一是把样式定义为HTML标签的“属性”：

这是HTML标签<h1>...</h>括起来的一个HTML标题元素：
<h1>This is a heading</h1>

接下来的：

<h1 style= "text-align:center"> This is a heading </h1>

通过在开始标签处为该元素增加style属性，进而定义该HTML元素的样式。

八、

为HTML文档(网页)定义CSS样式可采用下列三种方法之一：

(1)把样式定义为HTML标签的“属性” — 内联样式；

(2)集中在HTML文档(网页)前面的部分定义样式 —内部样式表；

(3)HTML文档内没有样式定义，所有样式集中写入另一个“样式文件” — 外部样式表(stylesheet，扩展名.css)。

ps: 如果使用独立的外部样式表，
在HTML文档的部分应该明确“引用”外部样式表

九、

下面是用上述三种方法定义样式的例子：

（1）：

（2）：

额，这个（2）图中，样式定义里面的style=应该是敲错了，应该删掉，捂脸）

（3）：

十、

练习：

写一个简单的HTML文档并设想加入几个样式，分别写出含有内联样式的HTML文档、含有内部样式表的HTML文档、外部样式表(文件内容)。

emmm有关这个问题，xiao只写了一个文档，但是貌似这三种都有了？额，大概叭，hhh直接说叭，不改了

以下为我的代码:

<!-- 这是小袁做的第一个网页--><html>
<head>
<link rel ="stylesheet">
<style type = "text/css">
p1 {background-color : #E8E8FF}
</style>
</head>
<title>脱发小元宵</title>
<body background="http://img2.3lian.com/2014/f5/172/d/40.jpg"><h1 style="font-family:arial;color:red;text-align:center;">开心吖！</h1>
<p style="background-color:PowderBlue;margin-left:20px">美丽的地方，开心往前飞<br/>就算有亿万公里，一吨行李<br/>我们不放弃前进需要勇气<br/>一直往前飞，最重要开心就好<br/>忘记烦恼宇宙很大<br/>任飞翔，满载欢乐</p>
<br/>
<h2 Style ="font-family:times;text-align:center;">共同回忆一下雨巷</h2>
<blockquote cite="http://www.ccview.net/htm/xiandai/dws/dws001.htm">
撑着油纸伞，独自
彷徨在悠长、悠长
又寂寥的雨巷
我希望逢着
一个丁香一样地
结着愁怨的姑娘她是有
丁香一样的颜色
丁香一样的芬芳
丁香一样的忧愁
在雨中哀怨
哀怨又彷徨她彷徨在这寂寥的雨巷
撑着油纸伞
像我一样
像我一样地
默默彳亍着
寒漠、凄清，又惆怅她默默地走近
走近，又投出
太息一般的眼光
她飘过
像梦一般地
像梦一般地凄婉迷茫像梦中飘过
一枝丁香地
我身旁飘过这女郎
她静默地远了、远了
到了颓圮的篱墙
走尽这雨巷在雨的哀曲里
消了她的颜色
散了她的芬芳
消散了，甚至她的
太息般的眼光
丁香般的惆怅撑着油纸伞，独自
彷徨在悠长、悠长
又寂寥的雨巷
我希望飘过
一个丁香一样地
结着愁怨的姑娘
</blockquote>
<address>
Written by daiwangshu.<br/>
The title is 雨巷。<br/>
Visit us at:<br/>
http://www.ccview.net/htm/xiandai/dws/dws001.htm<br/>
</address>
<br/>
<h3>现在，大家来玩一个游戏吧！嘿嘿，我在下面写一行字，然后接着下面一行翻译，最后在网页中反向显示一行字，你们看一看呦~~</h3>
<p>①微笑永远是一个人身上最好看的东西。</p>
<p>②A smile is the most charming part of a person forever.</p>
<bdo dir ="rtl">③A smile is the most charming part of a person forever.</bdo>
<br/>
<h4 style="font-family:arial;color:red;text-align:center;">这里可以欣赏音乐：heal the world.(player: Michael Jackson)<h4/>
<a href="https://music.163.com/#/song?id=1698413" style="text-decoration:none">Heal The World</a><p>菜鸟小元宵的第一个网站就到此结束啦，期待以后会做的越来越好</p>
<p>捂脸），不要吐槽哦，都说了我很菜呀，hhh但是我在努力进步，正为一个更好的自己，奥利给！</p>
<br/>
<p1>***最后的最后，附上一张卑微小袁初入大学拍下的大学风景以及第一次在东北逛街的欢脱身影，希望在以后的日子里，无论遇到多大的难题，都可以保持“初生牛犊不怕虎”的勇气，永远阳光，乐观向上！***</p1>
<img src="http://img.mp.itc.cn/upload/20170714/2a5014f1bda24342a7e7d1019d100ad3_th.jpg" alt="阳光箫的快乐校园" width ="450">
<img src ="C:\Users\袁箫箫\Desktop\Hair Loss Xiao\Web\img\Yuan_Xiao_only.jpg" alt="活泼女孩" width="240">
<p>bye~~~</p></body>
</html>

貌似还可，hhh，就这样叭，如果你想看我写的这个网页具体什么样子，把最后一个照片改掉，改成你自己电脑上已有照片的地址名字，然后，，，其他的不用改，捂脸）因为其他的图片音乐都是在网上找的，你电脑上也有，复制粘贴到txt文档，保存，以html文件名结尾就可，就可以看啦~~~

貌似，还可以？？?
行叭，不啰嗦了，睡了睡了。。。

防秃头[社会社会]

web ③：Write web pages in HTML (Review)相关推荐

开课吧Web：学习Web前端技术有哪些好处？
虽然说钱不是万能的,但是没有钱却是万万不能的,虽然做什么都把钱放在第一位上,让人感觉有点俗,但是现实就是这样的,我们不管是上大学还是学习一个技术,都是为了能够赚更多的钱,拥有更好的生活环境,而在现如今 ...
MyEclipse教程：Web开发——创建Web片段项目
MyEclipse 在线订购年终抄底促销!火爆开抢>> MyEclipse最新版下载本教程向用户展示了使用关联的Web项目创建Web片段项目的机制. 用户还可以获得要检查的示例项目. 在 ...
美团开源Logan Web：前端日志在Web端的实现
来自:美团技术团队 2018 年,美团点评推出大前端日志系统-- Logan,并开源了 Android 与 iOS 端的 SDK.这次,我们又开源了在 Web 环境运行的 SDK.日志分析平台以及服务 ...
Martin Fowler谈《重构HTML：改善Web应用的设计》
Martin Fowler 谈<重构HTML :改善Web 应用的设计> 仅仅十余年, Web 就从一门大有希望的技术演变成了世界基础设施的重要组成部分.在这个绚丽迷人的年代中,涌现了许多 ...
世界知名XML专家力作 ——《重构HTML：改善Web应用的设计》
世界知名XML 专家力作 -- <重构HTML :改善Web 应用的设计> 媒体评论 Elliotte 的著作在我的书架上始终占据一席之地.--他通过本书把重构的益处带入了 HTML 世界 ...
[MOSS 译]如何：在WEB内容查询部件中使用自定义的字段
译者的话:数据视图可以很方便地来交叉或是使用单独的数据源来显示各种视图,但是对于开发人员来说,数据视图有一个不太方便的功能就是开发或是定制出的数据视图根本没有办法重用,你不能像使用WEB部件一样随意地 ...
pythonweb开发-手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
python web-手把手教你写网站：Python WEB开发技术实战
摘要:本文详细介绍了Python WEB开发的基础入门.以一个博客站点的开发为例讲解了基于Django框架开发WEB站点的全过程.通过本文的学习可以快速掌握基于Django的Python WEB的开发 ...
《Introduction to Tornado》中文翻译计划——第五章：异步Web服务
http://www.pythoner.com/294.html 本文为<Introduction to Tornado>中文翻译,将在https://github.com/alioth3 ...
PetShop4,错误提示：System.Web.Security.SqlMembershipProvider”要求一个与架构版本“1”兼容的数据...
错误提示: System.Web.Security.SqlMembershipProvider"要求一个与架构版本"1"兼容的数据库架构.但是,当前的数据库架构与此版本不 ...

web ③：Write web pages in HTML (Review)

web ③：Write web pages in HTML (Review)相关推荐

最新文章

热门文章