一、什么是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标签语法:

<标签名>内容</标签名>
<标签名 />

附注:常用的HTML标签

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

2、HTMl属性

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

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

HTML属性语法:

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

3、HTML元素

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

HTML元素可以互相包含.

4、HTML文档

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

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

5、HTML注释

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

HTML注释语法

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

三、HTML骨架

HTML骨架示例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> <head>
<title>HTML文件标题</title>
HTML头信息
</head> <body>
HTML内容信息
</body> </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 -- 代表右到左的排列方式)
 示例:
<html xmlns="http://www.dreamdu.com" xml:lang="zh-CN" dir="ltr">
说明:
xmlns="http://www.dreamdu.com"代表使用http://www.dreamdu.com做为命名空间
xml:lang="zh-CN"代表使用中文作为页面文字
dir="ltr"代表左到右(left-to-right)的文字对齐方式

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

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

      属性

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

      属性+示例

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

      属性+示例

    • meta标签 -- 为HTML文档提供额外信息,单独出现
       HTML meta content-type 定义文件MIME类型
      HTML meta charset 定义网页编码信息
      HTML meta content-language 定义页面语言
      HTML meta refresh 刷新与跳转(重定向)页面
      HTML meta expires 网页缓存过期时间
      HTML meta pragma no-cache 页面缓存
      HTML meta keywords 网页关键词
      HTML meta description 网页简短描述
      HTML meta author 网页作者
      HTML meta copyright 网页版权
      HTML meta date 网页生成时间
      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标签一起使用
     <body>
    <h>文章的主标题</h>
    <p>介绍</p>
    <section>
    <p>....</p>
    <h>文章的二级标题</h>
    <p>....</p>
    <h>另一个二级标题</h>
    <p>....</p>
    </section>
    <section>
    <p>....</p>
    <h>下一个二级标题</h>
    <p>....</p>
    <section>
    <h>三级标题</h>
    <p>....</p>
    </section>
    </section>
    </body>

    示例

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

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

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

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

位置链接

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

示例

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

邮件链接

 <a href="mailto:xymaqingxiang@163.com">给我写邮件</a>

 mailto四个常用的参数:
subject -- 代表邮件的标题
body -- 代表邮件的内容
cc -- 代表一个抄送对象
bcc -- 代表一个暗送对象

示例

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

图像链接

 <a href="http://www.baidu.com/" title="baidu">
<img src="http://www.baidu.com/img/logo.gif" />
</a> <a href="http://www.google.com/" title="google">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
</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. hexo 使用教程

    hexo 使用教程 这个早就用起来了,写给需要的小伙伴 mayufo.github.io 先扔出自己的地址 安装 想玩hexo,需要安装以下应用 git node 安装完成在终端输入 $ npm in ...

  2. ThreadLocal的简单使用(读书笔记)

         从ThreadLocal的名字上可以看到,这是一个线程局部变量,也就是说,只有当前线程可以访问,既然是只有当前线程可以访问的数据,自然是线程安全的. public class ThreadL ...

  3. TCP和UDP比較

    一.TCP/IP协议 TCP/IP协议,你一定常常听说吧,当中TCP(Transmission Control Protocol)称为传输控制协议,IP(Internet Protocol)称为因特网 ...

  4. mariadb mysql 报'Access denied for user 'root'@'localhost' (using password: NO)'错误的解决

    C:\Program Files\MariaDB 10.2\bin>mysql admin -u root password "x123456789" mysql Ver 1 ...

  5. Knockout JS 演示样例

    五个小样例,来自Knockout JS官方站点. //tutorial 1 //following codes uses to demonstrate observable values and ta ...

  6. composer 初始化办法和方法

    php -r "readfile('https://getcomposer.org/installer');" > composer-setup.php php -r &qu ...

  7. UI-9-UITableView

    课程要点: UITableView及其两种风格和三部分 UITableViewController UITableViewCell及其四种风格 通过代理给UITableView设置cell 性能优化 ...

  8. Java8 stream学习

    Java8初体验(二)Stream语法详解 Java 8 flatMap示例 第一个Stream Demo IDEA里面写Stream有个坑 虽然java文件中没错,但是但编译的时候还是报错了, In ...

  9. Nodejs各种功能Module的收集整理

    收集整理接触过的各种常用的nodejs modules,不断更新~~~ ================================================================ ...

  10. plsql programming 12 集合(忽略, 个人感觉用不到)

    关联数组, 嵌套表, varray 个人并不推荐使用集合, 因为操作有别于普通字段. 集合中每一个元素的数据类型都是相同的, 因此这些元素都是同质的(同质元素) 这一章的内容先忽略吧, 因为个人感觉用 ...