html基础入门：html5文档架构与属性学习总结 - PHP学习

Home > List of blog posts > html基础入门：html5文档架构与属性学习总结

Blogger Information

Blog 1

fans 0

comment 0

visits 235

Special Recommendation

More>

Related recommendations

html基础入门：html5文档架构与属性学习总结

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

<!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>
</body>
</html>

1） <!DOCTYPE html>用来表示文件类型
2） <html lang="en">是根元素,表示语言,两个子元素分别是<head> </head>和<body> </body>
3） <head> </head>标签，是给浏览器和搜索引擎看的
4） <body> </body>标签，是给用户看的
5)<meta charset="UTF-8">包含几乎全部种类的语言
6)<meta name="viewport" content="width=device-width, initial-scale=1.0">视口设置
7) <title>Document</title>浏览器中该页面顶部的名称
8) body中，分为三个部分，header+main+footer

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


<!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>0113作业</title>
</head>
<body>
    <div class="box">
        <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="">
        <p>综合实战</p>
    </div>
</body>
</html>

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

<figure>
        <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="">
        <figcaption>综合实战</figcaption>
 </figure>

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

1) 图像

<div class="box">
    <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="" height="260">
</div>
<hr>

2.1) 文字链接

<div class="box">
    <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="" height="260">
    <a href="https://www.php.cn/course/1461.html">综合实战</a>
</div>

2.2) 按钮链接

<div class="box">
    <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="" width="300">
    <a href="https://www.php.cn/course/1461.html">
        <button>click here</button>
    </a>

2.3) 图片链接

<div class="box">
    <a href="https://www.php.cn/course/1461.html"> <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt="" height="280"></a>
</div>

3.1) 无序列表

<ul>
    <li>无序列表第一行</li>
    <li>无序列表第二行</li>
    <li>无序列表第三行</li>
</ul>
<!-- ul>li*3{无序列表第$行} -->

3.2) 有序列表

<ol>
    <li>有序列表第一行</li>
    <li>有序列表第一行</li>
    <li>有序列表第一行</li>
</ol>

3.3) 自定义列表

<dl>
    <dt>action</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

html基础入门：html5文档架构与属性学习总结

2023-01-16 21:57:27