HTML基础 | 青训营笔记

用户2183409519718
91 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

HTML简介

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML元素

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <head> 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
    • <title> 定义文档的标题，它是 head 部分中唯一必需的元素。
    • 应该把 <head> 标签放在文档的开始处，紧跟在 后面，并处于 <body> 标签或 <frameset>标签之前。
    • 请记住始终为文档规定标题！

HTML属性

  • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。

  • 属性总是以名称/值对的形式出现，比如：name="value" 。

  • 属性总是在 HTML 元素的开始标签中规定。

  • 属性值应该始终被包括在引号内（双引号是最常用的）。但当属性值本身就含有双引号，那么必须使用单引号。

  • 大多数 HTML 元素的属性：

属性值描述
classclassname规定元素的类名（classname）
idid规定元素的唯一 id
stylestyle_definition规定元素的行内样式（inline style）
titletext规定元素的额外信息（可在工具提示中显示）

列表

无序列表

<ul> unorder list

有序列表

ol order list

定义列表

键值结构：<dt>描述键，<dd>描述值。允许多对多

链接

  • HTML 链接由<a>标签定义。链接的地址在 href 属性中指定

  • 链接后添加target="_blank"实现新窗口打开

音视频

用controls属性显示浏览器自带的控制页面

输入

  • checkbox可多选，radio同一组内只能选一个。都是通过name属性相关联的

引用

  • blockquote段引用，cite短引用，q表示引用前文的内容

  • pre标签进行预格式化，能保留code中的空格等格式

内容划分

image.png

  • header 头部

  • main 主体（一个页面一个）

  • aside 导航、广告

  • footer 引用、版权划分

语义化

  • HTML中的元素、属性及属性值都拥有某些含义

  • 开发者应该遵循语义来编写HTML

    • 有序列表用 ol；无序列表用 ul
    • lang 属性表示内容所使用的语言

HTML用户

  • 开发者 - 修改、维护页面
  • 浏览器 - 展示页面
  • 搜索引擎 - 提取关键词、排序
  • 屏幕阅读器 - 给盲人读页面内容

语义化的好处

  • 代码可读性
  • 可维护性
  • 搜索引擎优化
  • 提升无障碍性

如何做到语义化?

  • 了解每个标签和属性的含义
  • 思考什么标签最适合描述这个内容
  • 不使用可视化工具生成代码

传达内容，而不是样式

  • 大字体可能是正文，小字体也可能是标题
<p style="font-size:32px">前端工程师的自我修养</p> // ×

<h1>前端工程师的自我修养</h1>
avatar
文章
阅读
粉丝