前端基础知识小结

 主页   资讯   文章   代码   电子书 

HTML基础知识

什么是 HTML？

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

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)

插入样式表的方式

  • 外部样式表

    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

  • 内部样式表：在 head 部分通过 <style> 标签定义内部样式表。

  • 内联样式

标签

<img>标签

<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

属性有：

  • 源属性（src）：src 指 "source"。源属性的值是图像的 URL 地址。
  • 替换文本属性（alt 属性）：在浏览器无法载入图像时，告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
  • align属性，对其方式，有"bottom"”middle””top”,以及使其浮动的”left””right”

自定义列表

是项目及其注释的组合：自定义列表以<dl> 标签开始，每个自定义列表项以<dt>开始，每个自定义列表项的定义以 <dd> 开始。

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

浏览器显示如下：

Coffee
Black hot drink
Milk
White cold drink
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 ## 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD（Document Type Definition，文档类型定义），因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

<head> 元素

是所有头部元素的容器，其中的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等，比如：

<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<base> 元素

为页面上的所有链接规定默认地址或默认目标（target）：

  <head>
    <base href="http://www.w3school.com.cn/images/" />
    <base target="_blank" />
  </head>

<meta> 元素

元数据（metadata）是关于数据的信息。

<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

下面的 meta 元素定义页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

name 和 content 属性的作用是描述页面的内容。

编写移动端页面时可以使用如下meta视口来实现一个完美视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0 "/>