想让你的网页变得整洁吗？找我就对了，当然你会认识几个新元素，和它们交朋友吧！

我帮你联系一下这几个新元素，这样交朋友就变得简单了

images里放着图片

 

以下是index.html的代码

 <html>
 <head>
 <title>Sagway'n USA</title>
 </head>
 <style>
 q{                <!--<q>标签是小引用(没有锁紧，自动加双引号)-->
 color: green;    <!--文字是绿色的-->
 }
 </style>
 <body>
 <h1>Segway'n USA</h1>
 <p>
 Documenting my trip around the US on way my very own.
 </p>
 <h2>June 2, 2012</h2>
 <img src = "images/trip.jpeg" title = "景点" alt = "经典" width = "200" height = "150">
 <p>
 My first day of the trip! I can't believe I finelly got evetything packed and reddy to go. Because I'm on a segway, I wasn't able to bring a whole lot with me:
 <!--无序列表-->
 <ul>
 <li>cell phone</li>
 <li>ipod</li>
 <li>digital camera</li>
 <li>a protein bar</li>
 </ul>
 Just the essentials.As Lao Tzu would have said, <q>A journey of a thousand miles begins with one step segway.</q>        <!--小的引用-->
 </p>
 <h2>July 14, 2012</h2>
 <p>
 I saw some Burma Shave stylesigns on the side of the road tody :
 <blockquote>        <!--大的引用(有缩进，没有双引号)-->
 passing cars, When you can't see, May get you, A glirupse, of eternity.
 </blockquote>
 I definely won't be passing any cars.
 </p>
 <h2>August 20, 2012</h2>
 <img src = "images/trip2.jpg" title = "我的车" alt = "我的车" width = "200" height = "150">
 <p>
 Well I made it 1200 miles already, and I passed through some interesting places on the way:
 <!--有序列表-->
 <ol>
 <li>Walla Walla, WA</li>
 <li>Magic City, ID</li>
 <li>Bountiful, UT</li>
 <br><!--换行-->
 <li>Last Chance, CO</li>
 <li>Why, AZ</li>
 <li>Truth or Consequences, NM</li>
 </ol>
 </p>
 </body>
 </html>

仔细阅读并且理解注释的意思。

li元素也可以单独使用，不过建议你不要这么做，因为模块化是个信仰

下面来看看模块化的网页有多整洁吧

你也可以自己设计一套模块

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处  by:M_ZPHr

最后修改日期：2019-01-16

 

#WEB安全基础 : HTML/CSS | 0x4HTML模块化的更多相关文章

  1. #WEB安全基础 : HTML/CSS | 文章索引

    本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...

  2. #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST

    HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...

  3. #WEB安全基础 : HTML/CSS | 0x10实现交互_表单

    先看看表单如何工作吧 请求   响应   简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件   这是显示   你可以向空白框框 ...

  4. #WEB安全基础 : HTML/CSS | 0x9美丽的饮料店

    我带着你,你带着钱,咱们去喝点饮料吧. 老板久仰你的大名,请你帮忙设计一个网站宣传他的饮料店 你要制定一个完美的方案还需要多学点东西 我先帮你设计一下 这是存放网站的文件夹 这是根目录   这是abo ...

  5. #WEB安全基础 : HTML/CSS | 0x8CSS进阶

    你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页   这是index.html的代码 <html> <head> <title ...

  6. #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证

    标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...

  7. #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站

    没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下

  8. Web前端基础(5):CSS(二)

    1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...

  9. #WEB安全基础 : HTML/CSS | 0x10.1更多表单

    来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...

随机推荐

  1. HotSpot 的垃圾收集器

    上图展示了7种作用于不同分代的收集器,如果两个收集器之间存在连线,就说明它们可以搭配使用,收集器所处的区域,则表示它是属于新生代还是老年代收集器. 并行(Parallel):指多条垃圾收集器线程并行工 ...

  2. Web发展简史（精编故事版，贤来给你讲故事）

    Web发展简史 一. Web发展简史之隔壁老王的故事 有一个人叫隔壁老王,老王有一个爱好就是爱看电影.有一天,这个隔壁老王想看一部电影,可是电脑里面存储的电影太多了,他费了老大劲才从里面找到,觉得很不 ...

  3. Linux rpm包安装不了

    有时候会发现安装rpm包时会报错,解决办法: 到rpm包所在目录执行 createrepo -v ./   这个命令 然后会生成一个repodate这个目录,然后在进行安装rpm就可以了!

  4. 如何解决git====push 过程中出现的。error: failed to push some refs

    当我们在利用git  push 文件到仓库时出现了一下问题: ! [rejected] master -> master (fetch first)error: failed to push s ...

  5. 一文了解Python中的判断语句

    判断(if)语句 目标 开发中的应用场景 if 语句体验 if 语句进阶 综合应用 01. 开发中的应用场景 生活中的判断几乎是无所不在的,我们每天都在做各种各样的选择,如果这样?如果那样?…… 程序 ...

  6. JavaScript逗号操作符

    今天在CSDN看到一篇文章http://www.csdn.net/article/2014-01-06/2818025-Useful-JavaScript-Tips-Best-Practices?re ...

  7. 08 训练Tensorflow下围棋

    这里介绍一下开源项目Mugo,它基于Tensorflow,可以使用sgf的棋谱训练围棋机器人,跟你下围棋,这里直接给出本人修改完善好的项目,只介绍一下用法. 链接:http://pan.baidu.c ...

  8. WebService SOAP

    <wsdl:definitions xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:wsdl="http:// ...

  9. 如何在Eclipse上使用SVN,安装、提交、拉取代码、解决冲突等操作

    https://blog.csdn.net/zhanlv/article/details/76504414 将SVN集成到Eclpise第一种方法第一种方法是通过zip文件在Eclipse中安装(本插 ...

  10. mysql滑动聚合

    滑动聚合是按顺序对滑动窗口范围内的数据进行聚合的操作.下累积聚合不同,滑动聚合并不是统计开始计算的位置到当前位置的数据. 这里以统计最近三个月中员工第月订单情况为例来介绍滑动聚合. 滑动聚合和累积聚合 ...