欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML学习笔记(一)之html基础

程序员文章站 2022-07-11 12:14:40
...

0. html初识

  1. 网页声明(DOCTYPE)用来告诉网页这个网页的版本是 HTML5
  2. 实现本地html网页的实时自动更新的 vscode 插件:LiveSever

1. html实体

  1. 有些符号在 HTML 中不能直接书写,自身有特殊的含义
    比如网页中的多个空格会被解析成一个空格,
    字母两侧的大于和小于号
  2. 如果我们需要使用这些字符,则需要使用 html 中的 实体(转义字符)
    实体的语法:& + 实体名称 + ;
    例如:  , &gt , < , @copy;

2. meta

  1. meta 设置网页的元数据,不是给用户看的部分
  2. charset
    决定了网页所采用的字符编码集
    <meta charst="utf-8">
    
  3. name
    指定的数据名称
  4. content
    指定了数据的内容
    • keywords
      网页关键字,利于搜索引擎的CEO、爬虫
      <meta name="keywords" content="HTML5, css3, 前端">
      
    • description
      网页的具体描述
      <meta name="description" content="学习html5、css3的基础">
      
  5. http-equiv
    当其值为 refresh,表示将页面重定向到另一个网站
    • 如果 content 只包含一个正整数,则是重新载入页面的时间间隔(秒)
       <meta http-equiv="refresh" content="3">
      
    • 如果 content 包含一个正整数并且跟着一个字符串 ;url= 和一个合法的 URL,则是重定向到指定链接的时间间隔(秒)
      <meta http-equiv="refresh" content="3;url='https://www.google.com'">
      
  6. 设置移动端页面禁止缩放
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    

3. 块元素与行内元素

  1. 块级标签(block element)
    标签元素独占一行,为块标签(block element)。
    一般使用块标签来对网页进行布局
    p div h1~h6 blockquoto
  2. 行内元素(inline element)
    不独占一行,不会换行
    a q em strong
  3. 一般在块内元素使用行内元素,不会在行内元素使用块元素

    浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正!

    比如

    1. 将标签写在根元素的外部

    2. p元素嵌套了块元素

    3. 根元素出现了除head和body以外的子元素

4. 语义化标签

  1. 在网页中 HTML 专门用来负责网页的结构
    所以在使用 html 标签的时候,应该关注的是标签的语义,而不是样式

    • h1~h6
      h1~h6 共六级标签
      h1到h6重要性递减,h1最重要,h6最不重要
      h1在网页中的重要性仅次于 title 标签,一般情况下一个网页只会有一个 h1
      一般情况下标题标签只会有h1~h3,不会有h4到h6

    • hgroup
      hgroup 将标题标签分组,可以将一组相关的标题同时放入到 hgroup 中

        <hgroup>
        <h1>回乡书二首</h1>
        <h2>其一</h2>
        </hgroup>	
      
    • p
      p 标签表示页面中的一个段落,独自占一行,也是块元素

    • blockquote

      表示一个长引用

    • em
      表示语音语调的一个加重

    • strong
      strong表示强调,重要内容!

    • q
      表示一个短引用

  2. H5 网页的结构

    • header
      表示网页的头部

    • main
      表示网页的主体

    • footer
      网页的底部

    • nav
      HTML 元素表示页面的一部分,其目的是在当前文档或其他文档中提供导航链接。
      导航部分的常见示例是菜单,目录和索引。

    • aside
      侧边栏

    • article
      表示一篇文章

    • section
      表示一个独立的区块,当以上元素都不能表示语义的时候,使用 section

  3. 网页布局结构

    网页的布局一般使用 divspan

    • div
      div 是一个块元素,没有语义,表示一个逻辑区块,是主要的布局元素

    • span
      span 是行内元素。一般用于在网页中选中文字

相关标签: HTML学习笔记