@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+</head>
+<body>
+ <!-- 在代码中手动换行输入回车页面是不会换行的不识别 -->
+ <!-- 页面中如果想实现换行只能有标签 -->
+ hello
+ world
+ <!-- <p>hello</p>
+ <p>world</p> -->
+
+ world -->
+ <!-- 换行标签 br -->
+ hello <br/> world
+</body>
+</html>
@@ -12,6 +12,6 @@
<!-- width 属性 图片宽度 -->
<!-- height 属性 图片高度 -->
<!-- 如果只设置宽度或者高度 另一个属性会等比例缩放 -->
- <img src="./bdlogo.png" alt="这是一张图片" width="100" height="200">
+ <img src="./bdlogo.png" alt="这是一张图片" width="100" height="200"/>
</body>
</html>
@@ -27,5 +27,17 @@
<li>无序列表项4</li>
<li>无序列表项5</li>
</ul>
+ <!-- 自定义列表 -->
+ <dl>
+ <!-- dt 定义列表的标题 -->
+ <dt>A开头的字母</dt>
+ <!-- dd 定义列表的内容 -->
+ <dd>Alice</dd>
+ <dd>Apple</dd>
+ <dt>B开头的字母</dt>
+ <dd>Bob</dd>
+ <dd>Banana</dd>
+ </dl>
@@ -32,6 +32,8 @@
<input type="button" value="按钮">
<button>按钮</button>
+ <!-- 上传按钮 -->
+ <input type="file">
@@ -1,10 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格 -->
<table border="1" cellspacing="0">
@@ -17,29 +19,51 @@
<th>年龄</th>
<th>性别</th>
</tr>
- </thead>
+ </thead>
<!-- 表身 -->
<tbody>
<!-- 行 -->
<tr>
<!-- 表身单元格 -->
- <td>张三</td>
+ <td>张三</td>
<!-- colspan 合并列 后边的值是合并的列数 -->
<td colspan="2">-</td>
-
<td>李四</td>
<!-- 行合并 后边的值是合并的行数 -->
<td rowspan="2">19</td>
<td>女</td>
- </tr>
+ </tr>
<td>王五</td>
<td>男</td>
- </tbody>
+ </tbody>
+ </table>
+ <!-- 创建一个没有表头的表格 -->
+ <!-- th 就是表示单元格 放在表头或表身都可以 -->
+ <table border="1" cellspacing="0">
+ <tr>
+ <td>1</td>
+ <td>2</td>
+ <td>3</td>
+ <td>4</td>
+ <th>5</th>
+ <td>6</td>
+ <td>7</td>
+ <td>8</td>
+ <td>9</td>
</table>
@@ -0,0 +1,29 @@
+ <!-- div 相当于一个容器 可以用来包裹其他标签 本身没有任何样式 -->
+ <div>hello world</div>
+ hello world
+ <p>hello <span>hello</span> world</p>
+ <!-- p 如果作为容器内部只能放文本或文本标签 -->
+ <p>hello <div>hello</div> world</p>
+ <!-- 单个出现的标签不能作为容器 比如<img> -->
+ <!-- 链接也可以作为容器 -->
+ <!-- 表单元素不能作为容器 -->
+ <!-- 列表也可以作为容器 只有li可以作为容器 容纳任何表表 -->
+ <!-- 文本标签只能放文字 -->
@@ -0,0 +1,36 @@
+ <!-- 对标签可以分为行内元素和块元素 -->
+ <!-- 行内元素 -->
+ <!-- 多个行内元素在同一行进行展示 -->
+ <span>hello</span><span>world</span>
+ <i></i>
+ <b></b>
+ <del></del>
+ ...
+ <!-- 块元素 -->
+ <!-- 每一个块元素独占一行 -->
+ <div>hello</div>
+ <div>world</div>
+ <p></p>
+ <h1></h1>
+ <ul>
+ <li></li>
+ </ul>
+ <table>
+ <tr></tr>