HTML 入门基础

1.排版标签

h1 最好写一个， h2~h6 能适当多写。
h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。
p 标签很特殊！p标签不能写块级元素(独占一行的叫块级元素)
块级元素可以写行内元素和块级元素(行内元素是不独占一行)
行内元素能写行内元素，不能写块级元素)
注: 3 4 5会在后面讲解

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML排版标签 </title>
  <style>
    
    h1{
      color: red;
    }
  </style>
</head>

<body>
  <div>
    <h1> 把个人信息"安全堤"筑牢 </h1>

    <p> 2022-06-21 07:34 </p>
    <p>置身移动互联时代，人们在享受智能设备带来便利的同时，也在一些场景中面临个人信息泄露风险。随着时间推移，这样的风险日益呈现出新的表现形式。 </p>
    <p>
      一些APP声称看视频、玩游戏甚至走路都能赚钱，但用户想提现却难上加难，还容易泄露个人信息；新型不法软件图标透明、没有名称，在手机屏幕上十分隐蔽，不仅不停推送广告，还会收集并转卖用户隐私信息；个人信息安全和隐私保护话题引发关注，正说明其涉及群众切身利益，问题不容小视。
    </p>
  
  </div>
</body>

</html>

2.语义化标签

概念：用特定的标签，去表达特定的含义。
举例：对于 h1 标签，效果是文字很大（不重要），语义是网页主要内容（很重要）。

代码结构清晰可读性强。
有利于 SEO （搜索引擎优化）。
方便设备解析（如屏幕阅读器、盲人阅读器等）

3.块级元素与行内元素

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML块内元素与行内元素 </title>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

<body>
  <!-- 块级元素 独占一行 -->
  <!-- 行内元素：不独占一行 -->
  <!-- 规则1 块内元素能写的：行内元素，块内元素 -->
  <!-- <div>
    <h1>武昌理工</h1>
    <span>武汉大学</span>
    <span> 华中科技大学</span>
  </div> -->

  <!-- 规则2:行内元素能写的: 行内元素，但不能写块内元素 -->
  <!-- <span>
    <span> 江汉大学</span>
    <div> 长江大学</div>
  </span> -->
   
  <!-- 特殊规则 :h1-h6不能互相嵌套 -->
   <!-- <h1>
    你好
    <h2> 你不好</h2>
   </h1> -->

   <!-- p标签不能写块内元素 -->
    <!-- <p>
      你好
      <div>哈哈</div>
    </p> -->
  </body>

</html>

块级元素 ：独占一行（排版标签都是块级元素）。
行内元素 ：不独占一行（目前只学了： input ，稍后会学习更多）。
使用原则：

块级元素 中能写 行内元素 和 块级元素 （简单记：块级元素中几乎什么都能写）。

行内元素 中能写 行内元素 ，但不能写 块级元素 。

一些特殊的规则：
h1~h6 不能互相嵌套。
p 中不要写块级元素。

4.文本标签_常用的

文本标签通常都是行内元素。

生活中的例子： div 是大包装袋， span 是小包装袋。

5.文本标签_不常用的

了解即可

总结：
HTML标签太多了！记住那些：重要的、语义感强的标签即可；截止目前，有这些：
h1~h6 、 p 、 div 、 em 、 strong 、 span

6.图片标签

1.基本使用

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML图片元素</title>
</head>

<body>

  <img src="奥特曼.jpg" alt="奥特曼图片" width="450" height="450">
  <img src="./resource/小姐姐.gif" width="300" alt="小姐姐">
  <img src="./resource/我的自拍.jpg" alt="">
  <img src="./a/小姐姐.gif" alt="">

</body>

</html>

2.路径的分类

分为相对路径和绝对路径
相对路径 ：以 当前位置 作为参考点，去建立路径。

./resource/小姐姐.gif
注意点：
相对路径中的 ./ 可以省略不写。
相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。
绝对路径 ：以 根位置 作为参考点，去建立路径。

本地绝对路径： E:/a/b/c/ 奥特曼 .jpg 。（很少使用）
网络绝对路径： http://www.atguigu.com/images/index_new/logo.png 。

注意点：
使用本地绝对路径，一旦更换设备，路径处理起来比较麻烦，所以很少使用。
使用网络绝对路径，确实方便，但要注意：若服务器开启了防盗链，会造成图片引入
失败。

