HTML概述

网站信息页面演示

• 需求
  
  
  
  • 在 网页中显示网站的信息的页面.
    
    
    
• 分析
  
  
  
  • 技术分析
    
    
    
    • HTML的概述
      
      
      
      • 什么是HTML?
        
        
        
        • Hyper Text Markup Language:超文本标记语言
          
          
          
          • 标记语言:指的是通过一组标签的形式描述事物的一门语言.
            
            
            
        • 超文本:比普通的文本更强大.
          
          
          
          
      • HTML的作用
        
        
        
        • 是用来制作页面 (静态页面).
          
          
          
      • HTML在哪些地方使用
        
        
        
        • 在设计网站的页面的时候都要使用到HTML.
          
          
          
        
        
    • HTML的使用
      
      
      
      • HTML文件的创建,扩展名是.html,或者.htl结尾(旧版的扩展名只支持三个字母的,新版支持四个字母的).
      • HTML的结构标签
        
        
        
        • 跟标签(成组出现)
        • 如果标签里面没有内容,直接在标签后面,尖括号里面加上/表示.
        • 主要是一些设置
        • 这是正文
        • title 标签在 head里面,title是head的一项内容
          
          
          
        
        
    • HTML的字体标签
      
      
      
      • < font>:HTML中的一个字体标签
        
        
        
        • 格式:
          
          
          
          • <标签名 属性名="属性值"  属性名= "属性值">
          • 多个属性一直写.中间用空格分开
            
            
            
        • 属性
          
          
          
          • color:颜色
            
            
            
            • 英文单词
            • 使用16进制数设置:#FFFFFF
            • 使用配色方案来设置
              
              
              
          • size:字体的大小:从1-7.
          • face: 是什么字体.
            
            
            
            
          
          
        
        
    • HTML的排版标签
      
      
      
      • br/:换行
      • .空格
      • pre:原生标签
      • 标题标签: 从1-6:< h1>---< h6>.
      • 注释:!-- 注释内容 --.
      • 段落标签:p
        
        
        
        • p内容/p
        • 段落和堕落之间有一行空白.
          
          
          
      • 粗体标签:b
      • 斜体标签:i
      • 下划线标签: u
      • 居中显示:center.
      • 横线:hr.
      • 标签可以嵌套使用.
        
        
        
        
      
      
    
    
  
  

在网页中显示图片

• 标签
• 一次只能引入一张图片
  
  
  
  • 属性
    
    
    
    • 路径:src
      
      
      
      • 相对路径
      • 如果引入的图片和html文件在同一级路径,直接写图片名或者./文件名
      • 如果引入的图片在html文件的上一层目录,就用../图片文件名,上两层目录,就用../../图片文件名
      • 如果引入的图片在html文件的下一层就先写当前目录名/图片文件名.
        
        
        
    • width:图片的宽度
      
      
      
      • width="90px".
        
        
        
    • height:图片的高度
    • width和height的数值是图片像素的数值.
    • alt:图片找不到显示的内容后所显示的内容
      
      
      
      
    
    
  
  

网站列表页面的显示

• 一般是竖向显示的
• 无序列表
  
  
  
  • ul标签
  • 内容用li标签
    
    
    
• 有序列表
  
  
  
  • ol标签
  • 内容用li标签
    
    
    
• 列表样式(列表的属性)
  
  
  
  • 无序列表属性
    
    
    
    • dic:实心点
    • circle:空心圈
    • square:方块
      
      
      
  • 有序列表属性
    
    
    
    • start:是有序列表中的属性:从哪开始
    • a:有序列表,从a开始
    • 1:有序列表,从1开始
    • i:罗马数字,从i开始
      
      
      
    
    
