一、认识网页的基本元素

汽水泡泡
34 阅读4分钟

一.网页的基本元素

1.1. 文档声明

当我们要引出一个定义的时候后,要问问为什么需要这个概念,以及这个概念是什么

为什么会有文档声明呢?

当浏览器在解析文档时需要使用什么标准,所以文档声明就是告诉浏览器这个文档要用html标准去解析 #### 文档声明是什么呢? ####

  • 文档声明是用于让浏览器解析是html文档

文档声明注意事项

  • 不能省略
  • 放在页面最前面

1.2. HTML元素

  • 根元素 ->只存在一个

  • 属性:

    • lang=en

      • 让浏览器的语音合成工具和翻译软件分析

1.3. head元素

  • head元素中存放元数据,元数据内容标签都会存放在head元素中

  • 什么是元数据呢-data about data

    • 元数据是设置整体内容的呈现或者行为、设置本文档与其他文档之间的关系、传达其他主内容以外的信息。

  • 常见元素

    • title ->设置网站名称
    • meta ->设置语言编码(utf-8)
    • link ->制定需要跳转的网页以及/设置网站的图标
    • style ->设置样式

image.png

1.4. body元素

一. h元素/p元素/strong元素(常用)

  • h元素 ->标题(h1~h6)
  • p元素 ->段落
  • strong元素 ->加粗-----它的兄弟b,(b只有加粗的作用,没有实际含义,符合css规范后不怎么使用)

二. br/hr/code元素

  • code元素与其他文本区别在于用于定义计算机代码文本
  • hr元素 -> 分割线设置
  • br元素 ->实现页面文段换行(常用div自动换行)

三. 字符实体

  •  ->空格
  • 有时候页面左右滑动使用符号可以用此代替
  • <小于
  • >大于
  • 需要使用的时候查找-字符实体表格

image.png

<!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 title="这是一段&quot;特殊&quot;的内容,非常'精彩'">我是DIV</div>
</body>
</html>

四. div和span元素

  • div->一般作为其他元素的父容器,将其他元素包裹,代表一个整体

    • 单独占一行
    • 用于将网页分割成多个独立部分

  • span元素将特殊文本和普通文本区分,统一归类

  • div元素

<body>
    <div class="box1">哈哈哈</div>
    <div class="box2">呵呵呵呵呵</div>
</body>
</html>
  • span元素代码
<body>
    <!-- 用class来精准分类.span用于归类普通文本 -->
   <span class="new-price">$66</span>
   <span class="old-price">$99</span> 
</body>
</html>

五. img元素

  • src(source:源头)

    • 图片路径

    • 本地路径

      • 绝对路径(很少使用)
        • 一旦位置发生改变,比如换台电脑运行,那么文件就找不到了
      • 相对路径

image.png

  • alt元素(一般都带上)

    • 当图片失效/加载失败的时候显示文本
    • 在seo层面,当蜘蛛抓取不出图片内容alt属性可以描述那张图片

  • width属性

    • 一般通过css显示,不常在html中的img标签中使用,一般不使用height,由width决定
<body>
    <p>网络图片位置</p>
    <img src="https://crawl.ws.126.net/8acd5c41333d55e16db7eece4f9af491.jpg" alt="">

    <p>绝对路径</p>
    <img src="D:\桌面\前端学习实践\HTML基本元素\img\1.jpg" alt="">

    <p>相对路径</p>
    <img src="../img/1.jpg" alt="">

    <p>相对路径2</p>
    <img src="1.jpg" alt="">

    <p>gif图片展示</p>
    <img src="https://img.zcool.cn/community/01639c586c91bba801219c77f6efc8.gif" alt="">

    <p>alt属性-当图片失效或者加载不出来时显示文本</p>
    <img src="https://img.zcool.cn/community" alt="加载不出哈哈哈">

    <!-- width属性使用,不常用 -->
    <img src="https://img.zcool.cn/community/01639c586c91bba801219c77f6efc8.gif" 
         alt=""
         width="300">
</body>
</html>

六. a元素

  • 常用属性

    • href: 超链接

    • target: url跳在那里

      • _self: 在当前网页跳转
      • _blank(常用):跳转到新的浏览器窗口
      • _parent
      • _top
      • _name

七. base元素

a和base使用,把相似的元素抽取,让代码简化

image.png

1.5. url/seo优化

  • SEO->搜索引擎优化

    • 常见的有百度/搜狗/google/360
    • h元素有利于seo优化,但一个网站中不应该出现过多的h元素,否则会被认为是k站,一般只有一个

1.6.注意事项

  1. 一个html文件一定不能缺少文档声明不便于浏览器解析
  2. 目前都使用utf-8字符编码
  3. 双标签不能缺少开始标签和结束标签,单标签不能多出结束标签
  4. 不能嵌套混乱
  5. 开发里面使用分割线一般使用div元素,然后使用样式,p元素不建议使用div
  6. !!!双引号内可以嵌套单引号

1.7.补充

  • 字符编码: 计算机中所有的东西都是0101表示,将文字存储到计算机中之后解析出来显示

  • unicode->utf-8

  • pre元素可以保留文字里面的空格,不常用

  • 在body里面能看到的东西一般都会对其进行归类

  • 类名一般不用驼峰,许多用中划线.- JS多用驼峰

avatar
文章
阅读
粉丝