一个最基本的html文件,必须包含<html>, <head> 和<body> 三个标签 以及<!doctype>声明

1. <!DOCTYPE> 标签

声明必须是 HTML 文档的第一行，位于 <html> 标签之前.

声明的不是 HTML 标签; 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.

在 Html5 中只有一种声明形式 <!DOCTYPE html>

2. <html>标签

是用于定义一个html文档, 用于告知浏览器当前文件是html文档, 用以识别.

标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体.

标签中的两个常见属性:

lang属性:

规定元素内容的语言.

xmlns 属性:

可以在文档中定义一个或多个可供选择的命名空间.

该标签支持HTML中的全局属性.

　　　

3. <head>标签

是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者

该标签下所包含的部分可加入的标签有 <base>, <link>, <meta>, <script>, <style> 和 <title>

该标签必须包含文档的标题 <title> 标签

　　　

  • <base>标签

可以为页面中所有链接规定默认地址或目标,

标签两种常见属性:

herf属性:

用以填充 <a>, <img>, <link>, <form> 标签中的相对url中的空白部分,

举例

如设置 <base> 的 herf 属性为 "http://www.leon9dragon.com/img/",

然后设置 <img> 标签中的src属性为 "test.jpg",

最终会让浏览器从 "http://www.leon9dragon.com/img/test.jpg" 这个路径获取图片

target属性:

可以通过设置 target 属性来试得在当前页面打开的链接是在父窗口打开还是新窗口打开等新页面打开情况

举例

target="_blank" 则为在新窗口打开页面, 若等于 "_self" 则覆盖当前窗口打开新页面

　　　　

  • <meta>标签

该标签的目的是为了告诉搜索引擎爬虫, 关于该网站是关于什么内容的,

该标签中的属性与网站搜索索引有关.　　　　

要注意的属性:

content属性:

若要使用 meta 标签, 这个属性是必要属性

定义与 http-equiv 或 name 属性相关的元信息

始终要和 name 属性或 http-equiv 属性一起使用

name属性:

把 content 属性关联到一个名称

提供了名称/值对中的值. 该值可以是任何有效的字符串

name 属性提供了名称/值对中的名称. HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称. 通常情况下, 可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称, 为文档定义了一组关键字, 某些搜索引擎在遇到这些关键字时, 会用这些关键字对文档进行分类.

举例

<meta name="keywords" content="HTML,ASP,PHP,SQL">

http-equiv属性:

把 content 属性关联到 HTTP 头部

http-equiv 属性为名称/值对提供了名称. 并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对.

当服务器向浏览器发送文档时, 会先发送许多名称/值对. 虽然有些服务器会发送许多这种名称/值对, 但是所有服务器都至少要发送一个: content-type:text/html. 这将告诉浏览器准备接受一个 HTML 文档.

举例

<meta http-equiv="charset" content="iso-8859-1">

  • <link>标签

用于链接外部资源, 并定义html文档与外部资源的关系,

最常见用于链接外部文本样式表,

该标签要注意的两个属性:

herf属性:

用以定义文档路径

rel属性:

规定当前文档与被链接文档之间的关系(若不填写该属性, 则不可识别文档作用, 文档就不会被加载)

  • <script>标签

用于插入一段脚本代码, 代码类型通过属性type来定义

也可以通过该标签的src属性来链接外部的脚本文件

  • <style>标签

用于插入一段css样式,

要注意的属性

type属性:

有且只有一种值, 为text/css, 可以不写该属性

注意: 链接外部的css文件只可以通过<link>标签来实现, <style>标签只能用于css代码插入

  • <title>标签

用于定义文档的标题, 这个标题会显示在浏览器的标签上,

可以为空 (内容为空时会调用默认值), 但必须包含在 <head> 当中

4. <body>标签

用于定义文档的主体, 包含了文档的所有内容

该标签支持 html 的全局属性和事件属性.

不建议在 html 标签中用标签自带的某些属性来完成用 CSS 实现的样式

html 标签最好只用于网页结构的布置, 不要用于网页样式的排布修饰

HTML笔记(一) 基础标签的介绍的更多相关文章

  1. 学习笔记—HTML基础标签

    HTML的概念 概念: HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 ( ...

  2. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  3. Python学习笔记—Python基础1 介绍、发展史、安装、基本语法

    第一周学习笔记: 一.Python介绍      1.Python的创始人为吉多·范罗苏姆.1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  4. 【转】Java基础笔记 – 枚举类型的使用介绍和静态导入--不错

    原文网址:http://www.itzhai.com/java-based-notes-introduction-and-use-of-an-enumeration-type-static-impor ...

  5. Python学习笔记之基础篇（-）python介绍与安装

    Python学习笔记之基础篇(-)初识python Python的理念:崇尚优美.清晰.简单,是一个优秀并广泛使用的语言. python的历史: 1989年,为了打发圣诞节假期,作者Guido开始写P ...

  6. HTML基础标签图片文本超链接列表表格介绍

    1.HTML基础标签图片常见代码形式<img src="图片路径地址" alt="属性名" title="占位符">常见的图片格 ...

  7. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  8. 从头开始学JavaScript 笔记(一)——基础中的基础

    原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成   javascript   ECMASc ...

  9. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

随机推荐

  1. 快速排序c代码

    //快速排序,通过测试 #include "stdio.h" void quickSort(int* data,int len){ ) return; ; ; ]; while(s ...

  2. 【winfrom-右击快捷菜单】右击或左击时显示快捷菜单

    拖个contextMenuStrip控件 按钮的MouseDown事件: private void treeView1_MouseDown(object sender, MouseEventArgs ...

  3. Markdown 标记语言指北

    这是班刊约稿的一篇文章. 全文约6000字, 预计需要 60 分钟读完. Markdown 标记语言指北 TOC 什么是 Markdown? Markdown 可以用来干什么? 第一步? 一些专业一点 ...

  4. [CF1204E]Natasha,Sasha and the Prefix Sums 题解

    前言 本文中的排列指由n个1, m个-1构成的序列中的一种. 题目这么长不吐槽了,但是这确实是一道好题. 题解 DP题话不多说,直接状态/变量/转移. 状态 我们定义f表示"最大prefix ...

  5. 【BZOJ5415&UOJ393】归程（Kruskal重构树，最短路）

    题意:From https://www.cnblogs.com/Memory-of-winter/p/11628351.html 思路:先从1开始跑一遍dijkstra,建出kruskal重构树之后每 ...

  6. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  7. httpd如何卸载以及安装

    卸载 首先,要确认下是否有安装过,或者是系统自带了httpd服务,通过以下命令: # rpm -qa | grep httpd 或者: # yum list | grep httpd 我已经安装过一次 ...

  8. python学习之路（17）

    sorted 排序算法 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个dict呢?直接比较数学上的大 ...

  9. 分布式-信息方式-JMS大纲

     一.简介 JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送消息, ...

  10. LinkedList类源码浅析(一)

    1.先来看一看LinkedList类的字段和构造方法 size记录链表的长度,first永远指向链表的第一个元素,last永远指向链表的最后一个元素 提供两个构造方法,一个无参的构造方法,一个接受一个 ...