关于网页制作的学习

最新推荐文章于 2025-12-18 10:34:05 发布

原创最新推荐文章于 2025-12-18 10:34:05 发布 · 278 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #java

html 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了HTML网页的基本结构，包括网页的主体结构、head部分和实体的使用。接着，列举并解释了常见的HTML标签，如标题标签、段落标签、强调标签等，并探讨了元素的分类和布局注意事项。最后，讲解了结构布局标签，如header、main、footer等的作用。

一. 网页结构

1.网页的主体结构与注释

结果：

2.关于head结构

<!-- 文档声明 告诉浏览器，我是按照html的规范编写 防止出现怪异模式，从而出现乱码-->
<!DOCTYPE html>
<html>
  <head>
    <!--  属性  属性值  放在标签内部 -->
    <!-- meta 自结束标签  设置一些元信息  辅助浏览器编译代码
        charset  字符集  
           utf-8  万国码
           GB2312   中国
           GBK   中国扩展版
        编码  将字符转成二进制
        解码   将二进制转成字符   
        乱码  编码和解码参考的标准不一样
    -->
    <meta charset="utf-8" />
    <meta name="keywords" content="手机,手机品牌,手机评测,手机资讯,手机行情" />
    <meta name="description" content="中关村在线手机频道为用户提供最新、最深度、最全面的手机相关资讯。能够让用户在最快的时间内了解到如何选手机、买手机、用手机。" />
    <title>标题</title>
  </head>
  <body>
    这是我的第一个网站。
  </body>
</html>

3.实体

实体就是浏览器在编码的时候，识别不出的特殊符号需要用一些额外的字符来表示，而这些字符就叫实体。

实体语法：&实体的名字；

常见的实体：

&nbsp；空格

> 大于号

&lt；小于号

&copy；版权符号

查询实体符号的网址：

https://www.w3school.com.cn/html/html_entities.asp

eg：

这是我的&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;第一个网站。
        3&lt;4&gt;5
        &copy;

结果：

3.html的规范

1.html 不区分大小写，但一般都是小写。

2.注释不能嵌套，注释为“ctrl+/”,注释需要简单明了。

3.浏览器的纠错一定要避免，不然会影响网站的性能

4.html标签规范，要么成双成对，要么自结束。

5.标签可以嵌套，但不能交叉。

二.常用标签

1.标题标签

有六个标题标签，常用的为h1-h3，从样式上看，h1->h6，逐步变小，语义叶逐渐变小，标题标签也是辅助推广部门做推广的，其重要性仅次于title标签。h1的语义最重，一般一个页面只会出钱一次。标题标签是块元素，会独占一行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
   
  </body>
</html>

结果

2.段落标签 p

段落标签也是块元素，会独占一行，从样式上看，段落和段落之间有间距，一般用来包裹文字与图片。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
    <p>这是我的第一个网站。</p>
   
  </body>
</html>

结果：

3.标题分组 hgroup

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
    <hgroup>
      <h1>登高</h1>
      <h2>杜甫</h2>
    </hgroup>
    
  </body>
</html>

结果：

4.强调标签 em strong

em strong都不会独占一行，是行内元素。

em 有斜体，强调的是语音语调。

strong 加粗，强调的是内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   <em>使养的国。</em>
    <strong>倒土人说。</strong>
    <p>同学们长得 <strong>真好看</strong></p>

  </body>
</html>

结果：

5.换行标签 br

br是自结束标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
   这是我的<br />
   第一个<br />
   网站<br />
   
  </body>
</html>

结果：

6.分割线 hr

hr自结束标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   <p>同学们长得 <strong>真好看</strong></p>
   <hr />
   
  </body>
</html>

结果：

7.center标签自结束标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   <center>
      <h1>登高</h1>
      <h2>杜甫</h2>
      <p>至娇文，否藏。</p>
      <p>至娇文，否藏。</p>
    </center>
   
  </body>
</html>

结果：

8.div标签

div没有任何语义，只表示一个块元素

9.span

没有任何语义，只表示一个行内元素，一般用来包裹文字

10.del

删除线标签

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   
    原价：<del>9999</del>
    现价:9.9
  </body>
</html>