当前位置:   article > 正文

HTML常见元素_html元素

html元素

1.文档声明

HTML最上方的一段文本我们称之为文档类型声明,用于声明文档类型

<!DOCTYPE html>
  • 1

HTML文档声明 告诉浏览器当前页面是HTML5页面

让浏览器用HTML5的标准去解析识别内容

必须放在HTML文档的最前面 不能省略 省略了会出现兼容性问题

2.常见元素

2.1 html元素

表示一个HTML文档的根 也被称为根元素

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

<!DOCTYPE html>
<html lang="en">
</html>
  • 1
  • 2
  • 3

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

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

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

比如常用的规则

  • lang="en”表示这个HTML文档的语言是英文
  • lang= "zh-CN”表示这个HTML文档的语言是中文
2.2 head元素

规定文档相关的配置信息(也称之为元数据) 包括文档的标题 引用的文档样式和脚本等

常见的设置

  • 网页的标题: title元素
<title>网页的标题</title>
  • 1
  • 网页的编码: meta元素
    • 可以用于设置网页的字符编码 让浏览器更精准地显示每一个文字 不设置或者设置错误会导致乱码
    • 一般都使用utf-8编码 涵盖了世界上几乎所有的文字
<meta charset="utf-8">
  • 1
2.3 body元素

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

大部分HTML元素都是在body中编写呈现的;

<body>
    <input type="text">
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ul>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
2.4 h元素

<h1>-<h6> 标题元素 呈现了六个不同级别的标题

  • <h1>级别最高 <h6>级别最低
<h1>h1标题标签</h1>
<h2>h2标题标签</h2>
<h3>h3标题标签</h3>
<h4>h4标题标签</h4>
<h5>h5标题标签</h5>
<h6>h6标题标签</h6>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
2.5 p元素

<p>元素表示文本的一个段落

  • p元素多个段落之间会有一定的间距
2.6 img元素

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

  • 实际上img是一个可替换元素

img有两个常见的属性

  • src属性 是必须的
    • 包含了你先嵌入的图片的文件路径
  • alt属性 不是强制性的 有两个作用
    • 作用一:当图片加载不成功 那么会显示这段文本
    • 作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听 让他们知道图像的含义

设置img的src时 需要给图片设置路径

  • 网络图片:一个URL地址

  • 网络图片的设置非常简单 给一个地址即可

  • 本地图片:本地电脑上的图片

  • 本地图片的路径有两种方式

    • 方式一:绝对路径(几乎不用)

      ​ 从电脑的根目录开始一直找到资源的路径

    • 方式二:相对路径(常用)

      ​ 相当于当前文件的一个路径

      ​ .代表当前文件夹(1个.) 可以省略

      ​ …代表上级文件夹(2个.)

  • 对于网页来说,管什么操作系统(Windows、Mac、Linux),路径分隔符都是/,而不是\

2.7 a元素

<a>元素 定义超链接 用于打开新的URL

  • a元素有两个常见的属性
    • href
      • 指定要打开的URL地址
      • 也可以是一个本地地址
    • target 指定在何处显示链接的资源
      • _self 默认值,在当前窗口打开URL
      • _blank 在新的窗口打开URL
      • _parent 在父窗口中打开URL
      • _top 在顶级窗口中代开URL

a元素 锚点链接 可以实现跳转到网页的具体位置

  • 锚点链接有两个步骤
  • 在要跳转的元素上定义一个id属性
  • 定义a元素 并且a元素的href指向对应的id

img元素a元素一起使用 可以实现图片链接

  • a元素中不存放文字 而是存放一个img元素
  • 也就是img元素是a元素的内容

a元素也可跳转到其他URL地址

如 下载zip 发送邮件

2.8 iframe元素

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

某些网页禁止嵌套

  • frameborder属性 用于规定是否显示边框
  • 1:显示
  • 0:不显示

可与a元素配合使用

2.9 div元素

div元素 多个div元素包裹的内容会在不同的行显示

  • 一般作为其他元素的父容器,把其他元素包住,代表一个整体

  • 用于把网页分割为多个独立的部分

2.10 span元素

span元素 多个span元素包裹的内容会在同一行显示

  • 默认情况下,跟普通文本几乎没差别
  • 用于区分特殊文本和普通文本,比如用来显示一些关键字

3.不常用元素

3.1 strong元素

strong元素 内容加粗、强调

  • 通常加粗会使用css样式来完成

  • 开发中很偶尔会使用一下

3.2 i元素

i元素 内容倾斜

  • 通常斜体会使用css样式来完成

  • 开发中偶尔会用它来做字体图标

3.3 code元素

code元素 用于显示代码

  • 偶尔会使用用来显示等宽字体
3.4 br元素

br元素 换行元素

  • 开发中已经不使用

4.全局属性

常见的全局属性

id 定义唯一标识符(ID) 该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符),脚本或样式(使用CSS)时标识元素。

class 一个以空格分隔的元素的类名(classes)列表 它允许CSS和JavaScript通过类选择器或者DOM方法来选择和访问特定的元素

style 给元素添加内联样式

title 包含表示与其所属元素相关信息的文本 这些信息通常可以作为提示呈现给用户 但不是必须的

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/329098
推荐阅读
相关标签
  

闽ICP备14008679号