首页前端知识 HTML常见的元素

HTML常见的元素

2024-07-08 09:07:19 前端知识前端哥 72 3 我要收藏

目录

一、完整的HTML结构

二、文档声明

三、html元素

四、head元素

五、body元素

六、HTML元素

七、案例分析 – 使用什么元素

八、常见元素 – h元素

九、常见元素 – p元素

十、案例练习

十一、常见元素 - img元素

十二、img元素 - 图片的路径

十三、img元素 - 图片的格式

十四、常见元素 – a元素

十五、a元素 - 锚点链接

十六、a元素 - 图片链接

十七、a元素 – 其他URL地址

十八、iframe元素

十九、div元素、 span元素的历史

二十、div元素、 span元素的区别

二十一、不常用元素

二十二、HTML全局属性

一、完整的HTML结构

二、文档声明

三、html元素

四、head元素

五、body元素

六、HTML元素

七、案例分析 – 使用什么元素

八、常见元素 – h元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- h元素 h1~h6 -->
  <h1>我是h1标题</h1>
  <h2>我是h2标题</h2>
  <h3>我是h3标题</h3>
  <h4>我是h4标题</h4>
  <h5>我是h5标题</h5>
  <h6>我是h6标题</h6>

  <!-- 额外: 浏览器到底是通过什么来区分出来h1~h6(呈现的时候) -->

</body>
</html>

九、常见元素 – p元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

  <p>
    最后一个是国王，他是小王子在离开自己的星球后拜访的第一个小星球325上仅有的居民。这个国王称自己统治所有一切，他的统治必须被尊敬和不容忤逆;然而，事实上他只是徒有虚名，他只能让别人去做别人自己想做的事。
  </p>
  <p>
    这些都是光遇里的小王子季节留下的一个独立的小星球，这里包括了小王子遇到的很多人，每个人都是独立的一个小星球，虽然小王子遇到他们虽然不理解，但是他们都是独立的人格，每个人都是自己独立的星球。
  </p>

</body>
</html>

十、案例练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <h1>史蒂夫·乔布斯</h1>
  <p>
    （美国苹果公司联合创始人）
  </p>

  <p>
    史蒂夫·乔布斯（Steve Jobs，1955年2月24日—2011年10月5日 [1]  ），出生于美国加利福尼亚州旧金山，美国发明家、企业家、苹果公司联合创始人。
  </p> 
  <p>
    1976年4月1日，乔布斯签署了一份合同，决定成立一家电脑公司。 [2]  1977年4月，乔布斯在美国第一次计算机展览会展示了苹果Ⅱ号样机。1998年苹果推出iMac [3]  ，创新的外壳颜色透明设计使得产品大卖，并让苹果度过财政危机。2011年8月24日，史蒂夫·乔布斯向苹果董事会提交辞职申请。 [4] 
  </p>
  <p>
    乔布斯被认为是计算机业界与娱乐业界的标志性人物，他经历了苹果公司几十年的起落与兴衰，先后领导和推出了麦金塔计算机、iMac、iPod、iPhone、iPad等风靡全球的电子产品，深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前皮克斯动画工作室的董事长及首席执行官。
  </p>
  <p>
    2011年10月5日，史蒂夫·乔布斯因患胰腺神经内分泌肿瘤 [5]  病逝，享年56岁。 [1] 
  </p>

</body>
</html>

十一、常见元素 - img元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <p>哈哈哈哈</p>
  <!-- src -> source(源) -->
  <img width="300" src="https://p6.toutiagin/tos-cn-i-qvj2lq49k0/ec7d03634695464cab47abfe2a00efb0?from=pc" alt="小王子图片">
  <p>呵呵呵呵</p>

</body>
</html>

十二、img元素 - 图片的路径

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div class="box">fdafdas</div>
  
  <!-- 
    src:
      1.网络图片
      2.
   -->
  <!-- <img src="https://s10.mogucdn.com/mlcdn/c45406/180919_3f62ijgkj656k2lj03dh0di4iflea_750x390.jpg"> -->

  <!-- 本地图片
    图片的路径: 
      1> 绝对(absolute)路径: 根盘符开始查找, 一直找到这个资源
      2> 相对(relative)路径: bx
  -->
  <!-- <img src="F:\共享给学生文件夹\上课资料\01_阶段一-HTML+CSS\Learn_HTML_CSS\images\gouwujie01.jpg" alt=""> -->
  <img src="../images/gouwujie01.jpg" alt="">




</body>
</html>

十三、img元素 - 图片的格式

