一个最基本的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. PHP数字处理

    援引自博文 https://blog.csdn.net/hongxiaoshuang/article/details/54598757 ceil -- 进一法取整 float ceil ( float ...

  2. 生成json格式

    html页面 <input type="button" value="重新生成JSON" class="button1" id=&qu ...

  3. WTL自定义控件:SubclassWindow的实现

    自定义了一个edit类如下: class CCheckEditEx : public CWindowImpl< CCheckEditEx, CEdit > 其SubclassWindow函 ...

  4. idea 导入（非maven）web项目并发布到tomcat服务器

    IDEA 2017.1版本 web项目导入并发布到Tomcat服务器 1.点击编辑项目结构 2.点击project 将项目编译输出目录改成{项目目录}/OUT,并设置项目环境,编译版本 3.点击mod ...

  5. 网页“console”输出图文信息

    http://www.monmonkey.com/javascript/jiben2.html 参考以上链接中的转义字符使用. http://www.cnblogs.com/Wayou/p/chrom ...

  6. 堤堤云海外IDC

    http://www.ddyidc.com 堤堤云网络全球互联 堤堤云网络致力为客户提供优质的海外服务器租用服务,各种专线解决方案. 产品分类:服务器租用.IP租用.托管.专线传输.防御.优质回国CN ...

  7. Unity3D_(API)射线检测Raycast()

    Unity射线检测官方文档: 传送门 一.检测前方是否有游戏物体(射线无限长度) 二.检测前方是否有游戏物体(射线长度为1m) 三.检测前方游戏物体碰撞信息(射线无限长度): 四.指定检测碰撞Tag层 ...

  8. java 获取文本一行一行读

    直接上代码: 如果出现乱码:请改一下编码:我这里使用utf-8是会乱码的,改GBK就好了 // 读取文件内容 public static String readFile(String path) {/ ...

  9. Unknown tag (s:property)的原因

    今天在做struts2的练习,然后在jsp页面我使用<s:property value="name"/>竟然报错, 然后网上走了下,恍然大悟,我原来没有在jsp页面里面 ...

  10. Oracle数据库密码过期重置

    oracle登陆密码过期了 这种情况,先连接Oracle,以Oracle用户登录,再输入以下命令: 1,linux系统下,以oracle用户登录进去: su - oracle 2,以系统dba身份登录 ...