date:
updated:

HTML自学笔记


1.1 HTML概述

1.1.1 HTML超文本标记语言

  • 一种标识性的语言,不是编程语言。不能进行逻辑运算。通过标签将网络上的文档格式进行统一。使分散的网络资源连接为一个逻辑整体。

  • 超文本:一种组织信息方式,通过超级链接将多种媒介关联起来。

  • 标记:即标签,通过<>包裹的具有一定含义的内容。

1.1.2 HTML的功能

  • 展示在线文档
  • 通过超级链接检索在线信息
  • 为获取远程服务设计表单,可用于检索信息、订购产品等。
  • 直接包含电子表格、视频剪辑、声音剪辑以及其他的一些应用

1.1.3HTML的历代版本

  • HTML1.0——在1993年6月互联网小组(IETF)工作草案发布。
  • HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854与2000年发布之后宣布过时。
  • HTML 3.0——1996年1月4日,W3C推荐标准。
  • HTML 4.0 ——1997年12月18日,W3C推荐标准。
  • HTML 4.01——1999年12月24日,时在HTML 4.0 的基础上的微小改进W3C推荐标准。
  • HTML 5.0——2014年10月28日,W3C推荐标准。

1.1.4HTML与互联网介绍

  • HTML

    HTML超文本标记语言( Hyper Text Markup Language )是一种制作万维网页面的标准语言,它,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言.HTML文件是由HTML命令组成的描述性文本, HTML命令可以说明文字、图形、动画、声音、表格、链接等。

  • 互联网

    互联网(英语: Internet) ,又称网际网络,或者音译因特网、英特网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

1.1.5 动态网页和静态网页

静态网页: HTML代码和内容书写完毕后,页面的内容和显示效果基本上不会发生变化了——除非你修改页面代码。

动态网页:页面代码虽然没有变,但是显示的内容时可以随着时间、环境、或者数据库操作的结果而发生变化的。

注意:不是说有动画就是动态页面,而是数据渲染问题。

1.1.6 什么是浏览器

浏览器时解释和执行HTML源码的工具。

常用五大浏览器:

  1. IE浏览器
  2. 火狐浏览器
  3. 谷歌浏览器
  4. 欧朋浏览器
  5. 苹果浏览器

1.1.7 浏览器内核

浏览器的引擎装置,包含渲染引擎和JS引擎。

1.2 开发工具

1. DCloud HBuilder

2. Sublime Text 3

3. Visual Studio Code

4. WebStorm

1.3 HTML标签

1.3.1 HTML文档结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>//申明下面的所有标签将以HTML5规范解析
<html lang="en">
<head> //完成网页相关设置的标签
<meta charset="UTF-8"> //汉字编码 mate:元信息,主要完成对应设置的
<mate name="keywords" content=""> //网站关键字
<mate name="description" content="">//网站描述内容
<title>文档标题</title> //标题
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> //设置网站图标
<link rel="stylesheet" href="style.css" type="text/css"> //链接样式文件
<script type="tetx/javascript" src="index.js"></script> //放置脚本语言,或链接脚本文件
<style></style> //放置CSS样式
</head>
<body>...</body>
</html>

1.3.2 基本标签

  • <div>

    div标签它时可用于组合其他HTML元素的容器。

    • 可用于对大的内容快设置样式属性;
    • 文档布局。它取代了使用表格定义布局的老式方法。
  • <hx>

    hxHTML标题标签只用于标题。不能为了生成粗体或大号字体的文本而使用标题

    • <h1>

      定义字号最大的标题,代表大标题,一般一个页面只用一次。

    • <h6>

      定义字号最小的标题。

  • <p>

    p元素段落标签会自动在其前后创建一些空白。浏览器会自动添加这些空间。一般为一个自然段。

  • <br>

    br元素会在浏览器插入一个简单的换行符,是一个单标签。推荐写法为:<br />.

  • <hr>

    hr标签定义HTML页面中的主题变化(比如话题的转移) ,并显示为一条水平线。

  • <a>

    a标签用来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

    • href属性:描述了链接的目标URL;

    • target属性:设置链接跳转方式。

      有四个保留的目标名称用作特殊的文档重定向操作:

      保留目标名图表

