Blogger Information
Blog 18
fans 0
comment 3
visits 12522
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
作业2:HTML结构、tag+classl简单布局、语义化图文解决方案、图像 链接与列表的规范与结合
P粉019280626
Original
639 people have browsed it

<!-- 作业1 -->

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

<!DOCTYPE html><!-- 写在最前,解释文档类型,文档自我介绍 -->

<html lang="zh-CN"></html>  <!-- 根元素:浏览器渲染html的起点,入口-- -->

<head>

    <meta charset="uft-8" /> <!-- 设置通用语言 -->

    <meta http-equiv="X-UA-Compatible content=IE-edge" /><!-- 设置兼容模式  -->

    <title>1.写出html文档结构--GAO的作业网页标题</title>

    <body>

<H1>1.写出html文档结构--GAO的作业网页正文H1</H1>

GAO的作业网页正文第一行

GAO的作业网页正文第一行

GAO的作业网页正文第一行

GAO的作业网页正文第一行

    </body>


</head>  <!-- 给浏览器看,将页面信息写到里面,比如给SEO搜索引擎 -->

   

    <footer>

<h3>1.写出html文档结构--gao的作业网站结尾</h3>

    </footer>







 <!--作业2. 演示布局元素,重点是 tag+class -->

<div class="article header">2.演示布局元素--文章头部</div>

<div class="article main">2.演示布局元素--文章主体</div>

<div class="article footer">2.演示布局元素--文章底部</div>






<!--作业23. 演示图文的语义化解决方案 -->

<figure>

     <!--文字-->

     <figcaption>3.语义化解决方案--有道翻译</figcaption>

     <!--图片--->

    <img src="https://fanyi.youdao.com/img/logo.6ed1c44b.png" alt="有道翻译LOGO">

</figure>





<!--作业24. 演示图像,链接与列表元素

图像可以设置图文形式,也可以设置图像超链,可以设置图片的alt标签利于搜索引擎优化,还可以通过class设置图像大小,以及点击图像超链后的打开方式.

4.1 图文: -->

<img src="https://fanyi.youdao.com/img/logo.6ed1c44b.png" alt="有道翻译LOGO" width="200px">

<p class="title">4.1 图文--点击上方图片进行有道翻译</p>


<!-- 4.2链接

常用在设置超级链接,有图片链接,文字链接,按钮链接。 -->

<!-- 4.2.1 文字链接 -->

<a href="https://fanyi.youdao.com">4.2.1文字链接--点击进行有道搜索</a>



<!-- 4.2.2 图片链接 -->

<a href="https://fanyi.youdao.com">

    <img src="https://fanyi.youdao.com/img/logo.6ed1c44b.png" width="200px">

</a>


<!-- 4.2.3 按钮链接 -->

<a href="https://fanyi.youdao.com">

    <button>4.2.3按钮--点击这里打开有道搜索</button>

</a>



<!-- 4.3列表:有序、无序、自定义 -->

<!-- 4.3.1 无序列表

用emmet直接写-->

<ul>

    <li>4.3.1无序列表1</li>

    <li>4.3.1无序列表2</li>

    <li>4.3.1无序列表3</li>

    <li>4.3.1无序列表4</li>

</ul>


<!-- 4.3.2 有序列表

emmet有序 -->

<ol>

    <li>4.3.2有序列表1</li>

    <li>4.3.2有序列表2</li>

    <li>4.3.2有序列表3</li>

    <li>4.3.2有序列表4</li>

</ol>


<!-- 4.3.3 自定义dl+dt+dd

dl做框架,dt做标题,dd做内容 -->

<dl>    

    <dt>  4.3.3自定义列表--标题

       </dt>

        <dd>    

       4.3.3自定义列表--内容

        </dd>

 

</dl>


Correcting teacher:PHPzPHPz

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
1 comments
P粉019280626 2023-01-28 15:36:44
谢谢老师,我是vscode里写好,拷贝到这里来的。
1 floor