十四、常见元素 – a元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- blank: 空白的 -->
  <!-- http://www.baidu.com -> 百度的服务器 -> index.html文件 -->
  <a href="http://www.baidu.com" target="_blank">百度一下</a>

  <!-- 链接到本地的网页(本地的资源地址) -->
  <a href="./09_img元素中的图片路径.html" target="_self">本地网站</a>

  <!-- 案例: 头条新闻的跳转 -->
  <a href="https://www.toutiao.com/amos_land_page/?category_name=topic_innerflow&event_type=hot_board&log_pb={"category_name":"topic_innerflow","cluster_type":"2","enter_from":"click_category","entrance_hotspot":"outside","event_type":"hot_board","hot_board_cluster_id":"7078044780403359777","hot_board_impr_id":"202203251152380102112151401FC722C2","jump_page":"hot_board_page","location":"news_hot_card","page_location":"hot_board_page","rank":"3","source":"trending_tab","style_id":"40132","title":"以科技创新推动高质量发展"}&rank=3&style_id=40132&topic_id=7078044780403359777">以科技创新推动高质量发展</a>

</body>
</html>

十五、a元素 - 锚点链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    页面内的锚点效果
    1. 在跳转到的元素上添加id
    2. 定义a元素, 并且a元素的href属性指向id
   -->

   <a href="#theme01">跳转到主题一</a>
   <a href="#theme02">跳转到主题二</a>
   <a href="#theme03">跳转到主题三</a>
  
  <h2 id="theme01">主题一</h2>
  <p>
    我是coderwhy <br> 哈哈哈哈哈哈
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </p>
  <h2 id="theme02">主题二</h2>
  <p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </p>
  <h2 id="theme03">主题三</h2>
  <p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </p>

</body>
</html>

十六、a元素 - 图片链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href="https://www.mi.com/redmik50" target="_blank">
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0ab8e5096ac6f08bd632e4d5a15d1792.jpg?w=632&h=340" alt="">
  </a>

</body>
</html>

十七、a元素 – 其他URL地址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <!-- 指向链接: zip压缩包 -->
  <a href="https://github.com/coderwhy/HYMiniMall/archive/master.zip">下载zip包</a>

  <!-- 指向其他协议地址: mailto -->
  <a href="mailto:123@qq.com">发邮件给123@qq.com</a>

</body>
</html>

十八、iframe元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <h1>哈哈哈</h1>
  <p>呵呵呵呵呵呵</p>

  <iframe src="http://www.taobao.com" width="800" height="600" frameborder="0"></iframe>
  <iframe src="http://www.mi.com" width="800" height="600" frameborder="0"></iframe>
  <iframe src="http://www.baidu.com" width="800" height="600" frameborder="0"></iframe>
  <iframe src="http://www.jd.com" width="800" height="600" frameborder="0"></iframe>

</body>
</html>

十九、div元素、 span元素的历史

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .area {
      border: 1px solid red;
    }

    .keyword {
      font-size: 30px;
      font-weight: 700;
      color: blue;
    }
  </style>
</head>
<body>
  
  <h1>学习前端</h1>



  <div class="area">
    <h2>1.学习HTML+CSS</h2>
    <p>
      先学习HTML, 再学习CSS, 了解一些历史/本质等等
    </p>
  </div>



  <div class="area">
    <h2>2.学习JavaScript</h2>
    <p>
      学习<span class="keyword">JavaScript</span>的基本语法, BOM/DOM, 学网络请求, 学习ES6~12, 学习一些高级语法, 原理
    </p>
  </div>



  <div class="area">
    <h2>3.学习工具</h2>
    <p>
      npm/node/webpack/git
    </p>
  </div>

</body>
</html>

二十、div元素、 span元素的区别

二十一、不常用元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <p>好好<strong>学习</strong>, 天天<i>向上</i></p>

</body>
</html>

二十二、HTML全局属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <p title="coderwhy">我是段落</p>

</body>
</html>

转载请注明出处或者链接地址：https://www.qianduange.cn//article/13857.html

标签

上一篇：HTML基本结构及基本标签

下一篇：【Java 进阶篇】JavaScript 与 HTML 的结合方式

评论

相关文章

前端哥

发布的文章

java/php/node.js/python基于HTML5的“牧经校园疫情防控网站”的设计与实现【2024年毕设】

2024-08-04 00:08:26

HTML5 WebSocket介绍与基本使用（解析服务端返回的二进制数据）

2024-08-04 00:08:22

AngularJS进阶(二十五)requirejs angular angular-route 浅谈HTML5单页面架构_requirejs angular

2024-05-05 12:05:27

入门HTML5：简单的个人注册信息页面实现

2024-08-04 00:08:12

【网页设计】期末大作业：化妆品主题——绿色大气的html5响应式化妆品护肤品肌肤网页设计(11页)

2024-02-26 20:02:22

分享82个html5特效，总有一款适合您

2024-03-15 10:03:20

【python011】经纬度点位可视化html生成（有效方案）

2024-08-04 00:08:51

html左右两栏布局实现

2024-08-04 00:08:50

前端高频面试题整理含答案-HTML篇（2024）

2024-08-04 00:08:47

叮咚，您有一封告白信件待查收（原生HTML(1)，2024年大厂Web前端高级面试题分享

2024-08-04 00:08:17

大家推荐的文章

1
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

2
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

3
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

4
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

5
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

6
jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000

7
基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000

8
VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000

9
轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

10
HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000

rss订阅百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心联系我留言建议回顶部

复制成功！