0319作业

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> 属性有： download
href: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 列合并

<table
  border="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>
```