HTML入门笔记1

跳跳糖_
218 阅读5分钟

HTML简介

  1. HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言。
  2. HTML(Hyper Text Markup Language)，即超文本标记语言，是网页构成的基础。
  3. HTML不是编程语言，是一种标记语言，没有任何逻辑性，是一种由浏览器解释执行的语言。

HTML起手应该写什么

在第一行输入"!+tab键"，就会出现下面的代码（使用的编辑器为VSCode）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>
<body></body>
</html>

代码解释：

  • !DOCTYPE

<!DOCTYPE html>表示文档类型声明，表示该文件为HTML文件，<!DOCTYPE>声明必须放在HTML文档的第一行。

  • html
  1. <html>标签为根标签，其他元素都是它的子元素，一个网页只能有一个<html>标签。
  2. 该标签的属性lang="en"表示网页内容默认的语言为英文，一般把lang的值改为"zh-CN"，表示网页是中文内容。
  • head
  1. <head>标签是一个容器标签，用于放置网页的头部信息，它的内容不会出现在网页上。
  2. <head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。
  • meta
  1. <meta>标签用于设置或说明网页的元数据，必须放在<head>里面。
  2. 第一个<meta>标签：表示文件的字符编码采用UTF-8的格式。
  3. 第二个<meta>标签：表示告诉IE浏览器使用最新浏览器。
  4. 第三个<meta>标签：用来做移动端的适配。
  • title

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

  • body

<body>标签是一个容器标签，用于放置网页的主体内容。

HTML常用的章节标签

表示文章/书的层级

  • 标题 h1~h6

<h1>~<h6>标签可定义文章的标题，<h1>定义最大标题，<h6>定义最小标题。

  • 章节 section

<section>标签用在文档里面表示一个章节

  • 文章 article

<article>标签通常用来表示一篇文章或者一个论坛帖子。

  • 段落 p

<p>标签是一个块级元素，代表文章的一个段落（paragraph）。

  • 头部 header
  1. <header>标签既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
  2. 如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。
  3. 如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。
  • 脚部 footer
  1. <footer>标签表示网页、文章或章节的尾部。
  2. 如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。
  • 主要内容 main

<main>标签表示页面的主体内容，一个页面只能有一个<main>。

  • 旁支内容 aside
  1. <aside>标签用来放置与网页或文章主要内容间接相关的部分。
  2. 网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边。
  3. 文章级别的<aside>，可以用来放置评论或注释。
  • 划分 div

<div>标签是一个区块容器标记，<div></div>之间是一个容器，可以包含段落、表格、图片等各种HTML元素。

HTML的全局属性

  • class
  1. class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。
  2. 元素可以同时具有多个 class，它们之间使用空格分隔。
  • contenteditable

HTML 网页的内容默认是用户不能编辑，contenteditable属性使任何一个元素可以被编辑。

  • hidden

hidden表示隐藏当前的网页元素，在网页中不会看到它。

  • id
  1. id属性是元素在网页内的唯一标识符。
  2. id 的全局唯一性没有保障，就算有两个重复的 id，HTML 也不会提示写错了，所以不到万不得已时，不要用id。
  • style

style属性用来指定当前元素的 CSS 样式。

  • tabindex
  1. tabindex属性的值是一个整数，表示用户按下 tab 键的时候，网页焦点转移的顺序。
  2. tabindex可以是正数，不必是连续的，网页元素按照从小到大的顺序被tab访问。
  3. tabindex=0时，表示该元素最后一个被tab访问。
  4. tabindex=-1时，表示该元素将不被tab访问。
  • title

title属性用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

HTML常用的内容标签

  • ol+li

<ol>表示有序列表，会在内部的列表项前面产生数字编号。

  • ul+li

<ul>表示无序列表，会在内部的列表项前面产生实心小圆点，作为列表符号。

  • dl+dt+dd

<dl>表示自定义列表，<dt>定义列表项，<dd>表示列表项的描述。

  • pre

<pre>标签是一个块级元素，表示保留原来的格式，即浏览器会保留该标签内部原始的换行和空格。

  • hr

<hr>标签表示水平分隔线。

  • br

<br>表示换行。

  • a

<a>标签是超链接标签，用户点击后，浏览器会跳转到指定的网址。

  • em
  1. <em>标签是一个行内标签，表示强调（emphasize）。
  2. <em>标签表示语气上的强调。
  3. 浏览器会以斜体显示它包含的内容。
  • strong
  1. <strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。
  2. <strong>标签表示内容本身的重要性。
  3. 浏览器会以粗体显示内容。
  • code
  1. <code>标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。
  2. 如果要表示多行代码，<code>标签必须放在<pre>内部。<code>本身仅表示一行代码。
  • quote

<q>是一个行内标签，表示引用，它不会产生换行。

  • blockquote

<blockquote>是一个块级标签，表示引用他人的话。

avatar
文章
阅读
粉丝