html5左文右图 html怎么左图右字

转载

网络小墨 2023-10-18 10:38:43

文章标签 html5左文右图 html左边图片右边文字 html底部代码 html文字放在图片右边 html网页代码 文章分类 HTML5 移动开发

html5左文右图 html怎么左图右字_html底部代码

HTML是什么？

HTML（Hyper Text Markup Language）是用来描述网页的一种语言，也叫超文本标记语言。

html5左文右图 html怎么左图右字_html底部代码_02

HTML文档就是前端工程师设计网页时使用的语言，浏览器会根据HTML文档的描述，解析出它所描述的网页。

查看网页的HTML代码

打开风变编程教学网站：https://wordpress-edu-3autumn.localprod.oc.forchange.cn/

在网页任意地方点击鼠标右键，然后点击"显示网页源代码"。（Windows系统的快捷键Crtl+u）。

html5左文右图 html怎么左图右字_html网页代码_03

浏览器会弹出一个新的标签页

html5左文右图 html怎么左图右字_html底部代码_04

在网页空白处点击右键，然后选择检查（快捷方式Ctrl+Shift+i）。

html5左文右图 html怎么左图右字_html底部代码_05

点击后的效果

html5左文右图 html怎么左图右字_html左边图片右边文字_06

注：标亮的部分就是网页的HTML代码

将鼠标放在HTML源代码上，左边网页上有一些内容会被标量。这其实就是这行代码所描述的网页内容，一左一右，相互对应。

html5左文右图 html怎么左图右字_html网页代码_07

HTML的层级

HTML源代码和网页，就像建筑图制和房子。房子有不同楼层所组成，每一层中，都会包含一些房间，一个房间还可能划分几个更小的房间，每个小房间是由门、窗、墙壁、地板等等构建组成的。

html5左文右图 html怎么左图右字_html左边图片右边文字_08

HTML源代码中有一些小三角，每一个三角形都可以展开或合上。

html5左文右图 html怎么左图右字_html网页代码_09

每一个可以展开和合上的小三角形里包含的内容，都是一个层级，它很像电脑中一层一层的文件夹。

html5左文右图 html怎么左图右字_html文字放在图片右边_10

HTML的组成

标签和元素

实例

<html>
  <head>
    <meta charset="utf-8"> 
  </head>
    <body>
        <h1>我是一级标题</h1>
        <h2>我是二级标题</h2>
        <h3>我是三级标题</h3>
        <p>我是一个段落啦。一级标题、二级标题、三级标题和我，我们三个一起组成了body。
         </p>
    </body>
</html>

尖括号<>中间的字母，就叫做标签。

标签通常是成对出现的：前面的是开始标签，例<body>；后面的是结束标签，如</body>。

html5左文右图 html怎么左图右字_html5左文右图_11

常见元素：

html5左文右图 html怎么左图右字_html左边图片右边文字_12

注：HTML标签是可以嵌套标签的，而且可以多层嵌套。

网页头和网页体

HTML文档的基本是有网页头和网页体组成的

html5左文右图 html怎么左图右字_html左边图片右边文字_13

HTML文档的最外层标签一定是<html>，里面嵌套着<head>元素与<body>元素。<head>元素代表了网页头，<body>元素代表了网页体。

网页头里面的内容

<title>元素定义网页的标题

html5左文右图 html怎么左图右字_html网页代码_14

而网页体，就是显示在网页中的内容了。

网页体中依次有四个内容：

<h1>元素代表一级标题，<h2>元素代表二级标题等等。然后<p>元素，代表段落文本。

属性

HTML标签可以通过设置属性来为HTML元素描述更多信息

实例

<h1 style='color:#20b2aa;'>这个书苑不太冷</h1>

这行代码给<h1>元素添加了一个style属性，属性中的内容规定了这行文字的颜色。

html5左文右图 html怎么左图右字_html底部代码_15

style属性可以用来定义网页文本的样式，比如字体大小、颜色、间距、对齐方式等等。

href属性——添加链接

<a href="https://wordpress-edu-3autumn.localprod.oc.forchange.cn/">我是一个链接，点我试试</a>

除了style和href，HTML中还有两个很常用的属性，即class与id。

实例

<html>
  <head>
      <meta charset="utf-8"> 
      <title>这个书苑不太冷3.0</title>
      <style>
      .book {
      float: left;
      margin: 5px;
      padding: 15px;
      width: 350px;
      height: 240px;
      border: 3px solid #20b2aa;
      } 
</style>
  </head>

  <body>
      <h1 style="color:#20b2aa;">这个书苑不太冷</h1>
      <h3>吴枫喜欢的书:</h3>
      <a href="https://wordpress-edu-3autumn.localprod.oc.forchange.cn/">点这里看看</a>
      <div class="book">
          <h2>《奇点遗民》</h2>
          <p>本书精选收录了刘宇昆的科幻佳作共22篇。《奇点遗民》融入了科幻艺术吸引人的几大元素：数字化生命、影像化记忆、人工智能、外星访客……刘宇昆的独特之处在于，他写的不是科幻探险或英雄奇幻，而是数据时代里每个人的生活和情感变化。透过这本书，我们看到的不仅是未来还有当下。
          </p>
      </div>
  </body>
</html>

html5左文右图 html怎么左图右字_html5左文右图_16