0113作业
1. 写出html文档结构,并解释每个成员的功能与作用
<!-- 1. 文档类型元素 --><!DOCTYPE html><!-- 2. 根元素: 浏览器渲染html的起点,入口 --><!-- lang="zh-CN": 属性,标签的特征,用"键(lang),值(zh-CN)对"的方式来表示 --><html lang="zh-CN"><!-- 根元素只有二个子元素 <head><body> --><!-- 2.1 头元素: 浏览器, 搜索引擎SEO--><head><!-- 2.1.1 元标签,中介,媒婆 --><!-- 页面编码 --><meta charset="utf-8" /><!-- 兼容模式: 多余的 --><meta http-equiv="X-UA-Compatible" content="IE=edge" /><!-- 视口设置: 视口(可视窗口), 375px 375px --><meta name="viewport" content="width=device-width,initial-scale=1.0" /><!-- 页面标题 --><title>html结构</title><!-- 页面主体 --><body><!-- <girl-friend height="170" weight="110" bwh="88,86,84">小刘亦菲</girl-friend> --><!--1. 元素: 女朋友2. 标签: <girl-friend>3. 属性: height,weight,bwh(bust,waist,hips)通用属性, 姓名,性别,年龄,学历--><h1 id="header" class="title" style="color: red">Hello, binbin</h1><!--1. 元素: 大标题2. 标签: <h1>3. 属性: id,class,style (通用属性/预定义)预置标签: w3c制定,各家浏览器实现--><!-- 双标签: 起始标签和结束标签,内容写到他们之间,属性写到起始标签中 --><!-- 单标签: 空标签,它的内容由某个属性来设置,本质上"资源占位符" --><!-- <input type="text" value="admin" /><img src="url" alt="" /><link rel="stylesheet" href="style.css" /> --><!--1. 双标签: 自身内容,由开发人员自己写2. 单标签: 外部资源的占位符,空标签3. 预定义标签: <h1>,<input>,<div>,<ul>...4. 预定义属性: id,class,style, src,type,value,name...5. 自定义标签: <girl-friend>6. 自定义属性: height,weight,bwh(bust,waist,hips)7. 标准化的自定义属性: "data-"自定义属性固定前缀--></body></head></html>
‘’’
2. 演示布局元素,重点是 tag+class
<!DOCTYPE html><html lang="zh-CN"><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><!-- <div id="header">页眉</div><div id="mains">主体</div><div id="footer">页脚</div><hr /><div class="header">页眉</div><div class="mains">主体</div><div class="footer">页脚</div></body></html>
3. 演示图文的语义化解决方案
<!DOCTYPE html><html lang="zh-CN"><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>页眉</header><main>主体</main><footer>页脚</footer><hr />--><style>.article.header{color: red;}.article.main{color: rgb(4, 255, 0);}.article.footer{color: rgb(47, 0, 255);}</style><!-- <article><header class="article header">文章头部</header><main class="article main">文章主体</main><footer class="article footer">文章底部</footer></article> --><div class="article header">页眉</div><div class="article main">主体</div><div class="article footer">页脚</div></body></html>
4. 演示图像,链接与列表元素
<!DOCTYPE html><html lang="zh-CN"><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><div></div><div class="box"><img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt=""><p class="title">二十二期</p></div><hr /><figure><img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="php" width="200"><figcaption>二十二期</figcaption></figure><a href="https://php.cn" target="_self">php.cn</a><a href="https://php.cn"><img src="https://img.php.cn/upload/aroundimg/000/000/001/63b69d4c2de93667.png" alt="php" width="200"></a><a href="https://php.cn" target="_blank"><button>abcd</button></a><!-- 无序列表 --><ul><li>itme1</li><li>itme2</li><li>itme3</li></ul><!-- 有序列表 --><ol><li>itme1</li><li>itme2</li><li>itme3</li></ol><!-- 自定义列表 --><dl><dt>itme1</dt><dd>itme1</dd><dd>itme2</dd><dd>itme3</dd><dt>itme2</dt><dd>itme1</dd><dd>itme2</dd><dd>itme3</dd><dt>itme3</dt><dd>itme1</dd><dd>itme2</dd><dd>itme3</dd></dl></body></html>