HTML 入门笔记1

178 阅读2分钟

1. 概述

HTML 在1991年由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李(Tim Berners-Lee)发明。

HTML 的全名是“超文本标记语言”(Hyper Text Markup Language),是一种用于创建网页的标准标记语言。HTML 常与CSS、JavaScrip 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。

2. 基本概念

网页的 HTML 代码由许许多多不同的标签(tag)构成,上手 HTML 首先要学会各种标签所表达的含义。下面是标签的一个例子。

 <p>hello world</p>

上面代码中,<p></p>就是一对标签。

标签放在一堆尖括号里(比如<p>),大多数标签是成对出现的。但是,也有一些标签是单独使用的,如<meta>标签。

标签可以嵌套。

 <div><p>hello world</p></div>

下面是一个简单页面的 HTML 源码。

 <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
   <meta charset="utf-8">
   <title>网页标题</title>
 </head>
 <body>
   <p>Hello World</p>
 </body>
 </html>

其中,<!DOCTYPE html>表示文档类型为 html;html lang= "zh-CN"表示语言为中文;meta charset="utf-8"设置文档的字符编码

<title>网页标题</title>设置文档标题。

3.常用章节标签

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

4. 一些全局属性

  • contenteditable(可编辑),通过contenteditabledisplay:block可以让用户自己编辑CSS样式。
 <style contenteditable>
         style {
             display: block;
         }
     </style>
  • id
  • class
  • style
  • tabindex,tabindex = '1'控制 tab 的移动顺序,值为0最后访问,值为负数不访问。
  • hidden,通过下面的 CSS 样式实现大段文字的省略效果。
 element.style{
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
  • title(可显示完整内容)

5.常见内容标签

  • ol + li(有序列表)
  • ul + li(无序列表)
  • dl + dt + dd (description list)
  • pre(保留空格、回车)
  • hr(水平分割线)
  • br(换行)
  • a
  • em(内容着重点)
  • strong(内容重要性)
  • quote
  • blockquote