7.超链接

主要作用：从当前页面进行跳转。

1. 跳转到页面

html 复制代码

  <a href="https://chat.deepseek.com/" target="_blank"> 转AI</a>

注意点：
1. 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
2. 虽然 a 是行内元素，但 a 元素可以包裹除它自身外的任何元素！

2.跳转到文件

html 复制代码

<a href="./resource/小姐姐.gif">看小姐姐</a>

html 复制代码

<a href="./resource/内部资源.zip">内部资源</a>

html 复制代码

<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>

注意：若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML超链接</title>
</head>

<body>
  <a href="https://chat.deepseek.com/" target="_blank"> 转AI</a>
  <a href="09_HTML图片元素.html" target="_blank">
  <img width="50" src="奥特曼.jpg" alt="图片">
    HTML图片元素 </a>
    <a href="12_HTML超链接跳转锚点.html#girl">看其他界面的女朋友</a>
  
</body>

</html>

3.跳转到锚点

什么是锚点？ ------ 网页中的一个标记点
第一步：设置锚点
第二步：跳转锚点
方法1

html 复制代码

<a href="#test1">去test1锚点</a>

  <a name="test1"></a>
  <p>test1锚点</p>
  <img src="./a/小姐姐.gif" alt="小姐姐">

方法2

html 复制代码

  <a href="#girl">看女朋友</a>
<p id="girl">我的女朋友</p>
  <img src="./resource/小姐姐.gif" width="800" alt="小姐姐">

个人用方法****2

html 复制代码

<!-- 跳到本页面顶部 -->

  <a href="#">回到顶部</a>

<a href = "" > 刷新本页面 </a>

<a href = "demo.html#test1" > 去 demo.html 页面的 test1 锚点 </a>

4.唤起指定应用

过 a 标签，可以唤起设备应用程序。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>唤起指定应用</title>
</head>

<body>
  <a href="tel:10010"> 电话联系</a>
  <a href="mailto:[email protected]">邮件联系</a>
  <a href="sms:10086">短信联系</a>

</body>

</html>

8.列表

1.有序列表(ol)

概念：有顺序或侧重顺序的列表。

<li>是列表项

html 复制代码

<h2>要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li>
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>

2.无序列表(ul)

概念：无顺序或不侧重顺序的列表。

html 复制代码

<h2>我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>

3.列表嵌套

概念：列表中的某项内容，又包含一个列表（注意：嵌套时，请务必把解构写完整）。

html 复制代码

<ul>
    <li>北京</li>
    <li>
       <span>上海</span>
       <ul>
        <li>外滩</li>
        <li>东方明珠</li>
        <li>武康路</li>
       </ul>
    </li>
    <li>广州</li>
    <li>深圳</li>
  </ul>

注意： li 标签最好写在 ul 或 ol 中，不要单独使用。

4.自定义列表

概念：所谓自定义列表，就是一个包含 术语名称 以及 术语描述 的列表。

一个 dl 就是一个自定义列表，一个 dt 就是一个术语名称，一个 dd 就是术语描述（可以有多个

html 复制代码

<!-- 自定义列表 -->
  <dl>
    <dt>敲代码最重要的是什么？</dt>
    <dd>不怕错，坚持</dd>
    <dt>做好笔记</dt>
    <dd>笔记是可以以后复习的</dd>
  </dl>

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML列表</title>
</head>

<body>

  <!-- 有序列表 -->
  <h2>要把大象放进冰箱总共几步</h2>
  <ol>
    <li>把冰箱门打开</li>
    <li>把大象放进去</li>
    <li>把冰箱门关上</li>
  </ol>

  <!-- 无序列表 和嵌套-->
  <ul>
    <li>北京</li>
    <li>
       <span>上海</span>
       <ul>
        <li>外滩</li>
        <li>东方明珠</li>
        <li>武康路</li>
       </ul>
    </li>
    <li>广州</li>
    <li>深圳</li>
  </ul>
  <!-- 自定义列表 -->
  <dl>
    <dt>敲代码最重要的是什么？</dt>
    <dd>不怕错，坚持</dd>
    <dt>做好笔记</dt>
    <dd>笔记是可以以后复习的</dd>
  </dl>

