Home Explore Help
Sign In
lovecoding
/
W250913
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 3 weeks ago
parent
e6c853e86c
commit
3cdb53520c
7 changed files with 132 additions and 7 deletions
Split View Show Diff Stats
  1. 22 0
      1_HTML/10_换行标签.html
  2. 1 1
      1_HTML/3_图片标签.html
  3. 12 0
      1_HTML/5_列表.html
  4. 2 0
      1_HTML/6_表单元素.html
  5. 30 6
      1_HTML/7_表格.html
  6. 29 0
      1_HTML/8_标签嵌套规则.html
  7. 36 0
      1_HTML/9_行块标签.html

+ 22 - 0
1_HTML/10_换行标签.html
View File 

@@ -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> -->
 
+
 
+    <!-- <p>hello</p>
 
+    world -->
 
+
 
+    <!-- 换行标签 br -->
 
+    hello <br/> world
 
+</body>
 
+</html>

+ 1 - 1
1_HTML/3_图片标签.html
View File 

@@ -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>

+ 12 - 0
1_HTML/5_列表.html
View File 

@@ -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>
 
 </body>
 
 </html>

+ 2 - 0
1_HTML/6_表单元素.html
View File 

@@ -32,6 +32,8 @@
 
     <input type="button" value="按钮"> 
     <button>按钮</button>
 
 
+    <!-- 上传按钮 -->
 
+    <input type="file">
 
 
 </body>

+ 30 - 6
1_HTML/7_表格.html
View 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>
 
-                
+
 
             </tr>
 
             <tr>
 
                 <td>李四</td>
 
                 <!-- 行合并 后边的值是合并的行数 -->
 
                 <td rowspan="2">19</td>
 
                 <td>女</td>
 
-            </tr> 
+            </tr>
 
             <tr>
 
                 <td>王五</td>
 
-                
+
 
                 <td>男</td>
 
             </tr>
 
-        </tbody> 
+        </tbody>
 
+    </table>
 
+
 
+
 
+    <!-- 创建一个没有表头的表格 -->
 
+    <!-- th 就是表示单元格 放在表头或表身都可以 -->
 
+    <table border="1" cellspacing="0">
 
+        <tr>
 
+            <td>1</td>
 
+            <td>2</td>
 
+            <td>3</td>
 
+        </tr>
 
+        <tr>
 
+            <td>4</td>
 
+            <th>5</th>
 
+            <td>6</td>
 
+        </tr>
 
+        <tr>
 
+            <td>7</td>
 
+            <td>8</td>
 
+            <td>9</td>
 
+        </tr>
 
     </table>
 
 </body>
 
+
 
 </html>

+ 29 - 0
1_HTML/8_标签嵌套规则.html
View File 

@@ -0,0 +1,29 @@
 
+<!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>
 
+    <!-- div 相当于一个容器 可以用来包裹其他标签 本身没有任何样式 -->
 
+    <div>hello world</div>
 
+    hello world
 
+
 
+    <p>hello <span>hello</span> world</p>
 
+
 
+    <!-- p 如果作为容器内部只能放文本或文本标签 -->
 
+    <p>hello <div>hello</div> world</p>
 
+
 
+    <!-- 单个出现的标签不能作为容器 比如<img> -->
 
+
 
+    <!-- 链接也可以作为容器 -->
 
+
 
+    <!-- 表单元素不能作为容器 -->
 
+
 
+    <!-- 列表也可以作为容器 只有li可以作为容器 容纳任何表表 -->
 
+
 
+    <!-- 文本标签只能放文字 -->
 
+
 
+</body>
 
+</html>

+ 36 - 0
1_HTML/9_行块标签.html
View File 

@@ -0,0 +1,36 @@
 
+<!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>
 
+    <!-- 对标签可以分为行内元素和块元素 -->
 
+
 
+    <!-- 行内元素 -->
 
+    <!-- 多个行内元素在同一行进行展示 -->
 
+    <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>
 
+    </table>
 
+    ...
 
+</body>
 
+
 
+</html>