参数 功能
blank 浏览器总在一个新打开、未命名的窗口中载入目标文档。
self 这个目标的值对所有没有指定目标的<a>标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题<base>标签中的target属性一起使用。(人话:在当前窗口跳转)
parent 这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标_self等效。
top 这个目标使得文档载入包含这个超链接的窗口,用_top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
  • <img>

    img标签用来申明图像的插入。

    • scr属性:规定显示图像的URL。URL为图片的相对路径或者绝对路径均可;
    • alt属性:规定图像的替换文本;
    • title属性:定义图片的标题,鼠标移动到图片上时出现。
  • <span>

    span同来组合文档中的行内元素,可用作文本的容器。span元素没有固定的格式表现,当它引用样式时,它才会产生视觉上的变化。和div一样时用来布局的,但是不会独占一行。一般用于行内布局。

  • <ul>

    ul标签作为无序列表,它是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记,无序列表始于ul标签,每个列表项始于<li>标签。

    1
    2
    3
    4
    <ul>
    <li>无序列表一</li>
    <li>无序列表二</li>
    </ul>
  • <ol>

    有序列表也是一列项目,列表项目使用数字进行标记。有序列表始于<ol>标签,每个列表项始于<li>标签。

    1
    2
    3
    4
    <ol>
    <li>有序列表一</li>
    <li>有序列表二</li>
    </ol>
  • <!–注释–>

    注释代码用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码镜像解释,这样做有助于在以后的时间对代码进行修改,当编写了大量代码是尤其有用。

    1
    <!--这是markdown文件里的代码块的html注释-->

1.3.3 标签属性

HTML元素可以通过设置属性,实现某种特定的效果。

  • 属性可以在元素中添加附加信息;
  • 属性一般描述于开始标签;
  • 属性总是以名称/值对的形式出现,比如name=”value”,不是所有的标签都有属性。
1
2
3
<p class="container">
这是一个带有class属性且只为container的段落<p>标签
</p>

1.3.4 文本格式化标签

  • <b>

    b标签表示以粗体字体形式展现内容。(行级标签,不会自动换行)

  • <strong>

    strong标签与b标签都表示粗体。但strong表示强调。例如,一个单词或短语需要显示得更高调、更响亮 总之要比一般文本更加突出。这里我们就使用strong标签在SEO中的应用,告知搜索引擎我们内容强调的是什么,便于提取关键字。(行级标签,不会自动换行)

  • <i>

    i标签表示以斜体字体形式展现内容,简单倾斜使用i标签即可。(行级标签)

  • <em>

    em标签同表示倾斜,但em是具有强调性的。告诉浏览器其中的文本表示为强调的内容,并以斜体形式展现。(行级标签)

  • <pre>

    pre标签可定义预格式化的文本。pre标签元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。(字号会小一号,块级标签。)

  • <small>

    small定义小型文本。12px字号适应度最好。(行级标签,不会独占一行。且不识别宽高)

  • <big>

    small定义大型文本。该标签被淘汰了,但是依旧可以使用,尽量避免使用。

  • <sub>

    sub标签定义下标文本。下标文本显示在文本流字符高度一般的基准线下方.

  • <sup>

    sup标签定义上标文本。上标文本显示在文本流字符高度一般的基准线上方。

1.3.5 HTML单双标记的区别

1. 单标记

单标记是由一个标签组成。

比如:

​ 换行符:<br/>

​ 水平线:<hr/>

​ 图片标签:<img/>

​ 文本标签:<input/>

​ link标签:<link/>

​ 元信息标签:<mata/>

2. 双标记

开始标签结束标签两部分组成,必须成对使用。

如:

<p></p>段落标签,其中<p>是开始标签表示一个段落的开始,</p>是结束标签,表示一个段落的结束。

​ 常见的双标记标签的有:

<html><head><title><body><table><span><div><p><h1>等等。

1.3.6 HTML实体转义


← Prev 3.PHP基础语法 | 2.PHP基础知识 Next →
打赏
支付宝 | Alipay
微信 | WeChat