我们看到,文章是由三部分组成的,分别是标题、内容、跟图片。这三部分的HTML代码都是写在

和里的。我们看下标题用HTML怎么写

标题标签一共有6个,h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。

是最高的等级。

那么以刚才我们描述的文章为例,标题的HTML代码就可以这样写:

小明跟小红一起出去散步

这里大家要注意,

是HTML的标签,是告诉浏览器,这是个标题,而标题的内容,是写在

之间的。

写好了标题,接下来我们要展示的是文章的内容。在HTML中,显示正文内容的标签为

,用HTML代码表示就是:

今天天气很好,小明跟小红一起出去散步

这里跟刚才的

标签是一样的,

是是告诉浏览器,这里是文字段落,而文字的内容,是写在

之间的。

到了这里,我们就解决了一篇文章的标题跟内容,但我们刚才列举的那篇文章中,还有穿插一张图片,那在HTML中图片又是怎么表示的呢?

这里就要说到标签了。在HTML中,是用来表示图片的,一般来说,一个完整的标签里包含三个部分,分别是:图片的路径(scr),下载失败时的替换文本(alt)、和 提示文本(title)。

以刚才我们描述的文章图片为例,那篇文章的图片我们就可以写成:

注意:

这里的scr后面的双引号内是图片的路径,也就是说,你这张图片是保存在哪里的,就填保存的路径跟保存的名字以及保存的格式,本文中的图片是保存在i文件夹下,图片名称为:eg_cute,文件格式是:gif。

至于标签中的alt跟title,大家只要明白意思就行了,后期大家大量练习的时候,自然就会明白。

到这里,咱们刚才写的那篇文章就用HTML代码写出来了,我们看下在浏览器里的整体效果

当然,网虫举得案例是最简单最简答的案例,为的是让很多看了一两遍还是没看懂的朋友了解HTML中最常用的三个标签的意思。

html怎么将内容放在页面中心,怎么把文章内容展示在网页上呢相关推荐

  1. HTMl中内容离页面底部距离,CSS 实现内容高度不够的时候底部(footer)自动贴底

    在 UI 切图过程中,页面往往由三个部分组成,头部.内容和底部.当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多 ...

  2. 静态网页爬虫教程(4)同一页面多篇文章内容提取和保存

    前面的文章中,我们已经成功的完成了对一篇文章的内容提取和保存.现在新的问题又来了,之前我们提取过的超链接有那么多,标题也有不少,怎么能只提取一篇文章而放弃一堆呢?别急,下面我们就开始说说多篇文章的内容 ...

  3. 文章内容排版对网站优化有哪些影响?

    众所周知,在网站优化中内容已经是非常重要的部分,网站的内容也不仅仅是包括文章,还有网站的排版.设计等元素,其中原创更高质量的文章也会更受人们欢迎,文章内容的排名也会影响着用户体验等,那么在网站文章内容 ...

  4. wordpress网站文章内容页模板主题开发制作教程

    内容页模板主题是网站中的重中之重,是主要承载我们的网站内容的页面,也是为用户展示结果的界面,那么wordpress网站文章内容页模板主题开发制作教程主要将的就帮我们顺利的学会主题开发,主要的内容有,标 ...

  5. WordPress文章内容编辑,wp文章在线批量编辑,wp文章内容可视化编辑器

    WordPress文章内容更新是SEO中比较让大家焦虑的事情.每天WordPress文章内容的高质量的发布更新是一个烦杂的工作. 我们知道搜索引擎通过蜘蛛抓取我们每天更新的URL.搜索引擎会根据蜘蛛抓 ...

  6. 网页上的内容无法复制?一串代码轻松搞定!

    我们在浏览网页时经常需要复制网页上的文字内容,可是复制时会出现以下这样的情况: 其实出行这种情况是因为网页中利用了javescript不可复制的代码,"道高一尺魔高一丈",今天就教 ...

  7. 爱奇艺内容中台数据中心的设计与实现

    互联网技术发展至今,当业务复杂度比较高的时候,采用微服务化是一个有效的手段,但是随着服务的拆分,数据管理工作变得极具挑战.数据中心(OLTP)通过对数据的统一收集和管理,一方面可以建立数据之间的联系, ...

  8. JavaScript应放在页面的什么地方

    在页面脚步编写中,初学者经常会碰到JavaScript放在页面什么地方的疑惑,网上答疑者给出的答案基本一致,这里简单作了一下整理,并分析一下为什么要这样和为什么可以不这样: 一.JavaScript代 ...

  9. Python爬虫【三】爬取PC网页版“微博辟谣”账号内容(selenium单页面内多线程爬取内容)

    专题系列导引   爬虫课题描述可见: Python爬虫[零]课题介绍 – 对"微博辟谣"账号的历史微博进行数据采集   课题解决方法: 微博移动版爬虫 Python爬虫[一]爬取移 ...

最新文章

  1. KVM libvirt的CPU热添加
  2. 语言模型GPT跨界CV,OpenAI揭示强算力Transformer具有通用性
  3. boost::gregorian模块实现日期序列化的测试程序
  4. 信用社和民营银行存款利息都高,有5万块钱存哪个更安全?
  5. ASP.NET小技巧——回传后保持页面的滚动位置
  6. 众安每秒3.2万张保单的背后,阿里云输出了什么能力?
  7. 互联网日报 | 3月21日 星期日 | 贾玲成全球票房最高女导演;顺丰全货机数量增至64架;东京奥运会不接待国外观众...
  8. 作者:劳保强(1989-),男,中国科学院上海天文台助理工程师
  9. 今天的几经沧桑的飞鸽传书2011
  10. 自学机器学习_我用来自学机器学习的最佳资源
  11. 2019年微信数据报告:男性用户最爱搜“小姐姐”,表情包最受欢迎的是它
  12. springboot中配置过滤器以及可能出现的问题
  13. ubuntu下常用的抓包软件_macOS下最常用也最好用的几款解压缩软件,你值得拥有...
  14. 人工智能在计算机视觉方面的应用3000字,人工智能之计算机视觉应用专题报告.pptx...
  15. Intellij-工程目录下隐藏不想显示的文件和文件夹
  16. Java学习笔记(05)
  17. Hive的下载和安装
  18. 《ShowYou数组代码》第38题:对数组元素进行排序
  19. Javascript的交互性
  20. SAP ABAP 取物料号的采购订单文本内容

热门文章

  1. 腾讯数字孪生云白皮书发布(附下载)
  2. [附源码]PHP计算机毕业设计主机游戏商店网站(程序+LW)
  3. k8s 安装 EFK
  4. 一份关于网络工程师的“失业”生存指南
  5. Joomla模板风格怎么设置
  6. 深度linux夜间模式,在Linux下安装Yin-Yang以在KDE中设置自动夜间模式
  7. CLC(ClearCarry Flag)
  8. Drupal7_1:初识drupal
  9. 项目或WBS元素结算规则设置和实操-CJ20N/CJ02/CJ88/CJI3
  10. ESFP型人格的性格缺陷和心理问题分析