如何新建一个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静态网页设计基础相关推荐

  1. Dreamweaver Flash Photoshop网页设计基础与实例教程(职业白金版)

    Dreamweaver & Flash & Photoshop网页设计基础与实例教程(职业白金版) 基本信息 作者: 龙飞 丛书名: 培训专家 出版社:电子工业出版社 ISBN:978 ...

  2. 只需三分钟您就可以用nodejs搭建静态网页服务器(配置静态网页访问目录)

    Node.js 中文网Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  3. AWS攻略——使用CodeBuild进行自动化构建和部署静态网页

    首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...

  4. AWS攻略——使用S3托管静态网页

    在AWS上有很多部署静态网页的方式,比如使用EC2或者Lightsail.但是不管使用上述哪种方案,都需要预先部署如Nignx或者Apache等Http服务.这对纯前端同学来说可能有点复杂,而AWS提 ...

  5. 静态网页案例_手把手教你构建网页

    ​ 网页 网页是构成网站的基本元素,是承载各种网站应用的平台.通俗地说,您的网站就是由网页组成的,如果您只有域名和虚拟主机而没有制作任何网页的话,您的客户仍旧无法访问您的网站. 网页是一个包含HTML ...

  6. python爬虫如何从一个页面进入另一个页面-Python爬虫 (一):爬取一个简单的静态网页...

    版本:python3.7 平台:windows10 工具 :pycharm 断断续续学习了py3爬虫2周左右的时间,发现自己学习的过于零散化,所以想通过这个专栏系统的整理下自己所学过的知识.如有错误, ...

  7. Freemarker入门小案例(生成静态网页的其中一种方式)

    其实生成静态网页的方式有好多种,我昨天看了一下,Freemarker是其中一种,但是Freemarker现在我们都用得比较少了,现在用得ActiveMQ用来发送信息到静态页面,不过想了一下这个小东西, ...

  8. 静态网页制作html语言入门

    编辑一个文本文件,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. gulp html 模块化,使用Gulp如何实现静态网页模块化具体怎么做?

    众所周知Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面这篇文章主要给大家介绍了关于Gulp实现静态网页模块化的相关资料,文中通过示例代码介绍的非常详细,需 ...

最新文章

  1. ubuntu桌面管理
  2. JavaScript机器学习之线性回归
  3. jquery then
  4. Java 流(Stream)、文件(File)和IO -- Java ByteArrayOutputStream类
  5. java9新特性 2017_Java 9 ← 2017,2019 → Java 13 ,来看看Java两年来的变化
  6. 无法加载 DLL“SQLite.Interop.DLL”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。...
  7. (转)漫画:什么是分布式事务?
  8. Scrapy 1.4 文档 01 初窥 Scrapy
  9. 【CentOS 7笔记11】,目录权限,所有者与所有组,隐藏权限#171022
  10. php是否支持64位,phpstudy默认不支持64位php的解决方法
  11. .NET MVC5+ Dapper+扩展+AutoFac自动注入实现
  12. 使用laypage分页
  13. 计算机里的音乐怎么设置,声音和音频设备在电脑上如何设置 电脑无声的情况如何解决【详解】...
  14. python丨Scrapy框架案例二:阳光问政平台
  15. html5普通文本框代码,html 文本框代码
  16. React - 函数作为子组件
  17. Safe Browsing API
  18. 无粉丝无流量怎么加入快手小黄车?怎么开通小黄车?
  19. 【这不是经验】VS编译器初始化报错
  20. 最强解决网页复制文字等问题

热门文章

  1. 只有夏令营,入营0双非,想保中科大大数据学院应该怎么做?
  2. 2021年焊工(初级)考试资料及焊工(初级)免费试题
  3. 量子态操作:基于门的三态旋转
  4. OCUI界面设计:UIPickerView 拾取视图
  5. double类型的输出方式
  6. LOJ 6485 LJJ学多项式
  7. HI3518E SDK安装并编译osdr
  8. el-select 默认选中第一个,动态静态获取
  9. 世卫和盖茨基金会被黑?疑2.5万电邮账号密码被公开
  10. 相机照片删除了怎么恢复?60%的人都用这三步解决了