HTML简易网页练习

铭铭同学

已于 2022-10-31 12:54:25 修改

阅读量1.3k

点赞数 2

分类专栏： web前端学习笔记文章标签： html 前端

于 2022-10-28 17:21:16 首次发布

本文链接：https://blog.csdn.net/zhangmingxian1/article/details/127575125

版权

web前端学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

段落元素：

特点：

1、独占一行

2、上下行间距

3、在p标签中，不能嵌套其他的块级元素

4、p标签常用于页面中的纯文本

<body>
  <p>这是段落1</p>
  <p>这是段落2</p>
</body>

标题元素：

特点：

1、文本加粗

2、文字的尺寸依次减小

3、独占一行

4、有上下行间距

<body>
  <h1>这是标题1</h1>
  <h2>这是标题2</h2>
  <h3>这是标题3</h3>
  <h4>这是标题4</h4>
  <h5>这是标题5</h5>
  <h6>这是标题6</h6>
</body>

块级元素：

定义：在默认情况下，独占一行的元素

例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)

行内元素：

定义：在默认情况下，可以和其他行内元素在一行显示

例如：b i u sub sup span(没有任何默认样式的行内元素)

分割线可以用标签<hr>

<head>
  <style>
      b{
          /*显示为块级元素*/
          display:block;
      }
      p{
          /*显示为行级元素*/
          display:inline;
      }
  </style>
 </head>

<body>
    <b>加粗</b>    /*行级元素*/
    <i>倾斜</i>    /*行级元素*/
    <p>段落</p>    /*块级元素,独占一行*/
</body>

 <head>   
    <style>
    div{
      //1、文本颜色
      color:red;
      //2、背景颜色
      background-color:green;
      //3、文本尺寸
      font-size:24px
      //4、文本加粗
      font-weight:bald/100/200-900;
      //5、文本修饰 -- 是否加下划线
      tent-decoration:underline;
      //6、字体
      font-family:"仿宋";
      font-family:"幼圆"
      //7、宽度
      width:200px;
      //8、高度
      height:200px;
      //9、文本排列
      /*居中，最左，最右*/
      /*行内元素不可以设置内同居中*/
      text-align:center
    }
    span{
      //1、文本颜色
      color:red;
      //2、背景颜色
      background-color:green;
      //3、文本尺寸
      font-size:24px
      //4、文本加粗
      font-weight:bald/100/200-900;
      //5、文本修饰 -- 是否加下划线
      tent-decoration:underline;
      //6、字体
      font-family:"仿宋";
      font-family:"幼圆"
      //7、宽度
      width:200px;
      //8、高度
      height:200px;
      //9、文本排列
      /*居中，最左，最右*/
      /*行内元素不可以设置内同居中*/
      text-align:center
    }
    </style>
    /*块级元素可以设置宽度高度 --可以做页面的布局*/
    /*行内元素设置的宽度和高度会失效 --网页中的细微控制*/
    /*块级元素居中的前提是元素本身的大小一定要比内容的宽度大*/
</head>
<body>
    <div>这是div</div>
    <span>这是span<span>
</body>

课堂作业：

完成以下界面制作：

答案代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5</title>
    <style type="text/css">
      span{
        color: red;
      }
      h1{
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>HTML5<span>&lt;Day01&gt;</span></h1>
    <hr>
    <h2>1 HTML文档片段</h2>
    <h3>1.1 问题</h3>
    <p>创建如图一1所示的HTML页面:</p>
    <h3>1.2 方案</h3>
    <p>使用HTML标记来完成该页面效果</p>
    <h3>1.3 实现</h3>
    <p>建立一个文本文件，并修改文件名称first.html，然后使用文本编辑器打开该文件，并为该文件添加代码，以创建标准格式的HTML文档。</p>
    <p>然后，在body元素中添加代码，已创建居中显示的段落文本。代码如下所示：</p>
    <pre>
      &lt;p align="center" title="段落"&gt;
        居中显示的段落
      &lt;p&gt;
    </pre>
  </body>
</html>

铭铭同学

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
HTML简易网页练习

例如：h1-h6，p，div(没有任何默认样式的块级元素，最常用的元素，不用特意清除默认样式)例如：b i u sub sup span(没有任何默认样式的行内元素)定义：在默认情况下，可以和其他行内元素在一行显示。3、在p标签中，不能嵌套其他的块级元素。定义：在默认情况下，独占一行的元素。4、p标签常用于页面中的纯文本。分割线可以用标签2、文字的尺寸依次减小。
复制链接

扫一扫