HTML 入门基础

htmledit_views">

1.排版标签

1. h1 最好写一个， h2~h6 能适当多写。

2. h1~h6 不能互相嵌套，例如： h1 标签中最好不要写 h2 标签了。

3. p 标签很特殊！p标签不能写块级元素(独占一行的叫块级元素)

4. 块级元素可以写行内元素和块级元素(行内元素是不独占一行)

5. 行内元素能写行内元素，不能写块级元素)

注: 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>

1. 块级元素 ：独占一行（排版标签都是块级元素）。

2. 行内元素 ：不独占一行（目前只学了： input ，稍后会学习更多）。

3. 使用原则：

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

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

3. 一些特殊的规则：

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

注意点：

相对路径中的 ./ 可以省略不写。

相对路径依赖的是当前位置，后期若调整了文件位置，那么文件中的路径也要修改。

绝对路径 ：以 根位置 作为参考点，去建立路径。

1. 本地绝对路径： E:/a/b/c/ 奥特曼 .jpg 。（很少使用）

2. 网络绝对路径： 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>

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:10010@qq.com">邮件联系</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. 自定义列表

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

2. 一个 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. 跨行跨

1. rowspan ：指定要跨的行数。

2. 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  youloveI        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>