HTML入门笔记

雉堞
329 阅读3分钟

HTML入门笔记

HTML 概念

www 万维网，是由李爵士基于互联网发明的，实现了通过一个网址就能访问网站，是第一个实现网络冲浪的人

WWW = URL +HTTP +HTML

www就是万维网 world wide web

中文直译就是：像世界那么大的网

目前的BAT都极大依赖于www

在哪里能找到HTML权威的资料

Google 搜索 MDN HTML5

image-20220719102510411.png

HTML5 技术集

  • HTML5有两个含义

    • 最新版本的HTML语言，含旧标签和32个新标签
    • HTML5和它的朋友们（包括CSS3等）

  • HTML技术集合

    • 新标签、新属性
    • 新的通信技术 WebSocket、WebRTC等
    • 离线存储技术 LocalStorage、断网检测
    • 多媒体技术：视频、音频
    • 图像技术：Canvas、SVG、WebGL
    • web增强技术：History API、全屏
    • 设备相关技术：摄像头、触摸屏
    • 新的样式技术：CSS3新的Flex、Grid布局方式

正确学习方法

  • 步骤

    • 把所有标签用嘴巴读一遍，了解其内容
    • 全部忘掉，只记住div和span
    • 开始学习CSS
    • 找一个页面，仿写
    • 发现有更合适的标签，就改用更合适的标签
    • 继续写页面

学习一门语言必须学会什么

  • 语法
  • 如何调试
  • 在哪查资料
  • 标准制定者是谁

如何学

  • copy 抄文档、抄老师
  • run 放在自己的机器上运行成功
  • modify 加入一点自己的想法，然后重新运行

首先写什么

image-20220720163056686.png

章节标签

  • 表示文章、书的层级

    • 标题 h1 ~h6
    • 章节 section
    • 文章 article
    • 段落 p
    • 头部 header
    • 脚步 footer
    • 主要内容 main
    • 旁支内容 aside
    • 划分 div

全局属性

  • class 类

  • contenteditable 可编辑

  • hidden 隐藏

  • id

    • 不到万不得已不要使用id
    • 在css中加样式
    • 可以在js中直接通过id获取到对应的元素（但是有一些忌讳）

  • style 样式

  • tabindex 用tab键来控制网页顺序，解决某些人没有鼠标的问题

    • 特殊的值0 tab最后一个到
    • -1tab 到达不了

  • title

    • 可以用来显示完整的内容

遇到内容超出文本框的情况可以

 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;

然后可以用title显示全部内容

默认样式

为什么会有默认样式

  • 因为HTML被发明的时候,CSS还没出生

怎么看默认样式

  • Chrome开发者工具
  • Elements->Styles->user agent stylesheet

User Agent 就是浏览器

CSS reset

  • 默认样式已经不符合我们的需求

常见CSS reset

  • 你可以抄大厂的代码

    • 进入大厂首页
    • Chrome开发者工具，找到类似代码
    • 复制到自己的项目
    • 命名为reset.css

内容标签

  • ol +li 有序列表 列表项

  • ul +li 无序列表 列表项

  • dl +dt +dd 描述列表 描述对象 数据

  • pre

    • 在写代码的时候浏览器不管中间有多少空格tab或者回车都会压缩成一个，pre标签可以保留空格

  • hr 分割线

  • br 换行

  • a 超链接

  • em 语气强调

  • strong 本身强调

  • code 会将代码的内容字母变为等宽

  • quote 行内引用

  • blockquote 块级引用

avatar
文章
阅读
粉丝