其他分享
首页 > 其他分享> > HTML认知学习分享

HTML认知学习分享

作者:互联网


HTML初识

基础认知

一、基础概念(了解)

  1. 认识网页

    网页组成:文字、图片、音频、视频、超链接

    网页背后的本质:前端程序员写的代码

    前端代码通过浏览器转化(解析和渲染)成用户看到的网页

     

  2. 五大浏览器和渲染引擎

    浏览器内核(渲染引擎)备注
    IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
    Firefox Gecko 火狐浏览器
    Safari Webkit 苹果浏览器
    Chrome / Opera Blink blink是webkit的分支

    注意点:

    • 渲染引擎不同,导致解析相同代码时的 速度、性能、效果也不同的

    • 谷歌浏览器的渲染引擎速度快、性能高、效果好,所以更吸引用户的喜爱(推荐)

       

  3. Web标准

    • 不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异

    • 如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差!

    Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一!

    Web标准的构成:

    构成语言说明
    结构 HTML 页面元素和内容
    表现 CSS 网页元素的外观和位置的页面样式
    行为 JavaScript 网页模型的定义与页面交互

 

二、HTML初体验

  1. HTML概念

    HTML(Hyper Text Markup Language)中文译为:超文本标记语言

    ​ 专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

     

  2. HTML骨架结构

    网页类似于一篇文章:

    • 每一页文章内容是有固定的结构的,如:开头、正文、落款等……

    • 网页中也是存在固定的结构的,如:整体、头部、标题、主体

    网页中的固定结构是要通过特点的 HTML标签 进行描述的

     

  3. 开发者工具的使用

    实际开发中,注重开发的 效率和便捷性 ,因此我们会使用一些开发工具

    • Visual Studio Code

    • Webstorm

    • Sublime

    • Dreamweaver

    • Hbuilder

    前端开发神器:VS Code → 速度快、体积小、插件多

    快速生成结构标签:! + tab

    • 注意1:!必须是英文的,中文!无效

    • 注意2:必须保证当前文件后缀名是.html,否则无效

    • VS Code自动生成的骨架多了其他标签,之后会介绍

     

三、语法规范

  1. HTML的注释

    注释的作用:

    • 为代码添加的具有解释性、描述性的信息,主要用来帮助开发人员理解代码 c}

    • 浏览器执行代码时会忽略所有的注释

    注释的快捷键:

    • 在VS Code中:ctrl + /

     

  2. HTML标签的构成

    标签的结构图:

    结构说明:

    1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

    2. 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容

    3. 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容

     

  3. HTML标签的关系

    父子关系(嵌套关系)

      <head>
       <title></title>
    </head>

    兄弟关系(并列关系)

      
    <head></head>
    <body></body>

 

HTML标签学习

一、排版标签

  1. 标题标签

    场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题

    代码:h系列标签

      
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    语义:1~6级标题,重要程度依次递减

    特点:

    • 文字都有加粗

    • 文字都有变大,并且从h1 → h6文字逐渐减小

    • 独占一行

  2. 段落标签

    场景:在新闻和文章的页面中,用于分段显示

    代码:

      
    <p>我是一段文字</p>

    语义:段落

    特点:

    • 段落之间存在间隙

    • 独占一行

  3. 换行标签

    场景:让文字强制换行显示

    代码: <br>

    语义:换行

    特点:

    • 单标签

    • 让文字强制换行

  4. 水平线标签

    场景:分割不同主题内容的水平线

    代码: <hr>

    语义:主题的分割转换

    特点:

    • 单标签

    • 在页面中显示一条水平线

 

二、文本格式化标签

场景:需要让文字加粗、下划线、倾斜、删除线等效果

代码:

标签说明
b 加粗
u 下划线
i 倾斜
s 删除线
标签说明
strong 加粗
ins 下划线
em 倾斜
del 删除线

 

三、媒体标签

  1. 图片标签

    场景:在网页中显示图片

    代码:

      
    <img src="" alt="">

    特点:

    • 单标签

    • img标签需要展示对应的效果,需要借助标签的属性进行设置!

     

    标签完整结构图

    属性注意点:

    1. 标签的属性写在开始标签内部

    2. 标签上可以同时存在多个属性

    3. 属性之间以空格隔开

    4. 标签名与属性之间必须以空格隔开 G

    5. 属性之间没有顺序之分 G

     

    图片标签的src属性

    属性名:src

    属性值:目标图片的路径

    注意点:

    • 当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)

    代码示例:

      
    <img src="./images/cat.gif" alt="">

     

    图片标签的alt属性

    属性名:alt

    属性值:替换文本

    • 当图片加载失败时,才显示alt的文本

    • 当图片加载成功时,不会显示alt的文本

    代码示例

      
    <img src="错误路径" alt="这里有只狗子">

    显示结果:

     

    图片标签的title属性

    属性名:title

    属性值:提示文本

    • 当鼠标悬停在图片上时,才显示的文本

    注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签

      
    <img src="./images/cat.gif" alt="这里有只狗子" title="我是title的效果">

    显示结果:

     

    图片标签的width和height属性

    属性名:width和height

    属性值:宽度和高度(数字)

    注意点:

    • 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)

    • 如果同时设置了width和height两个,若设置不当此时图片可能会变形

     

  2. 路径

    绝对路径(了解)

     

    相对路径(常用)

    概念普及:

    • 当前文件:当前的html网页

    • 目标文件:要找到的图片

     

    相对路径:从当前文件开始出发找目标文件的过程

    相对路径分类:

    • 同级目录

    • 下级目录

    • 上级目录

     

    同级目录:当前文件和目标文件在同一目录中

    • 方法一:

    • 方法二:

    VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!

     

    相对路径-上级目录

    1. 先出当前文件夹,到上一级目录 → ../

    2. 直接写目标文件

    VS Code快捷操作:直接敲../后,会自动提示上级目录下有文件,直接选择即可!

     

  3. 音频标签audio

    场景:在页面中插入音频

    代码:

      
    <audio src="./images/music.mp3" controls></audio>

    常见属性:

    属性名功能
    src 音频的路径
    controls 显示播放的控件
    autoplay 自动播放
    loop 循环播放

    注意点:

    • 音频标签目前支持三种格式:MP3、Wav、Ogg

     

  4. 视频标签video

    场景:在页面中插入视频

    代码:

      
    <video src="./images/video.mp4" controls></video>

    常见属性:

    属性名功能
    src 音频的路径
    controls 显示播放的控件
    autoplay 自动播放
    loop 循环播放

    注意点:

    • 视频标签目前支持三种格式:MP4 、WebM 、Ogg

     

  5. 链接标签a标签

    场景:点击之后,从一个页面跳转到另一个页面

    称呼: a标签、超链接、锚链接

    代码:

      
    <a href="https://wwww.baidu.com" target="_blank">百度一下</a>

    特点:

    • 双标签,内部可以包裹内容

    • 如果需要a标签点击之后去指定页面,需要设置a标签的href属性

     

    链接标签的target属性

    属性名:target

    属性值:目标网页的打开形式

    取值效果
    _self 默认值,在当前窗口中跳转(覆盖原网页)
    _blank 在新窗口中打开链接(保留原网页)

     

  6.  

 

标签:网页,标签,代码,HTML,认知学习,浏览器,分享,属性
来源: https://www.cnblogs.com/yuanfangmaimeng/p/16701106.html