</body>

</html>

9.表格

1.基本结构

表格涉及到的标签：
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格（备注：表格头部中用 th ，表格主体、表格脚注中用： td ）

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML表格整体结构</title>
</head>

<body>
  <table border="1">
    <!-- 表格标题 -->
    <caption学>生信息</caption学>
    <!-- 表格头部 -->
    <thead>
      <!-- tr代表每一行，th是表格头部 -->
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>民族</th>
        <th>政治面貌</th>
      </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
      <!-- tr代表每一行，td代表主体或者表格脚注 -->
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
        <td>汉族</td>
        <td>团员</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>20</td>
        <td>满族</td>
        <td>群众</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>男</td>
        <td>19</td>
        <td>回族</td>
        <td>党员</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>女</td>
        <td>21</td>
        <td>壮族</td>
        <td>团员</td>
      </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td>共计：4人</td>
      </tr>
    </tfoot>
  </table>

</body>

</html>

2.常用属性

<table> 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格
边框的宽度

3.跨行跨

rowspan ：指定要跨的行数。
colspan ：指定要跨的列数。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML表格属性</title>
</head>

<body>
  <table border="1" cellspacing="0">
    <!-- 表格标题 -->
    <caption>课程表</caption>
    <!-- 表格头部 -->
    <thead>
      <!-- tr代表每一行，th是表格头部  colspan 扩列 rowspan扩行-->
      <tr>
        <th>项目</th>
        <th colspan="5">上课</th>
        <th colspan="2">活动与休息</th>

      </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
      <!-- tr代表每一行，td代表主体或者表格脚注 -->
      <tr>
        <td>星期</td>
        <td>星期一</td>
        <td>星期二</td>
        <td>星期三</td>
        <td>星期四</td>
        <td>星期五</td>
        <td>星期六</td>
        <td>星期日</td>
      </tr>
      <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>英语</td>
        <td>英语</td>
        <td>物理</td>
        <td>数学竞赛</td>
        <td rowspan="4">休息</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>语文</td>
        <td>化学</td>
        <td>物理</td>
        <td>英语</td>
        <td>篮球比赛</td>
      </tr>
      <tr>
        <td>语文</td>
        <td>语文</td>
        <td>物理</td>
        <td>化学</td>
        <td>英语</td>
        <td>英语比赛</td>
      </tr>
      <tr>
        <td>体育</td>
        <td>数学</td>
        <td>语文</td>
        <td>化学</td>
        <td>每周一考</td>
        <td>社会实践</td>
      </tr>
      <tr>
        <td rowspan="2">下午</td>
        <td>语文</td>
        <td>英语</td>
        <td>体育</td>
        <td>数学</td>
        <td>物理</td>
        <td>英语角</td>
        <td rowspan="2">休息</td>
      </tr>
      <tr>
        <td>化学</td>
        <td>物理</td>
        <td>生物</td>
        <td>数学</td>
        <td>物理</td>
        <td>自由活动</td>
      </tr>
    </tbody>
    <!-- 表格脚注 -->
    <tfoot>

    </tfoot>
  </table>

</body>

</html>

10. 常用标签补充

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>HTML标签扩展</title>
</head>

<body>
  <div>br这个标签的作用就是换行:</div>
  <br>
  <a href="https://www.baidu.com/">去百度</a>
  <br>
  <div>hr这个标签的作用就是分割</div>
  <hr>
  <a href="https://www.bilibili.com/">去B站</a>
<div>pr这个标签就是按原文显示</div>
<pre>
    I   love  you

          love
       I        you    
</pre>
</body>

</html>

10. 表单

1.基本结构

html 复制代码

<!-- form是表单标签，input是输入标签，button是按钮标签 -->
  <form action="https://baidu.com/s" method="get"> 
    <input type="text" name="wd">
    <button>百度搜索</button>
  </form>

2.常用表单控件

html 复制代码

   <!-- 文本输入框 -->
    账户: <input type="text" name="zh" value="zhangsan">

html 复制代码

  <!-- 密码输入框 -->
    密码: <input type="password" name="pwd">

html 复制代码

 <!-- 单选输入框 -->
    性别: <input type="radio" name="gender" value="女">女
    <input type="radio" name="gender" value="男">男

