一、什么是HTML

  • HTML是用来制作网页的标记语言
  • HTML是Hypertext Markup Language的英文缩写,即超文本标记语言
  • HTML语言是一种标记语言,不需要编译,直接由浏览器执行
  • HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀
  • HTML是大小写不敏感的,HTML与html是一样的
  • HTML是由W3C的维护的

二、HTML语法

HTML文档(页面)——HTML元素——HTML标签——HTML属性

1、HTML标签

HTML标签是HTML语言中最基本的单位

  • 通常要用两个角括号括起来:<>.
  • 是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如: <br /> (单独出现的换行标签)
  • 标签是大小写无关的.

HTML标签语法:

  1. <标签名>内容</标签名>
  2. <标签名 />

附注:常用的HTML标签

  • html标签 -- 定义HTML文档.
  • body标签 -- 定义HTML文档的内容.
  • p标签 -- 定义段落.
  • h1-h6标签 -- 定义标题.
  • html注释 -- 定义注释内容

2、HTMl属性

HTML属性 -- 一般都出现在HTML标签中,HTML属性是HTML标签的一部分

  • 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中
  • 标签可以拥有多个属性
  • 属性由属性名和值成对出现

HTML属性语法:

  1. <标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值"></标签名>

3、HTML元素

HTML元素是构建网页的一种单位,是由HTML标签HTML属性组成的,HTML元素也是网页中的一种基本单位.

HTML元素可以互相包含.

4、HTML文档

HTML文档就是HTML页面,也就是网页,是由HTML元素组成的.

互联网的所有内容都是由一个个HTML文档体现的.

5、HTML注释

HTML注释的开始使用<!--,结束使用-->

HTML注释语法

  1. <!--注释的内容-->

三、HTML骨架

HTML骨架示例

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3.  
  4. <head>
  5. <title>HTML文件标题</title>
  6. HTML头信息
  7. </head>
  8.  
  9. <body>
  10. HTML内容信息
  11. </body>
  12.  
  13. </html>
  • HTML文档首先要声明一个文档类型,也就是上面例子第一行,定义了XHTML1.1文档类型.
  • <html></html>是HTML文档的开始与结束,也是HTML文档的根元素
  • 除了文档类型外的所有页面内容,都包括在html元素
  • HTML文件中主要分为头信息head内容信息body

文档head信息:头信息head可以容纳文档的HTML相关信息,比如标题title,页面的语言与文字类型,css样式,javascript代码,简短描述关键词等内容,是用户无法直接看到的.

文档body信息:内容信息body包括用户可以看到的全部内容,比如段落,链接,表格等.

1、html 标签 -- 代表HTML文档的开始

  • html标签是成对出现的,以<html>开始, </html>结束
  • 属性
    • Common -- 一般属性
    • xml:lang -- 国际化属性(en--英语;zh-CN--中文)
    • xmlns -- 代表xml命名空间
    • dir -- 定义元素(文字)的对齐方式(ltr -- 代表左到右的排列方式;rtl -- 代表右到左的排列方式)
  1. 示例:
  2. <html xmlns="http://www.dreamdu.com" xml:lang="zh-CN" dir="ltr">
  3. 说明:
  4. xmlns="http://www.dreamdu.com"代表使用http://www.dreamdu.com做为命名空间
  5. xml:lang="zh-CN"代表使用中文作为页面文字
  6. dir="ltr"代表左到右(left-to-right)的文字对齐方式

