HTML静态网页设计基础
如何新建一个HTML文件?
答:
1.新建一个TXT文件
2.打开TXT文件后,输入网页基本结构,另存为
可得到
回答over!下一步
html静态网页的基本结构,以及插入图片、插入超链接、分段、换行、标题号、表格标签。
<html>
<head>
<title>分页一</title>(标题号)
</head>
<body>
<h2>第二分网页</h2>
<img src="pics/pic1.png">(插入图片)
<br/>
<table border=1>(表格标签)
<caption>课程表</captiion>
<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th></tr>
<tr><td>微波技术</td<td>信号与系统</td><td>信息论与编码</td><td>通信原理</td><td>C++</td></tr>
<tr><td>信号与系统</td<td>微波技术</td><td>信息论与编码</td><td>C++</td><td>通信原理</td></tr>
</table>
<br/> <br/>(换行)
<p>.....</p>(分段)
链接:<br/>
<a href="index1.html">返回主页</a> <br/>(插入超链接)
</body>
</html>
例1:用记事本编写一个html静态网页(index.html),该网页有一个标题、一个图片、2个超链接(链接到2个分网页)。图片要放置到一个专门的子文件夹里。
代码:
<html>
<head>
<title>主页</title>
</head>
<body>
<h2>这是主页(翻转课堂一)</h2>
<img src="pics/pic0.png">
<br/>
链接:<br/>
<a href="page1.htm">第一分网页</a> <br/>
<a href="pages/page2.htm">第二分网页</a> <br/>
</body>
</html>
效果图:
例2:
两个分网页的编写。
(1)编写第一个html分网页(a1.html),该网页有一个小标题、一个图片、表格,返回主页的超链接。
(2)编写第二个html分网页(a1.html),该网页有一个小标题、一段文字(诗词)、一个图片、返回主页的超链接。图片要放置到一个专门的子文件夹里。
代码(1):
<html>
<head>
<title>分页一</title>
</head>
<body>
<h2>第二分网页</h2>
<img src="pics/pic1.png">
<br/>
<table border=1>
<caption>课程表</captiion>
<tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th></tr>
<tr><td>微波技术</td><td>信号与系统</td><td>信息论与编码</td><td>通信原理</td><td>C++</td></tr>
<tr><td>信号与系统</td><td>微波技术</td><td>信息论与编码</td><td>C++</td><td>通信原理</td></tr>
</table>
<br/> <br/>
链接:<br/>
<a href="index1.htm">返回主页</a> <br/>
</body>
</html>
代码(2):
<html>
<head>
<title>分页一</title>
</head>
<body>
<h2>第一分网页</h2>
<img src="pics/pic3.png">
<br/>
<h3><p align="center">静夜思</p></h3>
<p align="center">唐 李白</p>
<p align="center">床前明月光,</br>
疑是地上霜。<br/>
举头望明月,<br/>
低头思故乡。<br/>
</p>
<br/>
链接:<br/>
<a href="index1.htm">返回主页</a> <br/>
</body>
</html>
HTML静态网页设计基础相关推荐
- Dreamweaver Flash Photoshop网页设计基础与实例教程(职业白金版)
Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版) 基本信息 作者: 龙飞 丛书名: 培训专家 出版社:电子工业出版社 ISBN:978 ...
- 只需三分钟您就可以用nodejs搭建静态网页服务器(配置静态网页访问目录)
Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- AWS攻略——使用CodeBuild进行自动化构建和部署静态网页
首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...
- AWS攻略——使用S3托管静态网页
在AWS上有很多部署静态网页的方式,比如使用EC2或者Lightsail.但是不管使用上述哪种方案,都需要预先部署如Nignx或者Apache等Http服务.这对纯前端同学来说可能有点复杂,而AWS提 ...
- 静态网页案例_手把手教你构建网页
网页 网页是构成网站的基本元素,是承载各种网站应用的平台.通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站. 网页是一个包含HTML ...
- python爬虫如何从一个页面进入另一个页面-Python爬虫 (一):爬取一个简单的静态网页...
版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...
- Freemarker入门小案例(生成静态网页的其中一种方式)
其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...
- 静态网页制作html语言入门
编辑一个文本文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- gulp html 模块化,使用Gulp如何实现静态网页模块化具体怎么做?
众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料,文中通过示例代码介绍的非常详细,需 ...
最新文章
- ubuntu桌面管理
- JavaScript机器学习之线性回归
- jquery then
- Java 流(Stream)、文件(File)和IO -- Java ByteArrayOutputStream类
- java9新特性 2017_Java 9 ← 2017,2019 → Java 13 ,来看看Java两年来的变化
- 无法加载 DLL“SQLite.Interop.DLL”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。...
- (转)漫画:什么是分布式事务?
- Scrapy 1.4 文档 01 初窥 Scrapy
- 【CentOS 7笔记11】,目录权限,所有者与所有组,隐藏权限#171022
- php是否支持64位,phpstudy默认不支持64位php的解决方法
- .NET MVC5+ Dapper+扩展+AutoFac自动注入实现
- 使用laypage分页
- 计算机里的音乐怎么设置,声音和音频设备在电脑上如何设置 电脑无声的情况如何解决【详解】...
- python丨Scrapy框架案例二:阳光问政平台
- html5普通文本框代码,html 文本框代码
- React - 函数作为子组件
- Safe Browsing API
- 无粉丝无流量怎么加入快手小黄车?怎么开通小黄车?
- 【这不是经验】VS编译器初始化报错
- 最强解决网页复制文字等问题