html 复制代码

    爱好: <input type="checkbox" name="hobby" value="smoke">抽烟
    <input type="checkbox" name="hobby" value="drink">喝酒
    <input type="checkbox" name="hobby" value="perm">烫头

注：单选和复选框一定要加name，value 属性

html 复制代码

    <!-- 隐藏域 -->
    <input type="hidden" name="tag" value="100"><br>

html 复制代码

  <!-- 提交按钮 -->
    <!-- 方法一 -->
    <button>确认</button>
    <!-- 方法2 -->
    <!-- <input type="submit" value="确定"> -->

html 复制代码

  <!-- 重置按钮 -->
    <!-- 方法1 -->
    <button type="reset">重置</button>
    <!-- 方法2 -->
    <!-- <input type="reset" value="重置"> -->

html 复制代码

   <!-- 普通按钮 -->
    <button type="button">检查账户是否被注册</button>

html 复制代码

    <!-- 文本域 -->
    其他: <textarea name="msg" rows="3" cols="23"></textarea>

html 复制代码

    <!-- 下拉框 -->
    籍贯: <select name="from">
      <option value="黑"> 黑龙江</option>
      <option value="粤"> 广东</option>
      <option  value="鄂" selected> 湖北</option>
    </select>

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <title>label 标签</title>
</head>

<body>
  <form action="https://search.jd.com/search">
    <fieldset>主要信息：
      <br>
      <label for="zhangsan">账户</label>
      <!-- 文本输入框 -->
      <input id="zhangsan" type="text" name="zh" value="zhangsan">
      <br>
      <label>
        <!-- 密码输入框 -->
        密码: <input id="password" type="password" name="pwd">
      </label>
      <br>
      <!-- 单选输入框 -->
      性别: <input type="radio" name="gender" value="女">女
      <input type="radio" name="gender" value="男">男
      <br>

    </fieldset>
    <br>
    <fieldset>附加信息：
      <br>
      <!-- 复选输入框 -->
      爱好: <input type="checkbox" name="hobby" value="smoke">抽烟
      <input type="checkbox" name="hobby" value="drink">喝酒
      <input type="checkbox" name="hobby" value="perm">烫头
      <br>
      <!-- 文本域 -->
      其他: <textarea name="msg" rows="3" cols="23"></textarea>
      <br>
      <!-- 下拉框 -->
      籍贯: <select name="from">
        <option value="黑"> 黑龙江</option>
        <option value="粤"> 广东</option>
        <option value="鄂" selected> 湖北</option>
      </select>
    </fieldset>

    <!-- 隐藏域 -->
    <input type="hidden" name="tag" value="100"><br>
    <!-- 提交按钮 -->
    <!-- 方法一 -->
    <button>确认</button>
    <!-- 方法2 -->
    <!-- <input type="submit" value="确定"> -->
    <!-- 重置按钮 -->
    <!-- 方法1 -->
    <button type="reset">重置</button>
    <!-- 方法2 -->
    <!-- <input type="reset" value="重置"> -->
    <!-- 普通按钮 -->
    <button type="button">检查账户是否被注册</button>
  </form>
</body>

</html>

1.排版标签

**2.**语义化标签

3.块级元素 与 行内元素

**4.文本标签_**常用的

**5.文本标签_**不常用的

**6.**图片标签

**1.**基本使用

**2.**路径的分类

7.超链接

1. 跳转到页面

**2.**跳转到文件

**3.**跳转到锚点

**4.**唤起指定应用

8.列表

**1.**有序列表(ol)

**2.**无序列表(ul)

**3.**列表嵌套

**4.**自定义列表

**9.**表格

**1.**基本结构

**2.**常用属性

**3.**跨行跨

10. 表单

**1.**基本结构

**2.**常用表单控件

2.语义化标签

3.块级元素与行内元素

4.文本标签_常用的

5.文本标签_不常用的

6.图片标签

1.基本使用

2.路径的分类

2.跳转到文件

3.跳转到锚点

4.唤起指定应用

1.有序列表(ol)

2.无序列表(ul)

3.列表嵌套

4.自定义列表

9.表格

1.基本结构

2.常用属性

3.跨行跨

1.基本结构

2.常用表单控件