0113作业

1. 写出html文档结构,并解释每个成员的功能与作用

<!-- 1. 文档类型元素 -->
<!DOCTYPE html>
<!-- 2. 根元素: 浏览器渲染html的起点,入口 -->
<!-- lang="zh-CN": 属性,标签的特征,用"键(lang),值(zh-CN)对"的方式来表示 -->
<html lang="zh-CN">
  <!-- 根元素只有二个子元素 <head><body> -->
  <!-- 2.1 头元素: 浏览器, 搜索引擎SEO-->
  <head>
    <!-- 2.1.1 元标签,中介,媒婆 -->
    <!-- 页面编码 -->
    <meta charset="utf-8" />
    <!-- 兼容模式: 多余的 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口设置: 视口(可视窗口), 375px 375px -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!-- 页面标题 -->
    <title>html结构</title>
    <!-- 页面主体 -->
    <body>
      <!-- <girl-friend height="170" weight="110" bwh="88,86,84">小刘亦菲</girl-friend> -->
      <!--
        1. 元素: 女朋友
        2. 标签: <girl-friend>
        3. 属性: height,weight,bwh(bust,waist,hips)
        通用属性, 姓名,性别,年龄,学历
       -->
      <h1 id="header" class="title" style="color: red">Hello, binbin</h1>
      <!--
        1. 元素: 大标题
        2. 标签: <h1>
        3. 属性: id,class,style (通用属性/预定义)
        预置标签: w3c制定,各家浏览器实现
       -->
      <!-- 双标签: 起始标签和结束标签,内容写到他们之间,属性写到起始标签中 -->
      <!-- 单标签: 空标签,它的内容由某个属性来设置,本质上"资源占位符" -->
      <!-- <input type="text" value="admin" />
      <img src="url" alt="" />
      <link rel="stylesheet" href="style.css" /> -->
      <!--
        1. 双标签: 自身内容,由开发人员自己写
        2. 单标签: 外部资源的占位符,空标签
        3. 预定义标签: <h1>,<input>,<div>,<ul>...
        4. 预定义属性: id,class,style, src,type,value,name...
        5. 自定义标签: <girl-friend>
        6. 自定义属性: height,weight,bwh(bust,waist,hips)
        7. 标准化的自定义属性: "data-"自定义属性固定前缀
       -->
    </body>
  </head>
</html>

‘’’

2. 演示布局元素,重点是 tag+class

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <!-- <div id="header">页眉</div>
    <div id="mains">主体</div>
    <div id="footer">页脚</div>
    <hr />
  <div class="header">页眉</div>
    <div class="mains">主体</div>
    <div class="footer">页脚</div>
</body>
</html>

3. 演示图文的语义化解决方案

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer> 
    <hr />
            -->
    <style>
        .article.header{
            color: red;
        }.article.main{
            color: rgb(4, 255, 0);
        }.article.footer{
            color: rgb(47, 0, 255);
        }
    </style>
    <!-- <article>
        <header class="article header">文章头部</header>
        <main class="article main">文章主体</main>
        <footer class="article footer">文章底部</footer>
    </article> -->
    <div class="article header">页眉</div>
    <div class="article main">主体</div>
    <div class="article footer">页脚</div>
    </body>
</html>

4. 演示图像,链接与列表元素

<!DOCTYPE html>
<html lang="zh-CN">
<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>
     <div></div>
    <div class="box">
        <img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="">
        <p class="title">二十二期</p>
    </div>
    <hr />
    <figure>
        <img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="php" width="200">
        <figcaption>二十二期</figcaption>
    </figure>
    <a href="https://php.cn" target="_self">php.cn</a>
    <a href="https://php.cn">
    <img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="php" width="200"></a>
    <a href="https://php.cn" target="_blank"><button>abcd</button></a>
    <!-- 无序列表 -->
<ul>
    <li>itme1</li>
    <li>itme2</li>
    <li>itme3</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>itme1</li>
    <li>itme2</li>
    <li>itme3</li>
</ol>
<!-- 自定义列表 -->
<dl>
    <dt>itme1</dt>
        <dd>itme1</dd> 
        <dd>itme2</dd> 
        <dd>itme3</dd>
    <dt>itme2</dt>
        <dd>itme1</dd> 
        <dd>itme2</dd> 
        <dd>itme3</dd>
    <dt>itme3</dt>
        <dd>itme1</dd> 
        <dd>itme2</dd> 
        <dd>itme3</dd>
</dl>
    </body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

开学第一课

2023-01-13 18:41:14