一、HTML的概述（了解）

a.html是什么 ： hypertext markup language 超文本标记语言
           超文本：音频，视频，图片称为超文本。.
           标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
    b.作用：编写HTML页面。
    c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).
            HTML页面直接由浏览器解析执行。

二、HTML的历史（了解）

三、HTML的网络术语（明白）

* 网页 ：由各种标记组成的一个页面就叫网页 .
    * 主页(首页) : 一个网站的起始页面或者导航页面 .
    * 标记:<p>称为开始标记  </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
    * 元素：<p>内容</p> 称为元素.
    * 属性： 给每一个标签所做的辅助信息。
    * xhtml： 符合XML语法标准的HTML。
    * dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
    * http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.

四、HTML的编辑工具（了解）
    *.notepad 记事本
    *.editplus : 语法高亮显示
        技巧： 根据颜色判断单词是否出错。 （不是100%）
    *.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.
    *.dw(dreamweaver,专业工具)  代码提示.

五、HTML的规范(知道)
    *.HTML是一个弱势语言
    *.html 不区分大小写
    *.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
    *.html 的结构
        1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。
        2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。
        3)body部分：我们缩写的代码必须放在此标签內。

六、HTML的各种标签(掌握)
  明确：每个标签都有私有属性。也都有公有属性。
         html中表示长度的单位都是像素。HTML只有一种单位就是像素。
   body:  
        bgcolor: 背景颜色
        background:背景图片
        text: 文本颜色
        
1.排版标签    
        所有的浏览器默认情况下都会忽略空格和空行
        P：p代表一个段落
            属性： align:对齐方式. 取值：left,right,center
        <br>代表是换行。
        hr:
            color: 线的颜色
            size : 线的粗细
            width: 线的长短
                    两种写法： 1) 绝对值  eg: 500
                               2) 相对值： 50%
            noshade: 不要阴影
            align: 对齐方式 取值： left,right,center

center: 内容居中
        pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行
        div: 块级标签  必须单独占据一行
               属性： align :
        span: 块级标签 不换行字体标记    
2 字体标签
        h1...h6:定义字体大小
            属性： align :居中
        font:
            color:字体颜色
                颜色的写法有3种： 1)英文单词: red
                                  2)十六进制：#00ffcc
                                  3)RGB(三原色) : new RGB(124,156,23)
            size:字体大小
            face：字体类型
        特殊字符： &lt;小于 &gt;大于 &amp; &符号 &quot; 双引号&apos;单引号
                       &copy; 版权 &trade;商标 &nbsp;空格
                       扩展：绐
        b: 加粗
        strong: 加粗
        i:斜体
        em: 斜体
        u: 下划线
        s: 中划线(删除线)
        sup: 上标
        sub: 下标.    
3.图像标记    
        img: 代表是一副图片
           属性： src : 图片的路径
                        两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径
                                  b) ：绝对路径
                                            1) : 以盘符开始的路径
                                                eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg
                                            2) : 网络路径
                                                eg: http://www.baidu.com/images
                 width: 宽度
                 height：高度
                 Alt：当图片显示不出来的时候代替图片显示的内容
                 title： 提示性文本
                 border: 边框
        热点： 就是特定的位置添加超链。
                 <img src="data:images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
                    <map name="Map" id="Map">
                        <area shape="circle" coords="122,81,38" href="demo_字体标签.html" />
                    </map>
4.清单标记
        列表标签：3种
            a.无序列表ul
                属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)
            b.有序列表(OL)
                属性: type:取值：1(阿拉伯数字，默认),a,A,i,I
                      start: 从几开始
            c.定义列表(dl)
                 dt: 列表项的标题
                 dd: 列表项
5.超链接    
        3种超链接:
            1. 连接到其他页面
            2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字
            3. 连接到邮件: <a href = "mailto:xugang@itcast.cn">进入我的邮箱</a>
                属性：target: 告诉浏览器怎么显示目标页面
                        HTML中已定义4个值： _self :在同一个浏览器中显示
                                            _blank: 打开新的浏览器显示
                                            _parent: 在父窗口中显示
                                            _top: 在顶级窗口中显示
6.表格标记
    table: 表格
          属性：border:边框
                width:宽度
                height：高度
                align:表格的对齐方式
                cellpadding:单元格内容到边的距离
                cellspacing:单元格和单元格之间的距离
                bgcolor:背景颜色
                background:背景图片
                bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色
                bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色
                dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左
        tr: 行
          属性：dir:
                bgcolor:
        td: 单元格
          属性： align: 内容的横向对齐方式
                 valign: 内容的纵向对齐方式 top,middle,bottom
                 width: 绝对值或者相对值(%)
                 height:单元格的高度

