前端基础 01、HTML5 入门

1. 初识 HTML

• HyperTextMarkupLanguage（超文本标记语言）
  • 超文本包括：文字、图片、音频、视频、动画。

• HTML5的优势
  • 世界知名浏览器厂商对HTML5的支持
  • 市场的需求
  • 跨平台
• W3C标准
  • W3C
    • 万维网联盟 （World Wide Web Consortium） 。
    • 成立于1994年，Web领域最权威和最具影响力的国际中立性技术标准机构。
    • https://www.w3.org/
    • https://www.chinaw3c.org/
  • W3C标准包括
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准语言(DOM、ECMAScript)
• 常见IDE
  • 记事本
  • Dreamweaver
  • IDEA
  • WebStorm
  • ……
• < body >、< /body>等成对的标签，分别叫做 开放标签和 闭合标签。
• 单独呈现的标签（空元素），如< hr/ >，意为用/来关闭空元素。

• html注释：< !–注释内容–>

    
    
    
    
    
    
    



Hello HTML5!

2. 网页基本标签

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

    
    



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

p换行1
p换行2



换行1 

换行2 



字体样式标签
粗体:I am CSS. 

斜体:HTML5 and CSS3 


空格:1 2  3   4

空格:1 2 3 4

大于号:>

小于号:<

版权符号:©

3. 图像、超链接、网页布局

• 图像标签

• 链接标签
  • href： 必填，表示要跳转到那个页面；
  • target：表示窗口在哪里打开；
    • _blank：在新标签中打开；
    • _self： 在自己的网页中打开；

    
    



点击跳转百度




    







百度底部 


点击联系我


    


回到顶部

• 行内元素和块元素

  • 块元素：无论内容多少，该元素独占一行。

     
    ...
    
    

  • 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行。

4. 列表、表格、媒体元素

1. 列表

什么是列表

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

列表的分类

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

    
    




    
Java
    
Python
    
前端
    
运维
    
C/C++
    
Android




    
Java
    
Python
    
前端
    
运维
    
C/C++
    
Android




    
学科
    
Java
    
Python
    
前端
    
运维
    
C/C++
    
Android

2. 表格

为什么使用表格：

• 简单通用
• 结构稳定

表格的基本结构：

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

    
    




    

        
1-1
    
    

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

        
3-1
        
3-2
        
3-3
    

3. 媒体元素

视频和音频

• 视频：video
• 音频：audio

页面结构

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

    
    




    
页面头部


    
页面主体


    
页面脚部

iframe 内联框架

• ifram 标签，必须要有 src 属性即引用页面的地址。
• 给标签加上 name 属性后，可以做 a 标签的 target 属性，即在内联窗口中打开链接。

    
    







点击跳转

5. 表单及表单应用

标签	说明
input	大部分表单元素对应的标签有 text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text，可以提交用户名、密码等
select	下拉选择框
textarea	文本域

• from 标签，action 属性，为所提交的目的地址，method 选择提交方式，可以选择使用 post 或者 get 方式提交。
  • get 效率高，但在 url 中可以看到提交的内容，不安全，不能提交大文件；
  • post 比较安全，且可以提交大文件。

    
    


注册


    
    
名字：
    
    
密码：
    

           
            
    

• get 方式提交

文本框和单选框

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

    
    


注册


    
    
名字：
    
    
密码：
    
    
性别:
        男
        女
    
    

           
            
    

按钮和多选框

    
    


注册


    
    
名字：
    
    
密码：
    
    
性别:
        男
        女
    
    
    
爱好:
        睡觉
        敲代码
        聊天
        游戏
    
    
    

        
        
    
    

           
            
    

列表文本框和文件域

    
    


注册


    
    
名字：
    
    
密码：
    
    
性别:
        男
        女
    
    
    
爱好:
        睡觉
        敲代码
        聊天
        游戏
    
    
    

        

    
    
    
国家:
        
            中国
            美国
            俄罗斯
            英国
            法国
        
    
    
    
反馈:
        文本内容
    
    
    

        
        
    
    

           
            
    

搜索框滑块和简单验证

    
    


注册


    
    
名字：
    
    
密码：
    
    
性别:
        男
        女
    
    
    
爱好:
        睡觉
        敲代码
        聊天
        游戏
    
    
    

        
        
    
    
    
国家:
        
            中国
            美国
            俄罗斯
            英国
            法国
        
    
    
    
反馈:
        文本内容
    
    
    

        
        
    
    
    

        邮箱：
        url：
    
    
    

        商品数量：
    
    
    

        音量：
    
    
    

        搜索：
    
    

           
            
    

表单的应用

属性	说明
readonly	只读，不可更改
disable	禁用
hidden	隐藏，虽然不可见但是会提交
id	标识符，可以配合 label 的 for 属性，增加鼠标的可用性
placehoder	text 文字域等输入框内的提示信息
required	不能为空
patten	正则表达式验证

    
    


注册


    
    
名字：
    
    
密码：
    
    
性别:
        男
        女
    
    
    
爱好:
        睡觉
        敲代码
        聊天
        游戏
    
    
    

        
        
    
    
    
国家:
        
            中国
            美国
            俄罗斯
            英国
            法国
        
    
    
    
反馈:
        文本内容
    
    
    

        
        
    
    
    

        邮箱：
        url：
    
    
    

        商品数量：
    
    
    

        音量：
    
    
    

        搜索：
    
    
    

        点击标签可选择文本框：
        
    
    

           
            
    

6. 表单初级验证

• 常用方式
  • placeholder：提示信息
  • required：非空判断
  • pattern：正则表达式

自定义邮箱:
    

7. HTML5 总结