#WEB安全基础 : HTML/CSS | 0x4HTML模块化
想让你的网页变得整洁吗？找我就对了，当然你会认识几个新元素，和它们交朋友吧！
我帮你联系一下这几个新元素，这样交朋友就变得简单了
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模块化的更多相关文章
- #WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
- #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST
HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...
- #WEB安全基础 : HTML/CSS | 0x10实现交互_表单
先看看表单如何工作吧 请求 响应 简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件 这是显示 你可以向空白框框 ...
- #WEB安全基础 : HTML/CSS | 0x9美丽的饮料店
我带着你,你带着钱,咱们去喝点饮料吧. 老板久仰你的大名,请你帮忙设计一个网站宣传他的饮料店 你要制定一个完美的方案还需要多学点东西 我先帮你设计一下 这是存放网站的文件夹 这是根目录 这是abo ...
- #WEB安全基础 : HTML/CSS | 0x8CSS进阶
你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页 这是index.html的代码 <html> <head> <title ...
- #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证
标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...
- #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站
没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- #WEB安全基础 : HTML/CSS | 0x10.1更多表单
来认识更多的表单吧,增加知识面 我只创建了一个index.html帮助你认识它们 以下是代码 <!DOCTYPE html> <html> <head> <m ...
随机推荐
- Metasploit Framework（7）客户端渗透（下）
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 应用场景: Kali机器IP:192.168.163. ...
- Ｃ语言中assert()断言函数的概念及用法
断言函数的格式如下所示: void assert (int expression);如果参数expression等于零,一个错误消息将会写入到设备的标准错误集并且会调用abort函数,就会结束程序的执 ...
- 什么 是JavaScript中的字符串类型之间的转换问题详解？ 部分4
字符串类型 单双引号都可以!建议使用单引号!(本人建议:个人觉得单个字符串更利于网页优化@特别地方特别处理!); 判断字符串的长度获取方式:变量名.length html中转义符: < < ...
- Python档案袋（ 命令行操作 及 Os与Shutil文件操作补充 )
调用系统命令 import os #调用系统命令,输出只能输出到屏幕上,不能用变量接收 os.system("ipconfig") #调用系统命令,并把执行结果存到变量中 res= ...
- 第13组_16通信3班_045_OSPFv3作业
IPv6 路由-OSPFv3 实验目的 1. 掌握 OSPFv3 的配置方法 2. 掌握在帧中继环境下 OSPFv3 的配置方法 3. 掌握 OSPFv3 NSSA 的配置方法 4. 学会查看 O ...
- 浅谈工作单元 在整个 ABP 框架当中的应用
ABP在其内部实现了工作单元模式,统一地进行事务与连接管理. 其核心就是通过 Castle 的 Dynamic Proxy 进行动态代理,在组件注册的时候进行拦截器注入,拦截到实现了 Unit Of ...
- Linux系统 - 源码编译安装Nginx
什么是Nginx? Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器,在高连接并发的情况下N ...
- css笔记详解（1）
css讲解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先在我们学习css之前先来思考一个问题,为什么html标签上不直接 ...
- linux 命令 — sed
sed stream editor,流编辑器 查找替换 sed 's/pattern/replace_string/' file 替换每一行第一次出现的pattern,将替换后的文本输出到stdout ...
- MFC原理第三讲.RTTI运行时类型识别
MFC原理第三讲.RTTI运行时类型识别 一丶什么是RTTI RTTI. 运行时的时候类型的识别. 运行时类型信息程序.能够使用基类(父类)指针 或者引用 来检查这些指针或者引用所指的对象. 实际派生 ...