HTML入门

文章目录

  • 一、认识HTML
  • 二、HTML结构分析
  • 三、HTML元素
  • 四、HTML全局属性
  • 五、字符实体

一、认识HTML

  • 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML元素是构建网站的基石。
  • 标记语言
    • 由无数个**标记(标签、tag)**组成
    • 是对某些内容进行特殊的标记,以供其他解释器识别处理
    • 比如使用**

      标记的文本会被识别为“标题”进行加粗、文字放大**显示
    • 标签和内容组成的称为元素(element)
  • 超文本
    • 表示不仅仅可以插入普通的文本(Text),还可以插入图片、音频、视频等内容
    • 还可以表示超链接(HyperLink),从一个网页跳转到另一个网页

二、HTML结构分析

//文档声明


//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>HTML结构分析title>
    head>
    <body>
        
    body>
html>
  • 文档声明

    • HTML文档声明,告诉浏览器当前页面是HTML5页面
    • 让浏览器用HTML5的标准去解析识别内容
    • 必须放在HTML文档的最前面,不能省略,省略了会出现兼容性问题
  • html元素

    • head元素

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

      2.常见的设置

      • 网页的标题:title元素
      • 网页的编码:meta元素
    • body元素

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

三、HTML元素

  • 元素结构
    HTML入门_第1张图片

opening tag:开始标签

closing tag:结束标签

an attribute and its value:属性及其值

enclosed text content:文本内容

  • 常用元素

    • h元素

      在一个页面中通常会有一些比较重要的文字作为标题,这个时候我们可以使用h元素。

      <h1>h1标题标签h1>
      <h2>h2标题标签h2>
      <h3>h3标题标签h3>
      <h4>h4标题标签h4>
      <h5>h5标题标签h5>
      <h6>h6标题标签h6>
      

HTML入门_第2张图片

  • p

    如果我们想表示一个段落,可以使用p元素。

  • img

    如果我们想告诉浏览器来显示一张图片,可以使用img元素。

    1. img元素-src属性

      必须的,它包含了你想嵌入的图片的文件路径。

    2. img元素-alt属性

      不是必须的。

      作用一:当图片加载不成功(错误的地址或者图片资源不存在),那么会显示这段文本;

      作用二:屏幕阅读器会将这些描述读给需要使用阅读器的使用者听,让他们知道图像的含义;

  • a

    如果在网页中我们经常需要跳转到另外一个链接,可以使用a元素。

    1. a元素-锚点链接

      在要跳到的元素上定义一个id属性;

      <p id="one">p>
      <p id="two">p>
      

      定义a元素,并且a元素的href指向对应的id;

      <a href="#one">段落一a>
      <a href="#two">段落二a>
      
    2. a元素-图片链接

      a元素中不存放文字,而是存放一个img元素;

      也就是img元素是a元素的内容;

      <a href="(放链接)">
            <img src="(图片路径)" alt="">
      a>
      
  • iframe

    在一个HTML文档中嵌入其他HTML文档。

  • div

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

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

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

  • span

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

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

    • strong:内容加粗、强调。
    • i:内容倾斜。
    • code:用于显示代码显示等宽字体
    • br:用于换行

四、HTML全局属性

  • 常见的全局属性
    • id:定义唯一标识符(ID),该标识符在整个文档中必须是唯一的。其目的是在链接(使用片段标识符),脚本或样 式(使用 CSS)时标识元素。
    • class:一个以空格分隔的元素的类名(classes )列表,它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选 择和访问特定的元素。
    • style:给元素添加内联样式。
    • title:包含表示与其所属元素相关信息的文本。 这些信息通常可以作为提示呈现给用户,但不是必须的。

五、字符实体

HTML入门_第3张图片

你可能感兴趣的:(HTML+CSS,html,前端,css)