aaplloo

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
HTML学习笔记

简介

HTML (Hypertext Mark Language)，一种标记语言，使文章结构转化为逻辑块，达到功能的组合。

学习笔记

  • HTML标签不区分大小写
  • 元素的主要部分包含L: 开始标签（Opening tag），内容（Content），结束标签（Closing tag) PS：空元素只有一个标签
  • 两种元素类别：块级元素和内联元素
  • 元素也可以拥有属性（Attribute），属性包含：
    1. 一个空格在元素名称和属性之间，多个属性间必须由空格隔开
    2. 属性名称，后面跟着一个等于号
    3. 属性值，后面由一对引号引起来
  • 一些属性： href : 声明超链接的web地址 title : 属性为超链接声明额外的信息，比如你将链接至的那个页面。当鼠标悬停在超链接上面时，这部分信息将以工具提示的形式显示。 target : 指定链接如何呈现出来。
  • 布尔属性：只能有一个值，一般与属性名称相同
  • 最短的有效文档声明：<!doctype html>

HTML头部

  • <head> 元素里的内容，内容不在浏览器内显示，保存页面的一些元数据
  • 元数据 <meta> 元素，描述数据的数据

<meta> 元素

  • name 属性：指定 <meta> 元素的类型；说明该元素包含了什么类型的信息
  • content 类型：指定实际的元数据内容

页面添加网页图标

  • 使用 .ico / .gif / .png 等格式保存

在 HTML 中应用 CSS 和 Javascript

  • <link> 元素添加 CSS, <script> 元素添加 Javascript，一般都放于头部
  • <link> 元素有两个属性： rel="stylesheet" 表明这是文档的样式表，href 包含了样式表文件的路径
  • <script> 元素包含 src 属性来指向需要加载的 Javascript 文件路径，同时最好加上 defer 来告诉浏览器在解析完成 HTML 后再加载 Javascript，确保在加载脚本前浏览器已经解析了所有的HTML内容。 <script> 元素看起来像空元素，其实需要结束标记，还可以选择将脚本直接放入 <script> 元素中

文本处理基础

  • 标题：<h1>~<h6> 段落：<p>
  • 无序标记： <ul> <li></li> </ul> 有序标记： <ol> <li></li> </ol> 可嵌套
  • 默认斜体：<em> </em> 粗体： <strong> </strong> 默认下划线：<mark> </mark>

超链接

  • 将内容包含在<a>元素内，并给它一个网址的<href>属性来创造一个基本链接
  • 任何块级元素都可以作为链接
  • 使用<img>元素来引用图片，<title>添加链接补充信息

统一资源定位符(Uniform Resource Locator, URL) 和 路径(path)

  • 统一资源定位符是一个定义了在网络上的位置的一个文本字符串, URL 使用路径查找文件
  • 若指向当前文件的同一个目录，只需要指定文件名
  • 若指向子目录，只需先进入项目目录路径，如-projects/index.html-
  • 若指向上级目录，则使用..进行返回上一个目录级，如-../pdfs/project-brief.pdf-

创建一个导航菜单

  • 当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名
  • 当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和 mailto: URL 协议实现

文本处理技巧

  • 描述列表
<dl>
  <dt>对象</dt>
    <dd>描述1</dd>
    <dd>描述2</dd>
    ...
</dl>

引用

  • 块引用：如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用 <blockquote> 元素包裹起来表示，并且在 cite 属性里用 URL 来指向引用的资源
  • 行内引用：使用<q>元素
  • 略缩语：使用<abbr>元素 加title=属性,如<abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr>
  • 联系方式：使用<address>元素
  • 上标和下标：分别是<sup>和<sub>
标记代码

  • <code>：标记计算机通用代码

  • <pre>：用于保留空白字符，通常用于代码块

  • <var>: 用于标记变量名

  • <kbd>: 用于标记输入

  • <samp>: 用于标记输出

  • <time>元素加datetime属性标记时间和日期

文档与网站架构

  • 文档的基本组成部分：页眉(<header>)、导航栏(<nav>)、主内容(<main> 包含各种子段<article>、<section>、<div>)、侧边栏(<aside>，常嵌套在<main>中)、页脚（<footer>）

布局元素细节

  • <main>存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其他元素。
  • <article> 包围的内容即一篇文章，与页面其他部分无关（比如一篇博文）。
  • <section> 与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以 标题 作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section>中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
  • <aside> 包含一些间接信息（术语条目、作者简介、相关链接，等等）。
  • <header> 是简介形式的内容。如果它是 <body> 的子元素，那么就是网站的全局页眉。如果p它是 <article> 或<section> 的子元素，那么它是这些部分特有的页眉
  • <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
  • <footer> 包含了页面的页脚部分。

无语义元素

  • <span>是一个内联（inline）的无语义元素，<div>是一个块级无语义元素，配合<class>属性提供一些标签使元素易于查询

多媒体与嵌入

图片

  • `
  • 设置<alt="" />当图片无法显示的时候对图片进行文字描述
  • width="" heigh=""设置图片的宽度和高度
  • title=""设置图片标题
  • 用 HTML5 的<figure>元素 + <figcaption>描述图片

视频和音频

  • <video>元素，加入src属性和控制播放器controls
  • 设置type使视频属性能够播放
  • loop:设置循环 muted:默认静音 poster:安置广告 preload:设置缓冲加载
  • 音频<audio>元素与视频基本类似

嵌入

<iframe>设置嵌入其他 Web
  • allowfullscreen设置克通过全屏API设置为全屏模式
  • frameboder 1/0:是否在框架之间绘制边框
  • *sandbox属性
<embed>和<object>
  • 用来嵌入多种类型的外部内容的通用嵌入工具
    | ||
posted on 2024-03-10 14:43  Thousanded  阅读(41)  评论(0)    收藏  举报