HTML 入门笔记1

JeffWong
186 阅读4分钟

HTML 的前世今生

  • 什么是 HTML
    • HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。
  • 谁发了 HTML
    • HTML是由Web的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly 于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如 UNIX， Windows 等)。使用 HTML，将所需要表达的信息按某种规则写成 HTML 文件，通过专用的浏览器来识别，并将这些 HTML 文件“翻译”成可以识别的信息，即现在所见到的网页。
  • HTML 发展到了什么程度
    • HTML5 是公认的最新一代 Web 语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力。
    • HTML5 有两个含义
      • 最新版本的 HTML语言，包含旧标签和 32 个新标签
      • HTML5 和它的朋友们（CSS3）
    • HTML5 技术合集
      • 新标签、新属性
      • 新的通信技术：WebSockets, WebRTC 等
      • 离线存储技术：LocalStorage、断网检测
      • 多媒体技术： 音视频
      • 图像增强技术： Canvas、SVG、WebGL
      • Web 增强技术：History API、全屏
      • 设备相关技术：摄像头、触摸屏
      • 新的样式技术：CSS3 新的 Flex 布局、Grid 布局

HTML 起手应该写什么

<!DOCTYPE html> <!--声明文档类型-->
<html lang="en"> <!--html 标签，可把 lang 改成 zh-CN-->
<head>
    <meta charset="UTF-8"> <!--文件字符编码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--禁用缩放，兼容手机端-->
    <meta http-equiv='X-UA-Computer' content='ie=edge'> <!--告诉 IE 使用最新的内核（最新版 VSCode 快捷键生成默认已略去）-->
    <title>Document</title> <!--网页标题-->
</head>
<body>
    
</body>
</html>

常用的表章节的标签

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

全局属性（所有标签都有的属性）

  • class 用于定义元素的类名
  • contenteditable 使网页上的内容可编辑
  • hidden 是一个boolean属性，真假值控制浏览器是否渲染该元素
  • id 用于指定元素的唯一 id，
    • 该属性的值在整个 html 文档中具有唯一性
  • style 内联样式，又称行内样式
    • 使用该属性后将会覆盖任何全局的样式设定
  • tabindex 指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航
    • 当值为负数时，表示该元素可聚焦，但不可被 tab 键访问
    • 当值为 0 时，表示该元素可聚焦，一般在最后被访问
    • 当值为正数时，表示该元素可聚焦，且可被 tab 键访问，且值不必是连续的

    根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

  • title 用于指定元素的额外信息
    • 当鼠标放在相应元素位置上时，会提示该信息

常用的内容标签

  • ol + li (ordered list + list item) 有序列表
  • ul + li (unordered list + list item) 无序列表
  • dl + dt + dd (description list + term + data) 解释（定义）列表
  • pre (preview) 的缩写。 表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
  • hr
  • br (break 的缩写) 换行
  • a (anchor 的缩写) 超链接
  • em (emphsis 的缩写) 强调语句标签。一般强调语气
  • strong 更加强调标签。一般强调内容本身
  • code 呈现一段计算机代码。 默认情况下, 它以浏览器的默认等宽字体显示
  • q (quote 的缩写) 示一个封闭的并且是短的行内引用的文本. 这个标签是用来引用短的文本，所以请不要引入换行符; 对于长的文本的引用一般用下面的 <blockquote> 替代。
    • <q> 标签拥有全局属性。
    • <q> 标签的 cite 属性的值是URL，意在指出被引用的文本的源文档或者源信息. 这个属性重在解释这个引用的参考或者是上下文。
    <p>Everytime Kenny is killed, Stan will announce
<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">
	Oh my God, you/they killed Kenny!
</q>.
</p>
  • blockquote 对于长的文本的引用
avatar
文章
阅读
粉丝