前端每日作业
1月15日
1.解释什么是标签，为什么要使用标签?
what 标签的概念: 被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号 why 标签具有特定的功能: 换行 | 设置页面字符编码集 | 控制文本字体颜色与大小 | 加载图片与视频 注意 标签都有头有尾, 用/来标识标签的结束(用来标识尾)
2.html三个组成部分是哪些？并简单说明
标签，指令,转译字符
3.html5的文档类型如何声明，有什么含义
4.书写一个页面基础模板，并解释每一个标签的组成部分
5.每一个标签都需要结束标志吗？用什么表示标签的结束
6.思考：为什么有些标签可以省略结束标志，有些标签不可以，说说你的理解
7.列出常用的系统基础标签
8.通过什么标签可以实现点击改标签，在一个新的浏览器标签页中打开目标新浪主页
9.img标签如何加载img文件夹下的001.png文件，万一图片文件加载失败，然后提供文字提示，又如何提供鼠标悬浮图片的文字提示
10.写一个有一行表头，一行表尾，总共五行五列的表格：单元格之间没有间距，且单元格内文本也是距离所属单元格上左都是20px
11.拓展：如何实现表格的合并单元格功能
12.新建一个test.html文件，显示的内容结构如下
```html <!--用来设置top锚点--> <a></a> <!--用来转跳到test2.html页面锚点--> <a></a> <!--通过外联式设置该div宽500px，高2000px，背景颜色红色--> <div></div> <!--用来转跳到自己的top锚点--> <a></a> <!--注：每个标签可能拥有文本或样式，根据需求自由添加--> ```
13.新建一个test2.html文件，显示内容如下
```html <!--通过行间式设置p标签宽为300px，高1000px，背景颜色橘色--> <p></p> <!--通过行间式设置p标签宽为300px，高100px，背景颜色蓝色，并在其身上添加test.html转跳的锚点--> <p></p> <!--用来设置锚点--> <!--通过外联式设置该div宽500px，高2000px，背景颜色红色--> <div></div> <!--通过内联式设置该h3宽800px，高1000px，背景颜色绿色--> <h3></h3> ```
日考:前端html页面模板
1月16日
##### 1.有下方页面结构 ``` <p></p> <p></p> <div></div> <div class="div"></div> <h3 class="div"></h3> <h3 id="h3"></h3> 需求： 1.页面所有的显示标签都具有默认边框1px宽度的橘色实线 2.所有的p和div标签通过标签选择器为其设置宽高100px，背景颜色p为蓝色，div为绿色 3.思考：为什么两个p之间有间距，两个div之间没有间距，如何取消两个p之间的间距 4.设置页面所有类名为div的标签宽高120px，背景颜色为天蓝色 5.设置唯一id名为h3的标签宽高150px，背景颜色为黄色 6.有多少种方式可以将id为h3的标签背景颜色从黄色设置为棕色(从选择器优先级考虑) ``` ##### 2.什么因素导致着选择器优先级的不同，并总结基础选择器的优先级 ##### 3.设置长度的都有哪些单位？设置颜色的都有哪些方式？ ##### 4.什么属性控制着页面标签的显示方式，该属性可以设置哪些值，设置不同的值得具体显示方式如何 ##### 5.总结inline|inline-block|block的嵌套规则 ``` 1.inline标签嵌套其他类型标签会出现什么样的情况 2.inline-block嵌套其他类型标签，添加文本后，会出现问题吗？如何解决 ``` ##### 6.强行用inline-block类型标签嵌套block标签 ``` # 样式 <style> .ib { display: inline-block; } .b { displya: block; } </style> # 页面架构 (.ib>.b)*5 => 总共有5个.ib的div，每个都套一个.b 要求： 第一个.b一行文本，第二个.b两行文本，第三个.b三行文本，第四第五个.b没有文本 1.所有的.b都不设置宽高，从左到右.ib的宽度都是80px，高度分别为30px，40px，50 px，40px，30px， 如何实现五个.ib中线对齐 2.所有的.ib宽都是80px，高都是50px，从左到右.b高度分别为30px，40px，50 px，40px，30px， 如何实现五个.b中线对齐 3.尝试将每一个.ib之间的间距消除，使每一个.ib挨着，讨论是否有坑 ``` ##### 7.盒模型由几部分组成？每部分的功能含义是什么，它们之间的区域是否重叠？ ##### 8.有下面结构，实现需求 ``` <div class="div1"></div> <div class="div2"></div> <div class="sup"> <div class="sub"></div> </div> 大前提：除sub盒子外的其他盒子『显示区域』大小都是200px * 200px，sub的『显示区域』大小为50px * 50px 1.div1距离页面上边左边距离均为5px(要考虑body的margin) 2.div2与div1上方平齐，剧div1的右边50px 3.sup与div1，div2之间间距为30px 4.sub在sup的正中央显示 ``` 日考：待定 预习： ``` 字体|文本相关属性样式 边界圆角属性样式 系统默认样式的清除操作(reset操作)，（body|ul|p|a|hn等） 高级选择器 伪类选择器，a的四大伪类 背景属性样式 ```
1月17日
1月18日