html文档结构的功能与作用，演示布局元素tag+class标签，演示图文的语义化，演示图像,链接与列表元素。 - 前端开发

Community Learn Tools Library Leisure

English

Home > List of blog posts > html文档结构的功能与作用，演示布局元素tag+class标签，演示图文的语义化，演示图像,链接与列表元素。

Blogger Information

Blog 10

fans 0

comment 1

visits 3177

Special Recommendation

More>

Related recommendations

一.html文档结构的功能与作用

1.<!DOCTYPE html>文档类型元素相当于一个自我介绍

<!DOCTYPE html>

2.lang=”zh-CN”是一个属性，lang键，zh-CN值

<html lang="zh-CN">

3.根元素只有两个子元素，html是根元素，<head><body>是子元素。

<head>是给开发者看的，属于一个头元素，搜索引擎seo

4.UTF-8是一个页面编码

<meta charset="UTF-8">

5.X_UA-compatible兼容模式，content=”IE=edge是一个将采用浏览器支持的最高文档模式渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge">

6.viewport是一个可视窗口

<meta name="viewport" content="width=device-width, initial-scale=1.0">

7.页面标题，在网址上方，标题搜索引擎seo

<title>Document</title>

二.页面显示的主体结构，单标签，双标签，用户可以看到的页面

    <!-- height身高，weight体重，bwh三围 -->
    <girl-fiend height="170" weight="110" bwh="88.86.84"> 朱老师</girl-fiend>
    <!-- 元素：老师-->
    标签：<girl-fiend>
    属性:height身高，weight体重,bwh三围(bust胸部,waist腰部,hips臀部)
    预制标签：w3c制定，各家浏览器实现

1.双标签：起始标签和结束标签，内容写到他们之间，属性写到起始标签中

2.单标签：空标签，他的内容由某个属性来设置，本质上的“资源占位符”

<input type="text" value="admin">
<img src="url" alt="图片不显示，显示文字">
<link rel="stylesheet" href="css">

3.双标签:自身内容，由开发人员自己写

    单标签：外部资源的占位符，空标签
    预定义标签:<h1> <input><div><ul>
    预定义属性:id,class,style,src,type,value,name...
    自定义标签：<girl-friend>
    自定义属性:height,weight,bwh(bust,waist,hips)
    标准化自定义属性:“data-”自定义属性前缀 -->

    <h1 id="uname" data-email="qq@qq.com">文本</h1>

4.div+class是主流

    <div class="header">页眉</div>
    <div class="main">主体</div>
    <div class="footer">页脚</div>

5.语义化

    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>

6.tag+class

    <div class="article header">页眉</div>
    <div class="article main">主体</div>
    <div class="article footer">页脚</div>
    <style>
      .article.header {
        color: green;
      }
    </style>

三.图文语义化

1.传统的图文解决方案

    <div class="box">
        <img src="url" alt="php中文网">
        emmet:
        <p class="tetle">前端开发</p>
    </div>

2.语义化图文解决方案

    <figure>
        <a href="">
            <img src="url" alt="php中文网钟老师">
        </a>
        <figcaption>php中文网22期教学</figcaption>
    </figure>

3.链接

    <a href="https://php.cn">钟老师</a>

4.`_self`当前窗口

    <a href="https://php.cn" target="_blank">
        <button>登陆</button>
    </a>
    <a href="https://php.cn">
        <imgsrc="https://img.php.cn/upload/webcode/000/887/227/63bf9e0e37573421.png" alt="二十二期前端开发">
    </a>

四.有序列表，无序列表，自定义列表

无序列表ul+li

语义化`ul>li{item$}*6`

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>

语义化 `ul>li*5>a{link$}`

<ul>
    <li><a href="demo1.html">link1</a></li>
    <li><a href="demo2.html">link2</a></li>
    <li><a href="demo3.html">link3</a></li>
    <li><a href="demo2.html">link4</a></li>
    <li><a href="demo2.html">link5</a></li>
    <li><a href="demo2.html">link6</a></li>
</ul>

有序列表ol+li

语义化 `ol>li{item$}*5`

<ol>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ol>

自定义列表`dl` `dt` `dd`

<dl>
    <!-- 标题 -->
    <dt>1/13作业</dt>
    <!-- 描述内容 -->
    <dd>完成作业</dd>
</dl>

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

markdown语法运用

2023-01-13 15:40:03