html 1-白红宇

html 1

阅读量：6902 次

发布时间：2019-06-27

本文共 3078 字，大约阅读时间需要 10 分钟。

课程安排

Html + css 四天

u Html是什么

1. html (hypertext mark-up language)是超文本标记语言, 主要的用处是做网页, 可以在网页上显示文字、图像、视频、声音…

☞ 标记==元素

简单说明一下动态网页的示意图:

u Html历史

1999 html-- xhtml (xhtml 可以理解成就是html的加强版) -àxml

2008 html5.0

u W3c的介绍

是一个制定标准的组织 ( 比如给 html ,xhtml ,css ,xml , wml…制定标准)

☞ 不同的浏览器，去访问同一个网页，可能看到的效果是有差别!->hack

u Html的运行原理

Hello.html

Html的运行有两种方式

Html文件的基本结构

<html>

</html>

1.本地运行

所谓本地运行就是直接用浏览器打开

2. 远程访问

l 何为协议? 计算机互相通信(网络)的规则. ftp smtp pop http

远程访问的原理示意图:

☞ 这里我们涉及到http协议，这里我们没有深入讲解，但是这是一个非常重要的知识点.

Html的基本结构

<html>

<head>

<元素属性1=”值” …./>

</head>

<body>

<元素属性1=”属性值” 属性2=“属性值” …>内容</元素>

<元素属性=”属性值”/>

</body>

</html>

说明

1. 标记通常是成对出现 <head></head>

2. 单标记

案例:

Demo1.htm

<html>

<body>

横看成林

远近高低各不同

不知庐山真面目

</body>

</html>

面试: 请问后缀 html 和 htm 有什么区别?

答: 1. 如果一个网站有 index.html 和 index.htm 默认情况下，优先访问 .html

3. htm 后缀是为了兼容以前的dos 系统 8.3的命名规范

u html符号实体

说明：当我们在网页中有一些特殊字符时候，可以考虑使用字符实体(char entity)

超链接的案例:

*****************

<a href="http://www.baidu.com">跳转到百度</a>

<a href="mailto: hanshunping@tsinghua.org.cn">联系管理员</a>

图片:

u Html的表格元素

l 在以前对网页布局要求不高的情况下，使用 table 布局(即使用表格来显示数据，同时用于布局)

快速入门:

 
    
     
     
      123
      
       2
       
        453910 3910

应用案例：

1. 确定行

代码如下:


    
    
     
     
      
      
       菜谱 
       
        素菜青草茄子花椒扁豆  小炒韭菜白豆腐
        
         荤菜清蒸龙鱼香肉丝 小炒肉 
         水煮肉片

课堂练习:

 俺第一个实例
    
     成绩表
    
    
    
     
      项目
      
       上课
       
        休息 
        
         星期星期一星期二星期三星期四星期五星期六星期日 
         
          
           上午语文数学英语英语物理计算机
           
            休息 
            
              数学数学地理历史化学计算机  
             
               化学语文体育计算机英语计算机  
              
                政治英语体育历史地理计算机1 
               
                
                 下午语文数学英语英语物理计算机
                 
                  休息 
                  
                    数学数学地理历史化学计算机

u 无序列表

<ul>

</ul>

案例:

代码:

</ul>

☞ type 可以取 disc 、 circle 、 square

u 有序列表

代码:

</ol>

☞ type用于指定用什么来显示, start 表示从第几开始计算.

u Frameset框架集

用途主要是用于分割显示多个页面

☞ framest 和 frame 配合使用，一般讲是用于后台页面

快速入门:

代码

A2.html 页面用于保护其它页面

</frameset>

☞ 该页面不能有body和body体

b.html

</body>

☞ target 属性值有四个

_blank : 表示打开一个全新的页面

_self: 替换本页面

_top:

_parent:

* 还有一个就是在 target 值中直接写对应的那个 frame的名字.

c.html:

歌词大全

</body>

其它页面

Frameset的综合小案例:

结构示意图:

案例

All.html
    
     
     
      
       Top.html
      Left.html
      
       
        
         
          青花瓷
         
        
         
          当兵的人
         
       
 Right.html 
       
        歌词大全