什么是HTML

  • HTML

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

W3C标准

  • W3C

    • World Wide Web Consortium(万维网联盟)

    • 成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机 构

    • http://www.w3.org/

    • http://wwwchinaw3c.org/

  • W3C标准包括

    • 结构化标准语言(HTML、XML)

    • 表现标准语言(CSS)

    • 行为标准(DOM、ECMAScript)

HTML基本结构

、等成对的标签，分别叫开放标签和闭合标签 单独呈现的标签(空元素)，如

;意为用/来关闭空元素

网页基本标签

  • 标题标签

    一级标签
    二级标签
    三级标签

  • 段落标签：

    我不落泪 忍住感觉
    分手在起风 这个季节

  • 换行标签

    我落泪 情绪零碎
    你的世界 一幕幕纷飞

  • 水平线标签：

  • 字体样式标签

    粗体： W S N D
    斜体： W S N D

  • 注释和特殊符号：& ;

图像标签

图像的替代文字

  • 常见的图像格式

    • JPG

    • GIF

    • PNG

    • BMP

    • ……

链接标签

链接文本或图像 target常用值：_self、_blank

超链接

​回到顶部down

  • 功能性链接

你好，加我获取小电影    你好，加我获取小电影

行内元素和块元素

  • 块元素

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

    • (p、h1-h6…)

  • 行内元素

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

    • (a.strong.em…)

列表

  • 什么是列表

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

  • 列表的分类

    • 无序列表

    • 有序列表

    • 自定义列表

表格标签

  • 为什么使用表格

    • 简单通用

    • 结构稳定

  • 基本结构

    • 单元格

    • 行

    • 列

    • 跨行

    • 跨列

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

视频和音频

  • 视频元素

    • video

  • 音频元素

    • audio

页面结构分析

元素名描述
header标题头部区域的内容(用于页面或页面中的一块区域)
footer标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionWeb 页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(常用于侧边栏)
nav导航类辅助内容
    
网页头部
    
网页主体
    
网页脚部

iframe内联框架

点击跳转<!--

表单语法

​

名字:

密码:

​表单元素格式

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

表单的应用

  • 隐藏域 hidden

  • 只读 readonly

  • 禁用 disabled

表单初级验证

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

  • 常用方式

    • placeholder

    • required

    • pattern

        登录注册
注册
    
名字：
        
密码：
    
性别：        男        女    
        
爱好：        睡觉        敲代码        聊天        打游戏    
    <!--按钮    input type="button"  扑通按钮    input type="image"   图像按钮      提交按钮       重置    -->    
按钮：        <!--        -->    
        
国家：                    中国            俄罗斯            新加坡            瑞士            
        
反馈            
        
                    
        
邮箱：            
        
URL：            
        
商品数量：            
        
音量：            
        
搜索：            
                    
自定义邮箱：