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>