HTML 入门基础

devtools/2025/2/13 23:03:51/
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>

<!-- 跳转到其他页面锚点 -->
<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: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>

 


http://www.ppmy.cn/devtools/158612.html

相关文章

VSCode中出现“#include错误，请更新includePath“问题，解决方法

VSCode中出现“#include错误，请更新includePath“问题，解决方法

1、出现的问题 在编写C程序时&#xff0c;想引用头文件但是出现如下提示&#xff1a; &#xff08;1&#xff09;首先检查要引用的头文件是否存在&#xff0c;位于哪里。 &#xff08;2&#xff09;如果头文件存在&#xff0c;在编译时提醒VSCode终端中"#include错误&am…
阅读更多...
南大通用数仓-GCDW-学习-05-外部表

南大通用数仓-GCDW-学习-05-外部表

目录 一、环境信息 二、概念 三、注意点 四、支持数据源和数据格式 五、实操 1、创建外部表 &#xff08;1&#xff09;语法树 &#xff08;2&#xff09;示例 2、查看外部表 &#xff08;1&#xff09;语法树 &#xff08;2&#xff09;示例 3、查看外部表详细 &a…
阅读更多...
38.社区信息管理系统(基于springboothtml)

38.社区信息管理系统(基于springboothtml)

目录 1.系统的受众说明 2.需求分析及相关技术 2.1设计目的 2.2社区信息管理系统的特点 2.3可行性分析 2.3.1技术可行性 2.3.2运行可行性 2.4系统设计 2.4.1系统功能分析 2.4.2管理员权限功能设计 2.4.3业主权限功能设计 2.5系统的技术介绍 2.5.1 Html 2.5.2 Aja…
阅读更多...
SpringBoot+Dubbo+zookeeper 急速入门案例

SpringBoot+Dubbo+zookeeper 急速入门案例

项目目录结构&#xff1a; 第一步&#xff1a;创建一个SpringBoot项目&#xff0c;这里选择Maven项目或者Spring Initializer都可以&#xff0c;这里创建了一个Maven项目&#xff08;SpringBoot-Dubbo&#xff09;&#xff0c;pom.xml文件如下&#xff1a; <?xml versio…
阅读更多...
PySide6 异步执行任务开发指南

PySide6 异步执行任务开发指南

PySide6 异步执行任务开发指南 在 GUI 开发中&#xff0c;保持界面响应是关键。以下是在 PySide6 中实现异步任务的完整解决方案&#xff1a; 一、基础原理 主线程&#xff08;GUI线程&#xff09;&#xff1a;负责处理所有界面交互和绘制阻塞危害&#xff1a;主线程执行耗时…
阅读更多...
maven导入spring框架

maven导入spring框架

在eclipse导入maven项目&#xff0c; 在pom.xml文件中加入以下内容 junit junit 3.8.1 test org.springframework spring-core ${org.springframework.version} org.springframework spring-beans ${org.springframework.version} org.springframework spring-context ${org.s…
阅读更多...
Windows 11 卸载 Edge

Windows 11 卸载 Edge

前言 咋说呢&#xff0c;Edge 确实有它好的一面&#xff0c;自带微软翻译速度可观&#xff0c;确实是 Chrome 自带翻译不可用现状下的首选 &#xff08;李玲玲你好啊&#xff09;&#xff0c;但是深度绑定微软生态&#xff0c;而且还挺重&#xff0c;使我最终放弃了使用 Edge&…
阅读更多...
尚硅谷爬虫note001

尚硅谷爬虫note001

一、模板设置 file——setting——editor——code style——file and code template——python script # _*_ coding : utf-8 _*_ # Time : ${DATE} ${TIME} # Author : 20250206-里奥 # File : ${NAME} # Project : ${PROJECT_NAME} 二、数据类型 2-1. 数字 整型int 浮点型f…
阅读更多...
最新文章

Copyright @ 2022~2023