HTML

HTML

1. 什么是HTML

Hyper Text Markup Language（超文本标记语言）

• 超文本包括：文字，视频，音乐...

2. HTML5的优势

1. 世界知名厂商对HTML5的支持
2. 市场需求
3. 跨平台

3. W3C标准

W3C：World Wide Web Consortium（万维网联盟）

W3C标准包括

• 结构化标准语言（HTML，XML）
• 表现标准语言（CSS）
• 行为标准（DOM，ECMAScript）

4. 常见IDE

• 记事本
• Dreamweaver
• IDEA
• WebStrom
• ...

5. HTML的基本结构

6. 网页的基本信息

注释的写法

7. 网页的基本标签

    
    




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


人猿相揖别。
只几个石头磨过，
小儿时节。
铜铁炉中翻火焰，
为问何时猜得？
不过几千寒热。
人世难逢开口笑，
上疆场彼此弯弓月。
流遍了，
郊原血。
一篇读罢头飞雪，
但记得斑斑点点，
几行陈迹。
五帝三皇神圣事，
骗了无涯过客。
有多少风流人物？
盗跖庄蹻流誉后，
更陈王奋起挥黄钺。
歌未竟，
东方白。





人猿相揖别。

只几个石头磨过，

小儿时节。

铜铁炉中翻火焰，

为问何时猜得？

不过几千寒热。

人世难逢开口笑，

上疆场彼此弯弓月。

流遍了，

郊原血。

一篇读罢头飞雪，

但记得斑斑点点，

几行陈迹。

五帝三皇神圣事，

骗了无涯过客。

有多少风流人物？

盗跖庄蹻流誉后，

更陈王奋起挥黄钺。

歌未竟，

东方白。



字体样式标签

粗体：I Love You


斜体：I Love You




空     格： 


空          格：

大于号> 

小于号< 

版权符号 © 

8. 图像标签

图片建议放在项目下的resource文件夹下的image文件夹，方便管理

9. 链接标签

    
    




顶部



    点击我跳转到页面一


    点击我跳转到百度







    



    
        
    


    
        
    


    
        
    


    
        
    


    
        
    


    
        
    


    
        
    


    
        
    


    
        
    


    
        
    



    回到顶部


底部



点击联系我


    

跳转

10. 行内元素和块元素

块元素

• 无论内容多少，该元素独占一行
• （p、h1-h6...)

行内元素

• 内容撑开宽度，左右都是行内元素的可以排在一行
• （a、strong、em...）

11. 列表

列表的分类

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

    
    





    
Java
    
Python
    
运维
    
前端






    
Java
    
Python
    
运维
    
前端






    
学科
    
Java
    
Python
    
Linux
    
C

    
位置
    
南京
    
太原
    
沈阳

12. 表格

为什么使用表格

• 简单通用
• 结构稳定

基本结构

• 单元格
• 行
• 列
• 跨行
• 跨列

    
    






    

        
        
1-1
    
    

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

        
3-1
        
3-2
        
3-3
    



    

        

            
                课程表
            
        
    
    

        
上午
        
JavaSE
        
8:00-10:00
    
    

        
HTML
        
10:00-12:00
    
    

        
下午
        
JavaWeb
        
2:00-4:00
    
    

        
JavaScript
        
4:00-6:00
    

13. 媒体元素

• 视频元素 video
• 音频元素 audio

14. 页面结构分析

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文件内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

    
    



网页头部

网页主体

网页脚部

15. iframe内联框架

    
    







点击跳转

16.表单语法

放在form内

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text
name	指定表单元素的名称
value	元素的初始值。type为radio时必须指定一个值
size	指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text或password时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否被选中

    
    



注册





    
    
名字：

    
    
密码：

    
    

        性别：
        男
        女
    

    
    
爱好：
        睡觉
        敲代码
        聊天
        游戏
    

    
    
按钮：
        
        
    

    
    
下拉框：
        
            中国
            美国
            瑞士
            印度
        
    

    
    
反馈：
        文本内容
    

    
    

        
        
    
    
    
    
邮箱：
        
    

    
    
URL：
        
    

    
    
数字：
        
    

    
    
滑块：
        
    

    
    
搜索：
        
    

    
    你点我试试
    

    

        
        
    

17. 表单的应用

• 只读 readonly

• 禁用 disable

• 隐藏域 hidden

点击文字自动选中表单

    
    你点我试试
    

18. 表单初级验证

为什么要进行表单验证？

减轻压力，确保安全

常用方式

• placeholder：默认的输入框显示的提示信息，用于所有的输入框中

  名字：
  

• required：非空判断，若为空则不能提交，用于所有的输入框中

  名字：
  

• pattern：正则表达式

      
      
  自定义邮箱