一个最基本的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. electron 设置-webkit-app-region: drag 后, 双击放大窗口变形

    双击放大后窗口只是在最左上角,并没有放大, 或者放大了页面变形,如图 原因: 是设置了窗口 transparent: true,和背景色导致的, 不要设置就可以,默认为false mainWindow ...

  2. Python CGI编程Ⅹ

    检索Cookie信息 Cookie信息检索页非常简单,Cookie信息存储在CGI的环境变量HTTP_COOKIE中,存储格式如下: 以下是一个简单的CGI检索cookie信http://www.we ...

  3. 最新天猫3轮面试题目：虚拟机+并发锁+Sql防注入+Zookeeper

    天猫一面 自我介绍.项目介绍 Spring拦截器.实现了哪些方法?底层原理 AOP如何配置,底层原理.2种动态代理,aop注解实现,xml定义切面 Bean的作用域,单例模式是否线程安全?恶汉模式是否 ...

  4. 20. ClustrixDB explain参数解读

    ClustrixDB有一个流模型,它从容器(表和索引)开始并通过操作符图对行进行流处理.ClustrixDB有一组丰富的操作符,随着更多功能和优化的添加,这些操作符偶尔会增加.我们使用一个地方来记录操 ...

  5. react-router中，<switch>

    有<Switch>标签,则其中的<Route>在路径相同的情况下,只匹配第一个,这个可以避免重复匹配: 无<Switch>标签,则其中的<Route>在 ...

  6. linux环境下C++写TCP通信（一）

    #include<stdio.h> #include<string.h> //tcp #include<unistd.h> #include<sys/type ...

  7. tomcat 散点杂记

    tomcat有很多细碎的知识点和一些坑点,我将再次记录 域名直指项目 我们经常访问项目都要带上项目目录 eg: http://xwiki.test.com/xwiki or http://jenkin ...

  8. ping不通服务器就邮件警告

    ping不通服务器就发一封邮件 (单台) vim /root/scipt/1.sh #!/bin/bash ping -c 4 192.168.0.116 &> /dev/null #p ...

  9. sqli-labs(45)

    基于报错的password处的')闭合注入 就是没有报错信息 payload和43关一样的构造

  10. 14.多线程设计模式 - Master-Worker模式

    多线程设计模式 - Master-Worker模式 并发设计模式属于设计优化的一部分,它对于一些常用的多线程结构的总结和抽象.与串行相比并行程序结构通常较为复杂,因此合理的使用并行模式在多线程并发中更 ...