• 超链接标签
  
  
  
  • a标签
    
    
    
    • 属性
    • href:链接位置(可以是具体的网址(用全域名,http://www.baidu.com),也可以是自己项目的位置,用相对路径)
    • target:打开方式
      
      
      
      • _self:在自身页面打开(是默认方式).
      • _blank:新打开一个窗口
      • _parent:
      • 如果是frameSet标签里面的frame,可以给单个frame定义一个name值,然后在指定的frame里面打开.一般用于后台界面.
        
        
        
      
      
    
    
  
  

网页表格的标签

• table : 表格标签
  
  
  
  • tr: 行
  • td: 列.
  • th: 定义了基本类型的列(加粗,居中显示)
    
    
    
• 表格标签属性
  
  
  
  • width:表格宽度
  • Height:表格高度
  • Border:表格边框
  • align:居中显示
  • 
    
    
    
• 嵌套表格,里面嵌套的表格也要用table标签.
• 合并单元格标签
  
  
  
  • colspan="列数"
    
    
    
    • 值,表示合并后占据几列
      
      
      
  • rowspan="行数"
    
    
    
    • 值,表示合并后占据几行
      
      
      
  • 把谁的地方占了就得把被占的那个删除.
    
    
    
    
  
  

网页的表单标签(登陆注册页面)

• form标签: 表单
  
  
  
  • 元素
  • 传参数的格式,网址?name=value&name=value&name=value等等.
  • 常用属性
    
    
    
    • action:提交路径:默认提交到当前页面.
    • method:请求的方式:get和post:默认的get方式.
      
      
      
      • get和post的区别:
        
        
        
        • get方式  数据会显示到地址栏中(不安全),有大小限制
        • post:不会显示到地址栏中(安全的),没有大小限制.上传文件一定要选择post.防止文件过大,超过get的限制值.
          
          
          
        
        
      
      
  • name属性是必须的,只有有了这个属性,才可以对应传入后台读取.
    
    
    
    • input 标签
      
      
      
      • 属性
        
        
        
        • type = "text":文本框
          
          
          
          • 属性
            
            
            
            • name:表单元素的名称.必须有name属性,然后后台才可以接收数据.
            • value:文本框的默认值
            • size:文本框的长度
            • maxlength:文本框输入的最大长度
            • readonly:只读.
            • disable:废弃的,不可用.
              
              
              
            
            
        • type = "password":密码框
          
          
          
          • name:
          • value:
          • size
          • ...和文本框差不多
            
            
            
        • type= "radio":单选按钮
          
          
          
          • 需要分组,每个组起个名字.name="".
          • checked:默认值.在哪个选项里边就是默认的哪个.
            
            
            
        • type= "checkbox":复选按钮
          
          
          
          • 也需要分组,起个名字,name="".
          • checked:是属性.
            
            
            
        • type="button":普通按钮,没有任何功能,自定义功能.
        • type="submit":提交按钮
          
          
          
          • value:是按钮的名字.
            
            
            
        • type="reset":重置按钮
        • type="file":文件上传的表单项
        • type="hidden":隐藏字段(和文本框一样,用户看不到,但是会提交到后台)
        • type="image":图片按钮.
          
          
          
          
        
        
    • select:下拉列表
      
      
      
      • name:
      • option:选项.
      • selected:默认选项或者选中的选项
        
        
        
    • textarea:文本域
      
      
      
      • cols:列
      • rows:行
        
        
        
      
      
    
    
  
  

HTML5中的格外标签

• input type="email":只能输入邮箱格式.
• input type="date";只能输入日期格式
• input type="number":只能输入数字格式
• input type="color":选择颜色.
  
  
  

HTML概述

网站信息页面演示

• 需求
  
  
  
  • 在 网页中显示网站的信息的页面.
    
    
    
• 分析
  
  
  
  • 技术分析
    
    
    
    • HTML的概述
      
      
      
      • 什么是HTML?
        
        
        
        • Hyper Text Markup Language:超文本标记语言
          
          
          
          • 标记语言:指的是通过一组标签的形式描述事物的一门语言.
            
            
            
        • 超文本:比普通的文本更强大.
          
          
          
          
      • HTML的作用
        
        
        
        • 是用来制作页面 (静态页面).
          
          
          
      • HTML在哪些地方使用
        
        
        
        • 在设计网站的页面的时候都要使用到HTML.
          
          
          
        
        
    • HTML的使用
      
      
      
      • HTML文件的创建,扩展名是.html,或者.htl结尾(旧版的扩展名只支持三个字母的,新版支持四个字母的).
      • HTML的结构标签
        
        
        
        • 跟标签(成组出现)
        • 如果标签里面没有内容,直接在标签后面,尖括号里面加上/表示.
        • 主要是一些设置
        • 这是正文
        • title 标签在 head里面,title是head的一项内容
          
          
          
        
        
    • HTML的字体标签
      
      
      
      • < font>:HTML中的一个字体标签
        
        
        
        • 格式:
          
          
          
          • <标签名 属性名="属性值"  属性名= "属性值">
          • 多个属性一直写.中间用空格分开
            
            
            
        • 属性
          
          
          
          • color:颜色
            
            
            
            • 英文单词
            • 使用16进制数设置:#FFFFFF
            • 使用配色方案来设置
              
              
              
          • size:字体的大小:从1-7.
          • face: 是什么字体.
            
            
            
            
          
          
        
        
    • HTML的排版标签
      
      
      
      • br/:换行
      • .空格
      • pre:原生标签
      • 标题标签: 从1-6:< h1>---< h6>.
      • 注释:!-- 注释内容 --.
      • 段落标签:p
        
        
        
        • p内容/p
        • 段落和堕落之间有一行空白.
          
          
          
      • 粗体标签:b
      • 斜体标签:i
      • 下划线标签: u
      • 居中显示:center.
      • 横线:hr.
      • 标签可以嵌套使用.
        
        
        
        
      
      
    
    
  
  

在网页中显示图片

• 标签
• 一次只能引入一张图片
  
  
  
  • 属性
    
    
    
    • 路径:src
      
      
      
      • 相对路径
      • 如果引入的图片和html文件在同一级路径,直接写图片名或者./文件名
      • 如果引入的图片在html文件的上一层目录,就用../图片文件名,上两层目录,就用../../图片文件名
      • 如果引入的图片在html文件的下一层就先写当前目录名/图片文件名.
        
        
        
    • width:图片的宽度
      
      
      
      • width="90px".
        
        
        
    • height:图片的高度
    • width和height的数值是图片像素的数值.
    • alt:图片找不到显示的内容后所显示的内容
      
      
      
      
    
    
  
  

网站列表页面的显示

• 一般是竖向显示的
• 无序列表
  
  
  
  • ul标签
  • 内容用li标签
    
    
    
• 有序列表
  
  
  
  • ol标签
  • 内容用li标签
    
    
    
• 列表样式(列表的属性)
  
  
  
  • 无序列表属性
    
    
    
    • dic:实心点
    • circle:空心圈
    • square:方块
      
      
      
  • 有序列表属性
    
    
    
    • start:是有序列表中的属性:从哪开始
    • a:有序列表,从a开始
    • 1:有序列表,从1开始
    • i:罗马数字,从i开始
      
      
      
    
    
• 超链接标签
  
  
  
  • a标签
    
    
    
    • 属性
    • href:链接位置(可以是具体的网址(用全域名,http://www.baidu.com),也可以是自己项目的位置,用相对路径)
    • target:打开方式
      
      
      
      • _self:在自身页面打开(是默认方式).
      • _blank:新打开一个窗口
      • _parent:
      • 如果是frameSet标签里面的frame,可以给单个frame定义一个name值,然后在指定的frame里面打开.一般用于后台界面.
        
        
        
      
      
    
    
  
  

网页表格的标签

• table : 表格标签
  
  
  
  • tr: 行
  • td: 列.
  • th: 定义了基本类型的列(加粗,居中显示)
    
    
    
• 表格标签属性
  
  
  
  • width:表格宽度
  • Height:表格高度
  • Border:表格边框
  • align:居中显示
  • 
    
    
    
• 嵌套表格,里面嵌套的表格也要用table标签.
• 合并单元格标签
  
  
  
  • colspan="列数"
    
    
    
    • 值,表示合并后占据几列
      
      
      
  • rowspan="行数"
    
    
    
    • 值,表示合并后占据几行
      
      
      
  • 把谁的地方占了就得把被占的那个删除.
    
    
    
    
  
  

网页的表单标签(登陆注册页面)

• form标签: 表单
  
  
  
  • 元素
  • 传参数的格式,网址?name=value&name=value&name=value等等.
  • 常用属性
    
    
    
    • action:提交路径:默认提交到当前页面.
    • method:请求的方式:get和post:默认的get方式.
      
      
      
      • get和post的区别:
        
        
        
        • get方式  数据会显示到地址栏中(不安全),有大小限制
        • post:不会显示到地址栏中(安全的),没有大小限制.上传文件一定要选择post.防止文件过大,超过get的限制值.
          
          
          
        
        
      
      
  • name属性是必须的,只有有了这个属性,才可以对应传入后台读取.
    
    
    
    • input 标签
      
      
      
      • 属性
        
        
        
        • type = "text":文本框
          
          
          
          • 属性
            
            
            
            • name:表单元素的名称.必须有name属性,然后后台才可以接收数据.
            • value:文本框的默认值
            • size:文本框的长度
            • maxlength:文本框输入的最大长度
            • readonly:只读.
            • disable:废弃的,不可用.
              
              
              
            
            
        • type = "password":密码框
          
          
          
          • name:
          • value:
          • size
          • ...和文本框差不多
            
            
            
        • type= "radio":单选按钮
          
          
          
          • 需要分组,每个组起个名字.name="".
          • checked:默认值.在哪个选项里边就是默认的哪个.
            
            
            
        • type= "checkbox":复选按钮
          
          
          
          • 也需要分组,起个名字,name="".
          • checked:是属性.
            
            
            
        • type="button":普通按钮,没有任何功能,自定义功能.
        • type="submit":提交按钮
          
          
          
          • value:是按钮的名字.
            
            
            
        • type="reset":重置按钮
        • type="file":文件上传的表单项
        • type="hidden":隐藏字段(和文本框一样,用户看不到,但是会提交到后台)
        • type="image":图片按钮.
          
          
          
          
        
        
    • select:下拉列表
      
      
      
      • name:
      • option:选项.
      • selected:默认选项或者选中的选项
        
        
        
    • textarea:文本域
      
      
      
      • cols:列
      • rows:行
        
        
        
      
      
    
    
  
  

HTML5中的格外标签

• input type="email":只能输入邮箱格式.
• input type="date";只能输入日期格式
• input type="number":只能输入数字格式
• input type="color":选择颜色.