HTML详解

Hyper Text Markup Language

1、初识HTML

什么是HTML

• HTML
  • Hyper Text Markup Language (超文本标记语言)

HTML发展史

HTML5的优势

• 世界知名浏览器厂商对HTML 5的支持
  • 微软
  • Google
  • 苹果
  • Opera
  • Mozilla
• 市场的需求
• 跨平台

W3C标准

• W3C
  • World Wide Web Consortium (万维网联盟)
  • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
  • http://www.w3.org/
  • http://www.chinaw3c.org/
• W3C标准包括
  • 结构化标准语言(HTML、XML)
  • 表现标准语言(CSS)
  • 行为标准(DOM、ECMAScript )

常见IDE

• 记事本
• Dreamweaver
• IDEA
• WebStorm
• ......

HTML基本结构

、 等成对的标签，分别叫开放标签和闭合标签单独呈现的标签(空元素)，如
 ;意为用/来关闭空元素

网页基本信息

• DOCTYPE声明
• <title>标签
• <meta>标签

我的第一个网页

    
    
    
    
    
     
    




Hello，World！

2、网页基本标签

• 标题标签
• 段落标签
• 换行标签
• 水平线标签
• 字体样式标签
• 注释和特殊符号

代码演示

    
    




一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
    

咏鹅
【作者】骆宾王 【朝代】唐
鹅鹅鹅，
曲项向天歌。
白毛浮绿水，
红掌拨清波。





咏鹅

【作者】骆宾王 【朝代】唐

鹅鹅鹅，

曲项向天歌。

白毛浮绿水，

红掌拨清波。



字体样式标签
粗体：I Love You
斜体：I Love You


    

空    格

大于符号：>

小于符号：<

版权符号：©

六种空格特殊符号

3、图像,超链接，网页布局

图像标签

• 常见的图像格式
  • JPG
  • GIF
  • PNG
  • BMP
  • ......

书写格式：

代码演示

链接标签

• 文本超链接
• 图像超链接

超链接

• 页面间链接

  • 从一个页面链接到另一个页面

• 锚链接

• 功能性链接

代码演示

    
    





顶部


点击我跳转到页面一


点击我跳转到百度首页




    



回到顶部


点击联系我

网页布局

行内元素和块元素

• 块元素
  • 无论内容多少，该元素独占一行
  • (p、h1-h6...)
• 行内元素
  • 内容撑开宽度,左右都是行内元素的可以在排在一行
  • (a.strong.em...)

4、列表表格媒体元素

列表标签

• 什么是列表

  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

• 列表的分类

  • 无序列表
  • 有序列表
  • 定义列表

代码演示

    
    





    
Java
    
Python
    
运维
    
前端
    
C/C++






    
Java
    
Python
    
运维
    
前端
    
C/C++




    
学科
    
Java
    
Python
    
Linux
    
C#

    
位置
    
北京
    
重庆
    
云南
    
武汉

表格标签

• 为什么使用表格
  • 简单通用
  • 结构稳定
• 基本结构
  • 单元格
  • 行-----------?< tr>< /tr>
  • 列-----------?< td>< /td>
  • 跨行---------?rowspan
  • 跨列---------?colspan

代码演示

    
    





    

        
        
1-1

    
    

        
        
2-1
        
2-2
        
2-3
        
2-4
    
    

        
3-2
        
3-3
        
3-4
    

媒体元素

视频和音频

• 视频元素

  • video

• 音频元素

  • audio

代码演示

页面结构分析

代码演示

    
    



网页头部

网页主体

iframe内联框架

代码演示

    
    





点击跳转

5、表单及表单应用

表单语法

表单元素格式

代码演示

    
    



注册





    
    
账户：

    
    
密码：

    
    
性别：
        
        男
        女

    
    
    
爱好：
        睡觉
        吃饭
        打豆豆
    

    
    
按钮：
        
        

    


    
    
国家：
        
            中国
            美国
            瑞士
            法国
        

    

    
    

        反馈信息：
        
    

    
    

        
        
    

    
    
邮箱：
        
    

    
    
URL：
        
    

    
    
商品数量：
        
    

    
    
音量：
        
    

    
    
搜索：
        
    

    
    


        
        
    

表单的应用

• 隐藏域--------------hidden

  密码：
      
      
  
  

• 只读--------------readonly

  账户：
      
  	
  
  

• 禁用--------------disabled

  性别：
  	
     男
     女
  
  

tip：增强鼠标可用性

    点我试试
    

6、表单初级验证

• 思考?为什么要进行表单验证

• 常用方式

  • placeholder--------------------提示信息

    账户：
        
    
    

  • required-------------------------非空判断（元素不能为空）

    密码：
        
    
    

  • pattern----------------------------正则表达式

    自定义邮箱: