WEB前端学习（一）| HTML基础

最新推荐文章于 2024-10-01 23:23:32 发布

lee_eeeee

最新推荐文章于 2024-10-01 23:23:32 发布

阅读量515

点赞数 4

分类专栏： WEB前端学习记录文章标签： html

本文链接：https://blog.csdn.net/BLACKkaka/article/details/115691255

版权

WEB前端学习记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

0 WEB标准构成（W3C）
- 结构：用于对网页元素进行整理和分类(HTML
- 表现：用于设置网页元素的版式颜色大小等外观样式，主要指CSS
- 行为：网页模型的定义及交互的缩写，现阶段主要学习JavaScript
Web标准推出的最佳体验方案：结构、样式、行为相分离
- 结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript中
1 HTML语法规范
- 1.1基本语法规范
  - 尖括号
  - 双标签 <html></html>
  - 单标签<br />
- 1.2标签关系
  - 包含关系（父子关系）
  - 并列关系（兄弟关系）
2 HTML基本结构标签（骨架标签）
- 2.1 第一个HMTML网页
  - HTML页面也称为HTML文档
  - <html> 根标签
    - <head>文档头部
      - <body>主体部分
3 工具VSCode
- 3.1 文档类型声明标签
  - <!DOCTYPE> ：告诉浏览器使用哪种HTML版本来显示网页写在第一行，不是HTML标签
- 3.2 lang语言种类（zh-CN）
- 3.3 charset 字符集（UTF-8）
  - <meta charset="UTF-8" />
4 HTML常用标签
- 4.1 标签语义
- 4.2 标题标签 <h1>< h2>……<h6>
  - <h1>一级标题</h1>
  - 文字加粗，独占一行
- 4.3 段落和换行标签
  - <p>段落</p>
  - <br /> (break)
    - 单标签
    - 简单换行，不同于段落还会插入一些垂直间距
- 4.4 文本格式化标签
  - 突出重要性，比普通文字更重要
  - 加粗<b></b>OR<strong></strong>
  - 倾斜<i></i>OR<em></em>
  - 删除线<del></del>OR<s></s>
  - 下划线<u></u>OR<ins></ins>
- 4.5 <div>和<span>标签
  - 盒子，布局网页
  - div
    - 独占一行
  - span
    - 小盒子，一行可以放多个span
- 4.6 图像标签和路径
  - 0 图像标签
    - <img src="图片URL" />
    - src:标签的必须属性，指定
    - alt 图片出错替换文本
    - title 鼠标提示文本
    - width
    - height
    - border 边框（CSS设置）
    - 属性顺序随意，空格分隔
    - 键值对 key=“value”
  - 1 目录和根目录
  - 2 相对路径和绝对路径
    - 同一级路径
    - 下一级路径
    - 上一级路径 ../img.jpg
  - 绝对路径
    - PC中位置
    - 网络图
- 4. 7 超链接标签
  - 1 语法格式
    - <a href="https://www.baidu.com" target="_bself">文字</a>
    - target:新窗口打开方式，默认当前页面
      - _blank 新窗口打开
  - 2 链接分类
    - 外链
      - <a href="https://www.qq.com" target="_blamkf">文字</a>
    - 内部链接
      - <a href="index1.html">首页</a>
    - 空链接
      - <a href="#"></a>
    - 下载链接
      - <a href="img.zip">下载文件</a>
    - 多种元素都可以添加超链接
      - 图片
        <a href="https://www.baidu.com"><img src="img.jpg"></a>
- 4.8 锚点链接
  - 跳转至页面内部某处内容
  - <a href="#name"></a>
  - <h2 id="name" ></h2>
5 注释标签和特殊字符
- 快捷键 ctrl+/
- 空格 
- < <
- > &dt;