Java之学习html元素

最新推荐文章于 2024-01-07 21:32:12 发布

小叶很努力

最新推荐文章于 2024-01-07 21:32:12 发布

阅读量330

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_70127371/article/details/127721757

版权

一个完整的HTML结构包括：

文档声明

html元素

head元素

body元素

html元素

<html> 元素表示一个 HTML 文档的根（顶级元素），所以它也被称为 根元素 。

所有其他元素必须是此元素的后代。

W3C标准建议为html元素增加一个 lang属性 ，作用是

帮助语音合成工具确定要使用的发音;

帮助翻译工具确定要使用的翻译规则;

比如常用的规则：

lang=“en” 表示这个HTML文档的语言是英文；

lang=“zh-CN” 表示这个HTML文档的语言是中文；

head元素

HTML head 元素规定文档相关的 配置信息（也称之为元数据）， 包括文档的标题，引用的文档样式和脚本等。

什么是元数据（ meta data ），是描述数据的数据；

这里我们可以理解成对整个页面的配置

网页的标题： title元素

网页的编码： meta元素

可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码；

一般都使用 utf-8编码，涵盖了世界上几乎所有的文字；

body元素

body元素里面的内容将是你 在浏览器窗口中看到的东西 ，也就是 网页的具体内容和结构 。

HTML元素

HTML元素本身很多，但是 常用的元素就是那么几个 。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element

我们只需要记住常用的，不常用的学会查看文档即可；

常用的元素 （暂时掌握下面几个就够了，90%时间都在写这几个）：

p元素、h元素；

img元素、a元素、iframe元素；

div元素、span元素；

ul、ol、li元素；

button元素、input元素；

table、thead、tbody、thead、th、tr、td；

常见元素 – h元素

<h1>–<h6> 标题 (Heading) 元素 呈现了六个不同的级别的标题

Heading是头部的意思，通常会用来做标题

<h1> 级别最高，而 <h6> 级别最低

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

</body>
</html>

常见元素 – p元素

如果我们想 表示一个 段落，这个时候可以使用 p 元素。

HTML <p> 元素（或者说 HTML 段落元素）表示 文本的一个段落 。

p 元素是 paragraph 单词的缩写，是段落、分段的意思；

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>

常见元素 - img元素

HTML <img> 元素 将一份图像嵌入文档。

img是image单词的所以，是图像、图像的意思；

事实上img是一个可替换元素（ replaced element ）；

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

常见元素 – a元素

HTML <a> 元素 （或称锚（anchor）元素）：

定义超链接，用于打开新的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>
  

  <!-- http://www.baidu.com -> 百度的服务器 -> index.html文件 -->
  <a href="http://www.baidu.com" target="_blank">百度一下</a>


  <a href="https://www.toutiao.com/amos_land_page/?category_name=topic_innerflow&event_type=hot_board&log_pb=%7B%22category_name%22%3A%22topic_innerflow%22%2C%22cluster_type%22%3A%222%22%2C%22enter_from%22%3A%22click_category%22%2C%22entrance_hotspot%22%3A%22outside%22%2C%22event_type%22%3A%22hot_board%22%2C%22hot_board_cluster_id%22%3A%227078044780403359777%22%2C%22hot_board_impr_id%22%3A%22202203251152380102112151401FC722C2%22%2C%22jump_page%22%3A%22hot_board_page%22%2C%22location%22%3A%22news_hot_card%22%2C%22page_location%22%3A%22hot_board_page%22%2C%22rank%22%3A%223%22%2C%22source%22%3A%22trending_tab%22%2C%22style_id%22%3A%2240132%22%2C%22title%22%3A%22%E4%BB%A5%E7%A7%91%E6%8A%80%E5%88%9B%E6%96%B0%E6%8E%A8%E5%8A%A8%E9%AB%98%E8%B4%A8%E9%87%8F%E5%8F%91%E5%B1%95%22%7D&rank=3&style_id=40132&topic_id=7078044780403359777">以科技创新推动高质量发展</a>

</body>
</html>

iframe元素

利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档

frameborder属性

用于规定是否显示边框

1：显示

0：不显示

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