单元格的合并：
              单元格的属性：
                  colspan: 横向合并
                  rowspan: 纵向合并
         th: 相当于<td> + <b>
            属性同<td>
        caption: 表格的标题
           属性：align: 取值：left,center,right,top,bottom
        thead
        tbody
        tfoot
           写与不写的区别：
                   1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。                    2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
7.框架标记及<iframe>
        框架页面上不允许有body标签
        frameset: 框架的集合
            rows: 纵向分部框架.
            cols: 横向分部框架.
                  写法有两种: 1) 绝对值  "200,*" ,*代表剩余的
                              2) 相对值  "30%,*"
        frame: 框架. 一个框架显示一个页面
            scrolling: 是否需要滚动条。默认是true
            noresize : 固定框架大小
            bordercolor: 给框架边框起一个颜色
            name : 给框架起一个名字
                内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)
                iframe:
                    属性： width: 宽度
                           height： 高度
                            scrolling : 是否需要滚动条
8.表单标记及语义化

9.多媒体标记
        bgsound: 背景音乐
        embed: 播放多媒体文件.
        marquee: 移动
            属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px
                  behavior: 行为方式 取值：slide,alternate,scroll
                  scrollamount : 移动速度
                  loop: 循环多少圈。负值表示无限循环
                  scrolldelay: 移动一次休息多长时间。单位是毫秒
10.头标记

HTML的学习笔记的更多相关文章

  1. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

  10. ucos实时操作系统学习笔记——任务间通信（消息）

    ucos另一种任务间通信的机制是消息(mbox),个人感觉是它是queue中只有一个信息的特殊情况,从代码中可以很清楚的看到,因为之前有关于queue的学习笔记,所以一并讲一下mbox.为什么有了qu ...

随机推荐

  1. PHP数组按引用传递

    <?php /**PHP数组按引用传递**/ $arr = array( array('id' => 1, 'name' => 'name1'), array('id' => ...

  2. 13.localStorage和sessionStorage的区别

    HTMl5的sessionStorage和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionSt ...

  3. React环境配置

    现在开始配置一个基础项目. 创建项目文件夹:C:\Users\Danny\Desktop\React npm init 创建package.json文件 下面的所有安装,都是--save-dev,因为 ...

  4. SQL Server分页查询方法整理

    SQL Server数据库分页查询一直是SQL Server的短板,闲来无事,想出几种方法,假设有表ARTICLE,字段ID.YEAR...(其他省略),数据53210条(客户真实数据,量不大),分页 ...

  5. Python: Pandas运算的效率探讨以及如何选择高效的运算方式

    本文就Pandas的运行效率作一个对比的测试,来探讨用哪些方式,会使得运行效率较好. 测试环境如下: windows 7, 64位 python 3.5 pandas 0.19.2 numpy 1.1 ...

  6. POJ 3041 Asteroids / UESTC 253 Asteroids（二分图最大匹配，最小点匹配）

    POJ 3041 Asteroids / UESTC 253 Asteroids(二分图最大匹配,最小点匹配) Description Bessie wants to navigate her spa ...

  7. Android系统--输入系统（十六）APP跟输入系统建立联系_InputChannel和Connection

    Android系统--输入系统(十六)APP跟输入系统建立联系_InputChannel和Connection 0. 核心:socketpair机制 1. 回顾Dispatch处理过程: 1.1 放入 ...

  8. Hadoop笔记——技术点汇总

    目录 · 概况 · Hadoop · 云计算 · 大数据 · 数据挖掘 · 手工搭建集群 · 引言 · 配置机器名 · 调整时间 · 创建用户 · 安装JDK · 配置文件 · 启动与测试 · Clo ...

  9. 操作系统，银行家算法模拟实现（Windows 环境 C++）

    计算机操作系统课设需要,写了两个下午的银行家算法(陷在bug里出不来耽误了很多时间),参考计算机操作系统(汤子瀛) 实现过程中不涉及难度较大的算法,仅根据银行家算法的思想和步骤进行实现.以下为详细步骤 ...

  10. Linux编译安装程序(使用configure、make、 make install)

    以安装vim为例. (vim 是vi的升级版本,它不仅兼容vi的所有指令,而且还有一些新的特性在里面). 1.获取源文件 首先进入/usr/local下(只是为了方便处理安装文件,位置随意) 用git ...