HTML笔记1

131 阅读6分钟

1.概述

HTML 的全名是“超文本标记语言”(HyperText Markup Language),上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李(Tim Berners-Lee)发明。它的最大特点就是支持超链接,点击链接就可以跳转到其他网页,从而构成了整个互联网。

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

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

不管多么复杂的网页,都是从上面这个基本结构衍生出来的。

2.网页的基本标签

下面就依次介绍,这个基本结构的主要标签。它们构成了网页的骨架

2.1<!DOCTYPE>

网页的第一个标签通常是<!doctype>,表示文档类型,告诉浏览器如何解析网页。 doctypehtml时浏览器就会按照 HTML 5 的规则处理网页

<!DOCTYPE html>

2.2<html>

<html>标签是网页的顶层容器,也称为根元素(root element),一个网页只能有一个<html>标签

<html lang="zh-CN">

该标签的lang属性,表示网页内容默认的语言,如果是英文内容,zh-CN要改成en

2.3<head>

<head><html>的第一个子元素。如果网页不包含<head>,浏览器会自动创建一个

2.4<meta>

<meta>标签用于设置或说明网页的元数据,必须放在<head>里面。一个<meta>标签就是一项元数据,网页可以有多个<meta><meta>标签约定放在<head>内容的最前面。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>

简单介绍几个<meta>标签常见属性

( 1 )charset属性

<meta>标签的charset属性,用来指定网页的编码方式

<meta charset="UTF-8">

上面代码声明,网页为 UTF-8 编码

这里声明的编码方式,应该与网页实际的编码方式一致,即声明了utf-8,网页就应该使用 UTF-8 编码保存。如果这里声明了utf-8,实际却是使用另一种编码(比如 GB2312),并不会导致浏览器的自动转码,网页可能会显示为乱码。

( 2 )name属性,content属性

<meta>标签的name属性表示元数据的名字,content属性表示元数据的值。它们合在一起使用,就可以为网页指定一项元数据。

<head>
  <meta name="description" content="HTML从入门到入土">
  <meta name="keywords" content="HTML,教程">
  <meta name="author" content="张三">
</head>

上面代码包含了三个元数据:description是网页内容的描述,keywords是网页内容的关键字,author是网页作者

2.5<title>

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

<title>网页标题</title>

2.6<body>

<body>标签是一个容器标签,用于放置网页的主体内容,它是<html>的第二个子元素,紧跟在<head>后面。

<body>
  <p>Hello World</p>
</body>

3.常见的章节标签

3.1<header>

<header>标签表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。

3.2<footer>

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息

3.3<main>

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

3.4<article>

<article>标签表示页面里面一段完整的内容,通常用来表示一篇文章或者一个论坛帖子

3.5<aside>

<aside>标签通常用来表示网页的侧边栏

3.6section

<section>标签表示一个含有主题的独立部分

3.7<nav>

<nav>标签用于放置页面或文档的导航信息

3.8<h1>~<h6>

从一级到六级的标题标签,数字越小字体越大

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

4.全局属性

全局属性(global attributes)是所有元素都可以使用的属性。也就是说,你可以把下面的属性,加在任意一个网页元素上面,不过有些属性对某些元素可能不产生意义。

4.1id

id属性是元素在网页内的唯一标识符,属性的值必须是全局唯一的。但如果一个网页出现两个相同的id也不会报错,为了避免冲突,建议少用

<p id="p1">
<h1 id="p1">

4.2class

class属性用来对网页元素进行分类。如果不同元素的class属性值相同,就表示它们是一类的

<p class="para"></p>

4.3title

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

<div title="附加说明">
  <p>这里是内容</p>
</div>

4.4tabindex

给一个元素写上tabindex属性,按下键盘上的Tab键就能选择到这个元素

tabindex属性的值是一个整数,表示用户按下 Tab 键的时候,网页焦点转移的顺序。不同的属性值有不同的含义。

  • 负整数:表示不参与 Tab 键对网页元素的遍历。这个值通常是-1
  • 0:表示最后访问到它。
  • 正整数:网页元素按照从小到大的顺序(1、2、3、……),参与 Tab 键的遍历。如果多个元素的tabindex属性相同,则按照在网页源码里面出现的顺序遍历。
<p tabindex="0">这段文字可以被选择到。</p>

4.5style

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

<p style="color: red;">hello</p>

上面代码指定文字颜色为红色。

4.6hidden

hidden是一个布尔属性,它可以把一个元素隐藏起来

<p hidden>本句不会显示在页面上。</p>

CSS 的设置优先级高于hidden属性。如果 CSS 设为该元素可见,hidden属性将无效

4.7contenteditable

contenteditable属性允许用户修改内容

<p contenteditable="true">
鼠标点击,本句内容可修改。
</p>

4.8spellcheck

spellcheck属性表示是否打开拼写检查

<p contenteditable="true" spellcheck="true">
英语单词 separate 容易写错成 seperate。
</p>

4.9data-

data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据,就可以放在data-属性

5.常用的内容标签

5.1<strong>

<strong>是一个行内元素,表示它包含的内容具有很强的重要性,浏览器会以粗体显示内容

5.2<em>

<em>是一个行内标签,表示强调(emphasize),浏览器会以斜体显示它包含的内容

5.3<code>

<code>标签是一个行内元素,表示标签内容是计算机代码,浏览器默认会以等宽字体显示

5.3<pre>

<pre>是一个块级元素,表示保留原来的格式(preformatted),即浏览器会保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。

<pre>hello

   world</pre>

5.4<a>

<a>表示一个网络链接

<a href="www.baidu.com">百度一下</a>

5.5<img>

<img>标签用于插入图片。它是单独使用的,没有闭合标签

<img src="假装有张图片.jpg">

它可以和<a>标签一起使用

<a href="www.baidu.com">
    <img src="美女.jpg">
</a>

5.5<hr>

<hr>标签表示一条分割线,它是单独使用的,没有闭合标签


5.6<br>

<br>让网页产生一个换行效果。该标签是单独使用的,没有闭合标签

本文部分内容引用自 网道(WangDoc.com)