0319 作业
0319 直播共学习了 7 大块 ###第一块-元素
页面的布局都是由“块”堆砌的
块元素分为行内元素与块及元素，最直观差异就是默认 100%的宽度
<div><span>行内块元素</span></div>
常用块元素标签 div span
可替换与不可替换
元素又分为可替换标签与不可替换，直观表现为：内容是否可被系统更改，如引用的图片，图
片里的位图信息不可被代码控制，该类元素为不可替换元素，反之如 p 标签等，内容可以被自定义或更改，属于可替换元素
元素的通用属性
id class style
id 只能存在一个值，如 div1 id=1 那么 div2 的 id 必须 ≠1元素的预定义的类型
src href type
第二块-语义化
H5 的语义化特性提高了 html 代码的人类+蜘蛛的可读性，这使得代码更容易被看懂并且有更优秀的收录
所含标签
header nav main article section aside footer
翻译对照：
header-头部
nav=导航
main=主要区块
article=文章
section=区块
aside=旁白 通常在侧边栏或者标注框
footer=页脚
第三块-Text element
H5 的语义化特性提高了 html 代码的人类+蜘蛛的可读性，这使得代码更容易被看懂并且有更优秀的收录
所含标签
常用 span p pre br hr
声明 time address sub sup small abbr code progress
强调 strong em mark del
引用 blockquetoe
第四块-链接
链接的标签为 <a href="se.ee" download="222.exe">下周</a> 属性有： downloadhref:mailto-tel-url target:_self_blank_parent_top_name doan download:url
第五块-列表
列表分为有序列表、无序列表、自定义列表
有序列表的标签为 ol 无序列表为 ul 自定义列表为 dt
有序与无序列表的列表项标签为 li
自定义列表的列表项为 dt>dd
<hr>
<ul><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ul>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
<hr>
<ol><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li><li>无序列表</li></ol>
<ol>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ol>
<hr>
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
<dd>内容</dd>
<dd>内容</dd>
</dl>
<dl><dt>标题</dt><dd>内容</dd><dd>内容</dd><dd>内容</dd><dd>内容</dd><dt>标题</dt><dd>内容</dd><dd>内容</dd><dd>内容</dd><dd>内容</dd><dt>标题</dt><dd>内容</dd><dd>内容</dd><dd>内容</dd><dd>内容</dd><dt>标题</dt><dd>内容</dd><dd>内容</dd><dd>内容</dd></dl>```
第六块-img
img 标签是用来加载图片资源的
属性 src slt width-height
<img src="https://asdsad.com/s.jpg" alt="为空显示" />
第七块-table
table 的基本结构
Table>tr>td
声明>行>列
table 的基本属性：caption(标题) tr(行) td(列) th(表粗行)cellcpascing(块与块间距)cellpadding(内容间距) aling(对齐) bgcolor(背景色) width(宽度) h 高度
colspan 行合并
rowspan 列合并
<tableborder="1"cellspacing="0"cellpadding="10"style="text-align: center"align="center"><caption style="margin-bottom: 10px"><h3>合肥市南门小学五(三)班课程表</h3></caption><tr bgcolor="#e0fefd" style="font-weight: 9000"><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td rowspan="4">上午</td></tr><tr><td>语文</td><td>数学</td><td>音乐</td><td>体育</td><td>英语</td></tr><tr><td>语文</td><td>数学</td><td>音乐</td><td>体育</td><td>英语</td></tr><tr><td>语文</td><td>数学</td><td>音乐</td><td>体育</td><td>英语</td></tr><tr><td colspan="6" bgcolor="gray" style="color: white">中午休息</td></tr><tr><td rowspan="2">学科</td><td>语文</td><td>数学</td><td>音乐</td><td>体育</td><td>英语</td></tr><tr><td>语文</td><td>数学</td><td>音乐</td><td>体育</td><td>英语</td></tr><tr bgcolor="#90ec8d"><td>备注：</td><td colspan="5" style="text-align: left">每天下午16-17点放学，写完作业回家</td></tr></table>
第八块-form
form 表<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form</a>
<form action="#" method="POST"><label for="zhanghao">账号</label><input type="text" id="zhanghao" /><!-- lable的for值靠input的id定位与关联 --><input type="checkbox" name="Week" id="xq1" value="xq" /><label for="xq1">星期一</label><input type="checkbox" name="Week" id="xq2" value="xq" />星期二<input type="checkbox" name="Week" id="xq3" value="xq" />星期三<input type="checkbox" name="Week" id="xq4" value="xq" />星期四<input type="checkbox" name="Week" id="xq5" value="xq" />星期五<input type="submit" value="提交" /></form>```