2、head 标签 -- 代表HTML文档的头信息

  • head标签是成对出现的,以<head>开始,</head>结束
  • 头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.
  • head元素包含的标签:
    • title标签 -- 代表HTML文档的标题
    • base标签 -- 定义基URL用于页面的链接与引用
    • link标签 -- 当在文档中声明使用外接资源(比如CSS)时使用此标签,单独出现
      1. 属性:
      2. href -- 指定需要加载的资源(CSS文件)的地址URI
      3. media -- 媒体类型
      4. rel -- 指定链接类型
      5. rev -- 指定链接类型
      6. title -- 指定元素名称
      7. type -- 包含内容的类型,一般使用type="text/css"
      8. 示例:
      9. <head>
      10. <link rel="stylesheet" type="text/css" href="style.css" />
      11. </head>

      属性

    • style标签 -- 在文档中声明样式时使用此标签
      1. style标签是成对出现的,以<style>开始,以</style>结束
      2. 属性:
      3. media -- 媒体类型,参见CSS高级教程
      4. type -- 包含内容的类型,一般使用type="text/css"
      5. 示例:
      6. <head>
      7. <style type="text/css">
      8. abbr
      9. {
      10. font-size: 12px;
      11. }
      12. .text10pxwhite
      13. {
      14. font-size: 10px;
      15. color: #FFFFFF;
      16. }
      17. </style>
      18. </head>

      属性+示例

    • script标签 -- 在文档中使用脚本
      1. script标签是成对出现的,以<script>开始,以</script>结束
      2. 属性:
      3. src -- 指定需要加载的脚本文件(例如:js文件)的地址URI
      4. type -- 指定媒体类型(例如:type="text/javascript")
      5. 示例:
      6. <head>
      7. <script type="text/javascript" src="dreamdu.js"></script>
      8. </head>

      属性+示例

    • meta标签 -- 为HTML文档提供额外信息,单独出现
      1. HTML meta content-type 定义文件MIME类型
      2. HTML meta charset 定义网页编码信息
      3. HTML meta content-language 定义页面语言
      4. HTML meta refresh 刷新与跳转(重定向)页面
      5. HTML meta expires 网页缓存过期时间
      6. HTML meta pragma no-cache 页面缓存
      7. HTML meta keywords 网页关键词
      8. HTML meta description 网页简短描述
      9. HTML meta author 网页作者
      10. HTML meta copyright 网页版权
      11. HTML meta date 网页生成时间
      12. HTML meta robots 搜索引擎索引方式

      属性

3、body 标签 -- 代表HTML文档的主体

  • body标签是成对出现的,以<body>开始,</body>结束
  • HTML文档的所有内容应该全部放在此标签中.比如浏览器所能表现的文字,图像,链接

四、小实验总结:

1、分段显示:p标签是paragraph的缩写,是段落的意思.由<p></p>组成的元素可以显示成一个段落.可以实现分段显示.

2、段落中换行:使用br标签. <br /> (注意空格)

3、字体的加粗(强调)与斜体<strong>强调</strong> 、 <em>斜体</em>

4、按标题显示:h标签包括,h1,h2,h3,h4,h5,h6 标签 -- 文章的标题标签

  • h标签是成对出现的,以<h>开始,以</h>结束
  • 也可联合section标签一起使用
    1. <body>
    2. <h>文章的主标题</h>
    3. <p>介绍</p>
    4. <section>
    5. <p>....</p>
    6. <h>文章的二级标题</h>
    7. <p>....</p>
    8. <h>另一个二级标题</h>
    9. <p>....</p>
    10. </section>
    11. <section>
    12. <p>....</p>
    13. <h>下一个二级标题</h>
    14. <p>....</p>
    15. <section>
    16. <h>三级标题</h>
    17. <p>....</p>
    18. </section>
    19. </section>
    20. </body>

    示例

