一、Web标准(重点)
初始化文档
<!-- 声明文档类型 -->
<!DOCTYPE html>
<!-- 指定语言 `zh-CN`定义语言为中文 -->
<html lang="en">
<head>
<!-- 字符集 -->
<meta charset="UTF-8">
<!-- 使用最高版本ie渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
设置视口:可视窗口
width=device-width 窗口宽度等于设备宽度
initial-scale=1.0 页面初始化按照1:1原样显示
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 网站标题 -->
<title>Document</title>
</head>
<body></body>
</html>
基础标签
<head>
<meta charset="utf-8">
<title></title>
<!--
指定默认地址或者所有链接的目标地址
_blank 新窗口中打开 _self 自身窗口打开
-->
<base href="https://www.baidu.com" target="_blank" />
</head>
<body>
<h1> 标题文本 </h1>
<p> 段落文本内容 </p>
<div> 大盒子 </div>
<span> 小盒子 </span>
<b> 加粗 </b> <strong></strong>
<i> 斜体 </i> <em></em>
<s> 删除线 </s> <delect><</delect>
<u> 下划线 </u> <ins></ins>
<img src="images/mess.jpg" width="300" height="300" border="3" title="这是提示文本" />
<img src="cz.jpg" width="300" height="300" border="3" alt="这是图片不存在的替换文本" />
<br /> 换行
<hr /> 水平线
<a href="#">回到顶部
<a href="javascript:;">阻止跳转
<!-- 锚点定位:
1. 使用相应的id名标注跳转目标的位置。 (找目标)
2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的)
-->
<h3 id="two">锚点跳转到此处</h3>
<a href="#two">
<pre>
预格式化文本标签:
按照我们预先写好的文字格式来显示页面,保留空格和换行等。
后台用的多。
</pre>
<!-- 空格号 -->
<!-- 大于号 --> <
<!-- 小于号 --> >
</body>
内联框架
<a href="https://www.runoob.com" target="taobao">淘宝</a>
<iframe src="https://www.runoob.com" srcdoc="<i>规定页面中的 HTML 内容显示在 <iframe> 中<i>" width="500" height="500" frameborder="1" name="taobao">
<p>H5 不支持 frameborder。规定是否显示 iframe 周围的边框。1/0</p>
</iframe>
<button onclick="taobao.location='https://www.runoob.com'">打开淘宝</button>
二、表格
1. 表格属性
重点记住: cellspacing(单元格间距) 、 cellpadding(单元格边距)。
<table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>110</td>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>120</td>
</tr>
</table>
2. 表格标题caption
<table>
<caption>我是表格标题</caption>
</table>
注意:
- caption 元素定义表格标题,通常这个标题会被居中且显示于表格之上。
- caption 标签必须紧随 table 标签之后。
- 这个标签只存在 表格里面才有意义。你是风儿我是沙
3. 合并单元格(难点)
跨行合并:rowspan=”合并单元格的个数”
跨列合并:colspan=”合并单元格的个数”
合并单元格三步曲
合并的顺序我按照 先上 后下 先左 后右 的顺序
1- 先确定是跨行还是跨列合并
2- 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 : <td colspan="3"> </td>
3- 删除多余的单元格 单元格
4. 总结表格
标签名 | 定义 | 说明 |
---|---|---|
<table></table> |
表格标签 | 就是一个四方的盒子 |
<tr></tr> |
表格行标签 | 行标签要再table标签内部才有意义 |
<td></td> |
单元格标签 | 单元格标签是个容器级元素,可以放任何东西 |
<th></th> |
表头单元格标签 | 它还是一个单元格,但是里面的文字会居中且加粗 |
<caption></caption> |
表格标题标签 | 表格的标题,跟着表格一起走,和表格居中对齐 |
clospan 和 rowspan | 合并属性 | 用来合并单元格的 |
表格划分结构(了解)
<thead></thead>
:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!<tbody></tbody>
:用于定义表格的主体。放数据本体 。<tfoot></tfoot>
:放表格的脚注之类。- 以上标签都是放到table标签中。
三、列表标签(重点)
<!--定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。-->
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl>
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序列表 | 里面只能包含 li 没有顺序,我们以后布局中最常用的列表 |
<ol></ol> | 有序列表 | 里面只能包含 li 有顺序, 使用情况较少 |
<dl></dl> | 自定义列表 | 里面有2个兄弟, dt 和 dd |