HTML ｜ 青训营笔记

Lil_Moon
154 阅读5分钟

HTML概述

前端三件套（HTML、CSS、JavaScript）中，HTML作为最基础的部分，是网页内容的载体。 HTML全称为HyperText Markup Language，从名字中可以看出HTMl可以包含文字及文字以外的更加丰富的内容，其页面组织通过标签来实现。

HTML基本结构

  • HTML的第一行一般为<!doctype html>标签，用于提示浏览器所使用的HTML版本及需要渲染模式。
  • <html></html>标签作为HTML文档的根标签，用于包裹内部的所有标签。
  • <head></head>标签一般包含页面的一些属性信息，如<meta></meta>元标签可以包含页面的作者、字符集等信息；<title></title>标签会包含页面的标题内容。
  • <body></body>标签用于承载页面真正需要呈现的内容，会包含各种内容标签来实现内容的排版及渲染，如常用的标签有：<p></p>、<h1></h1>、<a></a>等。

HTML文档中的大部分标签都位于其它标签的内部，以嵌套的形式书写，所以整个HTML结构呈树形结构，称为DOM树，每个标签都是树中的一个DOM节点。 image.png

HTML语法

HTML标签结构一般为<标签名 属性名="属性值">内容</标签名>

  • HTML的标签及其属性不区分大小写，但一般使用小写字母（框架中的标签使用大写字母书写）
  • HTML除了需要闭合的双标签外，还存在不用闭合的单标签，如<img src="#" />
  • 标签的属性一般为键值对形式，属性值需要用""包裹，部分属性可以省略属性值，如required

HTML常用标签

排版标签

文章排版标签

常用的文章排版标签有标题标签和段落标签：

  • <h1></h1>~<h6></h6>标签可以表示多级标题，方便文章的组织和排版
  • <p></p>标签一般用于包裹文章段落

字体样式标签

修饰字样式的标签：

  • <strong><\strong>标签用于加粗表示着重强调的内容
  • <em></em>标签用于斜体表示内容，通常划出句中的语气词

引用标签

引用标签，HTML提供了三种引用标签：

  • <blockquote></blockquote>标签一般用于大段的引用，可以设置cite属性说明饮用地址
  • <cite></cite>标签一般用于书名等较短的引用
  • <q></q>标签一般用于话语等具体内容引用

代码标签

HTML常用的代码标签有两种：

  • <code></code>标签一般用于行内代码高亮
  • <pre><code></code></pre>嵌套标签一般用于多行代码高亮

列表标签

HTML提供了三种列表用于不同的应用场景：

  • <ol></ol>标签表示有序列表(order list)，列表内容使用<li></li>标签包裹
  • <ul></ul>标签表示无序列表(unorder list)，列表内容使用<li></li>标签包裹
  • <dl></dl>标签表示定义列表(definition list)，定义标题使用<dt></dt>标签包裹，定义内容使用<dd></dd>标签包裹

超文本标签

HTML中常用的超文本标签有：

  • <a></a>标签，表示超链接，常用的属性有：
    • href表示链接地址
    • target表示链接打开方式(新标签页、当前标签页打开等)
  • <img />标签，表示图片，为单标签，常用的属性有：
    • src表示媒体地址
    • alt表示媒体无法显示时的替代文本
    • width宽度属性等
  • <audio></audio>标签，表示音频，常用的属性有：
    • src表示媒体地址
    • controls属性，表示显示媒体控制栏，该属性不需要属性值
    • 标签之间的内容表示媒体无法显示时的替代文本
  • <video></video>标签，表示视频，常用的属性有：
    • src表示媒体地址
    • controls属性，表示显示媒体控制栏，该属性不需要属性值
    • 标签之间的内容表示媒体无法显示时的替代文本

表单标签

HTML提供了多种表单标签，用于让用户输入信息：

  • <input>标签，表示输入标签，可以通过type属性表示不同的输入标签
    • <input>，默认输入标签，为单行文本框，可以通过placeholder设置默认占位内容
    • <input type="range">，表示输入区间，可以设置上限、下限、步长等
    • <input type="number">，表示输入数字，可以设置上限、下限等
    • <input type="date">，表示输入日期，会提供选择日期的表格
    • <input type="checkbox">，表示多选框，通过设置name属性表示同一组属性
    • <input type="radio">，表示单选框，通过设置name属性表示同一组属性，实现单选
    • <input list="#">，通过为输入标签设置list属性，可以提供可选值
      • 可选列表通过datalist实现<datalist id="#"></datalist>，datalist的使用通过在input标签的list属性中填入datalist的id实现
      • 可选内容用<option></option>标签包裹
  • <textarea></textarea>标签，表示多行文本框，标签内容为默认填入内容，可以设置宽高等属性
  • <select></select>标签，表示列表框，提供多个可选内容，列表内容使用<option></option>标签包裹

HTML页面组织

HTML的页面组织一般分为header、main、aside、footer几个部分，大致结构如图所示： image.png

HTML书写规范

HTML的书写需要注意语义化表达，开发者应充分了解标签及属性的含义，编写时需要遵循标签或属性的语义信息，高度语义化书写，可以优化代码的可读性，可维护性也便于搜索引擎优化及无障碍功能的实现。

HTML主要负责页面的内容部分，而不是样式，应当做到内容与样式分离，分别通过单独的HTML与CSS各自实现。

avatar
文章
阅读
粉丝