5、HTML实体:键盘无法表示的符号,或者HTML本身要用的符号,比如 HTML标签的开始<,与结尾>,还有属性值需要使用的"引号等.

  • &quot; -- 表示双引号(")
  • &amp; -- 表示位与运算符(&)
  • &lt; -- 表示小于运算符(<)
  • &gt; -- 表示大于运算符(>)
  • &nbsp; -- 表示空格( )

6、超链接:a标签是成对出现的,以<a>开始, </a>结束. 示例:<a href="url">显示的文字</a>

  (1)指定位置链接(同一页面中不同位置,不同页面间跳转)

位置链接

  1. <h2 id="top">页面上部</h2>
  2. <a href="#bottom">链接到页面下部</a>
  3.  
  4. <a href="#top">链接到页面上部</a>
  5. <h2 id="bottom">页面下部</h2>
  6.  
  7. <a href="http://www.dreamdu.com/javascript/object_math/#syntax">JS Math函数语法</a>

示例

  (2)邮件链接使用了mailto语法

邮件链接

  1. <a href="mailto:xymaqingxiang@163.com">给我写邮件</a>
  2.  
  3. mailto四个常用的参数:
  4. subject -- 代表邮件的标题
  5. body -- 代表邮件的内容
  6. cc -- 代表一个抄送对象
  7. bcc -- 代表一个暗送对象

示例

  (3)图像链接,可以为一个图像指定链接,使用img标签

图像链接

  1. <a href="http://www.baidu.com/" title="baidu">
  2. <img src="http://www.baidu.com/img/logo.gif" />
  3. </a>
  4.  
  5. <a href="http://www.google.com/" title="google">
  6. <img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
  7. </a>

示例

HTML学习笔记——语法+骨架的更多相关文章

  1. 我的Java学习笔记-语法

    Java的语法与C#的语法基本都一样,毕竟都是面向对象编程语言.下面记录下Java独有的和我在C#中学习不熟的语法知识 一.Java是解释型语言 二.Java修饰符 1. 访问控制修饰符 defaul ...

  2. JavaScript学习笔记--语法二

    条件判断与C语言一样 两种循环.for 循环和 while 循环,JavaScript不区分整数和浮点数,统一用Number表示,所以不是 int i var x = 0; var i; for (i ...

  3. JavaScript学习笔记--语法

    代码风格: 每句结尾不用加分号: 单行注释用//,多行注释用/*...需要注释掉的代码....*/ 严格区分大小写 优雅的代码需要注意锁进 基础知识: Number:JavaScript不区分整数和浮 ...

  4. box-shadow学习笔记

    CSS3 box-shadow属性的简单学习笔记 语法格式: box-shadow: h-shadow v-shadow blur spread color inset; 值 描述 h-shadow ...

  5. [原创]java WEB学习笔记14:JSP的9 个隐含对象 及 JSP 的基本语法

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

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

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

  7. Golang 语法学习笔记

    Golang 语法学习笔记 包.变量和函数. 包 每个 Go 程序都是由包组成的. 程序运行的入口是包 main. 包名与导入路径的最后一个目录一致."math/rand" 包由 ...

  8. CUBRID学习笔记 41 sql语法之select

    cubrid的中sql查询语法 SELECT [ ] [{TO | INTO} ][FROM ] [WHERE ][GROUP BY {col_name | expr} [ASC | DESC], . ...

  9. MarkDown语法 学习笔记 效果源码对照

    MarkDown基本语法学习笔记 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 下面将对Markdown的基本使用做一个介绍 目 ...

随机推荐

  1. non-compatible bean definition of same name and class

    在整合struts2.1.6+spring2.5.6开发中,使用了注解和struts-convention来实现零配置管理.spring也使用注解annotation方式.现在的问题是:我在连个个不同 ...

  2. CentOS下vi编辑器

    vi编辑器是所有Unix及Linux系统下标准的编辑器,它的强大不逊色于任何最新的文本编辑器,这里只是简单地介绍一下它的用法和一小部分指令.由于对Unix及Linux系统的任何版本,vi编辑器是完全相 ...

  3. Python标准库 (pickle包,cPickle包)

    在之前对Python对象的介绍中 (面向对象的基本概念,面向对象的进一步拓展),我提到过Python“一切皆对象”的哲学,在Python中,无论是变量还是函数,都是一个对象.当Python运行时,对象 ...

  4. EXTJS4自学手册——组合图像

    Ext.create('Ext.panel.Panel', { title: '组合图像', renderTo: 'ComplexDiagram', items: [{ xtype: 'button' ...

  5. EXTJS4自学手册——报表概述

    Ext画报表所涉及到的组件关系如下: Store:数据容器 Legend:图像说明 Axis:横.纵坐标 Series:报表图像

  6. 使用jconsole监控tomcat(推荐配置)

    1.在tomcat启动过程中,开启相应的参数配置 $Tomcat_home/bin/catalina.sh: 1 2 3 4 -Dcom.sun.management.jmxremote -Dcom. ...

  7. tcp/ip ---数据链路层

  8. 编译安装git

    http://zhaohe162.blog.163.com/blog/static/38216797201472185321661/

  9. vivado2016.2下系统自带DDR3 ip例程仿真运行

    背景:从ISE14.7迁移到vivado2016.2. xilinx的软件改的真是不一般的大.两个软件操作差距真是让人想骂人.由于项目需要,准备调试DDR3.对于新手来说,例化一个DDR3 ip.如果 ...

  10. mysql workbench 导出表结构

    Server->Data Export 选择数据库(我的是 lhc库) -> 选择对应表(我的是  device表), Dump Structre and Data 导出表数据和表结构 D ...