02-HTML知识点

已注销
58 阅读2分钟

01-元素的介绍

00008.png

02-元素的属性

00009.png

03-元素的嵌套关系

00010.png

04-HTML结构分析

00011.png

4.1文档声明

这个不叫元素 00012.png

4.2 html元素

00013.png

4.3 head元素

主要用来写文档的配置信息 00014.png

05-HTML常见元素

5.1 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>
 <h1>1级标题</h1>
 <h2>2级标题</h2>
 <h3>3级标题</h3>
 <h4>4级标题</h4>
 <h5>5级标题</h5>
 <h6>6级标题</h6>
</body>
</html>

00015.png

5.2 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>相较于生活在看似更便宜的城市(如底特律或亚特兰大)，生活在高人均城市(纽约、旧金山)的富人(年收入超过10万美元的人)
  在食物方面的花费要少20%。在城市做美甲更便宜：纽约人花不到3美元就能做美甲，比排名前十的其他大城市都要便宜。
  城市提供的奢侈消费开始显得相当不平衡：城市居民不仅拥有更多消费选择，而且为此支付的费用也更少。很多城市女性需要做美甲，
  于是就有美甲沙龙来满足这种需求，而美甲沙龙之间的竞争则起到了自动调节价格的作用.
 </p>
  <p>大城市虽然都有很相似的购物中心和超市，但在消费习惯上可能非常不同，“在一些基础食物方面，我们可以看到一些城市比另一些更健康，
  而且数据显示，洛杉矶、纽约、迈阿密和旧金山拥有最庞大的水果和蔬菜消费人群。与旧金山以外的其他城市相比，
  洛杉矶人在新鲜蔬菜上的总支出一直比其他城市多30%至40%，在水果上的总支出则多10%至40%。部分是因为这些城市是那些极度关心健康和外表的人的大本营。
 </p>
</body>
</html>

00016.png

5.3 img元素

00017.png

5.4 可替换元素解释

00019.png

5.5 img常见2个属性

5.5.1 src

表示嵌入图片的文件路进(可以是图片的网络路径)

5.5.2 alt

作用1: 图片加载不成功,会显示这段文本
作用2: 屏幕阅读器会将这些描述给使用阅读者的使用者听

5.5.3 代码示例

<!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>
  <img src="https://cn.bing.com/images/search?q=%E5%9B%BE%E7%89%87&FORM=IQFRBA&id=0BDF3A3289356D51A820116655965BB18DA73F04" alt="这是一张图片">
</body>
</html>

5.6 a元素

00020.png

5.6.1 在当前页面打开

<!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="http://www.baidu.com">百度一下</a>
 </body>
</html>

5.6.2 重新开一个网页打开页面

<!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="http://www.baidu.com" target="_blank">百度一下</a>
 </body>
</html>

5.6.3 锚点链接

<!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="#theme01">跳转到主题1</a>
  <a href="#theme02">跳转到主题2</a>
  <a href="#theme03">跳转到主题3</a>
  <h2 id="theme01">主题1</h2>
    <p>
      这是主题1 <br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><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">主题2</h2>
    <p>
      这是主题2 <br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><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">主题3</h2>
    <p>
      这是主题3 <br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br>
      <br><br><br><br><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>

5.6.4 a元素和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>
<a href="https://miaosha.jd.com/#100037432256" target="_blank"></a>
</body>
</html>

06 div和span的区别

00021.png

07-HTML常见的全局属性

00022.png

08-字符实体

就是要在浏览器上显示一些特殊的符号,例如: 空格,大于,小于 如果直接空格,或者> < 这样浏览器是显示不出来的 代码实现

<!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>&lt;你好&gt;</p>
</body>
</html>

常见字符实体

00023.png

avatar
文章
阅读
粉丝