1 写出html文档结构,并解释每个成员的功能与作用
<!DOCTYPE html> <!-- H5标准声明 --><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>
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>Document</title></head><body> <h1 style="color: yellowgreen;">hello php中文网</h1> <girl style="color: blueviolet;" >hi girl</girl></body></html>
3 演示图文的语义化解决方案
<!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> <header style="color: aqua;">头部区域</header> <main style="color: blue;">显示区</main> <footer style="color: brown;">脚部区域</footer> <figure> <img src="https://img.php.cn/upload/course/000/000/001/63196859c23d0659.png" alt=""> <figcaption>语义化图文</figcaption> </figure></body></html>
4 演示图像,链接与列表元素
<!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> <a href="http://bing.com">bing</a> <br> <a href="https://www.php.cn" target="_blank">php中文网</a> <br> <img src="https://img.php.cn/upload/article/000/000/001/631713fe824fc974.png" alt="" width="180px" > <br> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> <ol> <li>nihao1</li> <li>nihao2</li> <li>nihao3</li> <li>nihao4</li> <li>nihao5</li> </ol></body></html>
