HTML 一文读懂

目录

1、认识HTML

2、 HTML 网页构成 

HTML基本结构

网页头部信息

3、HTML 基本标签 

4、图像标签 

5、链接标签

6. 行内元素和块元素

7. 列表

 8. 表格

 9. 媒体元素

10. 页面结构分析

 11、HTML 内联框架（iframe）

12、初识表单

表单元素属性

13、文本框和密码框 

14、单选框和多选框 

15、普通按钮和下拉框

16、文本域和文件域

17. 搜索框滑块和简单验证

18. 表单隐藏域、只读和禁用

 19、表单验证

---

本文基于：菜鸟教程之HTML教程 和 狂神HTML

1、认识HTML

初始化HTML

 
我的第一HTML页面
我的第一HTML页面
 

实例详解：

•  声明为 HTML5 文档
•  元素是 HTML 页面的根元素
•  元素包含了文档的元（meta）数据，如  定义网页编码格式为 utf-8。
• Hello World HTML

  3、HTML 基本标签 

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

  
  
  
      
      
  
  
  
  一级标签
  二级标签
  六级标签
  
  
  
  这是一整段这是一整段这是一整段这是一整段
      这是一整段这是一整段这是一整段
      这是一整段这是一整段
      这是一整段
      这是一整段
  
  第一段
  第二段
  第三段
  
  
  
  第一行 
  
  第二行
  
  
  
  
  粗体：I LOVE YOU 
  斜体：I LOVE YOU 
  斜体：I LOVE YOU
  
  小号子：I LOVE YOU
  
  下标：I LOVE YOU
  
  上标：I LOVE YOU
  
  插入: I LOVE YOU
  
  删除: I LOVE YOU
  
  
  
  
  空      格：
  
  大于号：>      
  
  小于号：<     
  
  版权符号：©
  
  
  
  
  

  4、图像标签 

  常见图像格式：

  • JPG
  • GIF
  • PNG
  • BMP：位图
  • …

  语法：

  
  
  src：图像地址
  alt：图像的替代文字（找不到该图片时，才会显示）
  title：鼠标悬停提示文字
  width:图像宽度
  height:图像高度
  
  
  

  示例：

  
  
   
   
   
  
  
  
  这是一些文本。  这是一些文本。
  
  
  

  5、链接标签

  文本超链接：点击文本进行跳转

  图像超链接：点击图片进行跳转

  语法：

  
  链接文本或图像
  href：必填 ，表示要跳转到那个页面
  target:表示窗口在哪里打开，默认是当前页面打开
         _blank：在新的标签页打开
         _self:在自己的网页中打开
  

  示例：

  
  
  
      
      
  
  
  	
  	点击我跳转到百度
  	
  
  	
  	
  		 
  	
  	
  
  
  
  

  锚链接

  • 通过# 实现页面间的跳转
  • 跳转到另一个页面指定的位置

  
  
  
      
      
  
  
  	
  	
  	我是顶部
  	
  
  	
  	点击我跳转到百度
  	
  
  	
  	
  		 
  	
  	
  
  	
  	
  
  	
  	跳转到顶部
  
  
  

  功能性链接

  
  点击联系我！
  

  6. 行内元素和块元素

  块元素

  • 无论内容多少，该元素独占一行
  • p：段落标签
  • div：把DIV看作是一容器,容器专门用来包含内容
  • h1、h2… …：标题
  • form：表单
  • ul：无序列表，与li绑定
  • ol：有序列表，与li绑定
  • hr：分隔 
  • ...

  行内元素

  • 内容撑开宽度，左右都是行内元素的可以在排一行
  • a：锚点
  • b：加粗
  • i ：斜体
  • img：图片
  • input：输入框
  • label：表格标签
  • select：下拉列表
  • span：用来组合文档中的行内元素
  • textarea：多行文本输入框
  • ...

  7. 列表

  列表的分类：

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

  示例：

  
  
  
      
      
  
  
  
  
  
      
  Java
      
  python
      
  前端
  
  
  
      
  C
      
  C++
      
  Linx
  
  
  
      
  学科
          
  数字电路
          
  模拟电路
          
  嵌入式
      
  位置
          
  北京
          
  上海
  
  
  
  
  
  

  效果截图：

  

   8. 表格

  为什么使用表格？

  • 简单通用
  • 结构稳定

  基本结构：

  • 单元格
  • 行 tr
  • 列 td
  • 跨行 rowspan
  • 跨列 colspan

  示例： 

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

  效果截图：

  

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

  效果截图：

  

   9. 媒体元素

  视频元素：video

  音频元素：audio

  10. 页面结构分析

  

  示例：

  
  
      
  网页头部
  
  
  
      
  网页主体部分
  
  
  
      
  网页脚部
  
  
  

   11、HTML 内联框架（iframe）

  语法：

  
          引用页面地址                 框架标示名
  

  示例：

  
  
  
      
      
  
  
  
  
  
  
  
  
  
  
  点击我跳转到CSDN
  
  
  
  
  

  12、初识表单

  语法：

  
  
      
      
  姓名：
      
      
  密码：
  
      
      
      
      
  
  

  效果截图：

  

  表单元素属性

  

  13、文本框和密码框 

  文本框通过  标签来设定。

  
  First name: 
  
  Last name: 
  

   密码框通过标签  来设定。

  
  Password: 
  

  14、单选框和多选框 

  单选框：

  
  
  	
      男
      女
  
  

   多选框：

  
   爱好：
  	
      睡觉
      看书
      游泳
      写作
  
  
  

  15、普通按钮和下拉框

  按钮：

  
   按钮：
      
  
  

  效果截图：

  

   图片按钮

  下拉框：

  国家：
      
          中国
          美国
          
          瑞士
      
  
  

  16、文本域和文件域

  文本域：

  
  反馈：
      文本内容
  
  

  文件域:

  17. 搜索框滑块和简单验证

  
   邮箱：
      
  
  
   URL：
      
  
  
   number：
      
  
  
  
  音量：
      
  
  
  
  搜索：
      
  
  

  18. 表单隐藏域、只读和禁用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

  
  
      只读：
      
  姓名：
      
      
  禁用：
          
          男
          女
      
      
      
      
  密码：
  
  
  

  增强鼠标的可用性：

  增强鼠标的可用性：
  
      你点我试试！！
      
  
  

  点击文字，自动跳转到对应的输入框。

  

   19、表单验证

  思考：

  • 减轻服务器的压力

  • 安全性

  常用方式：

  • placeholder 提示信息
  • required 元素不能为空，应用于所有的文本框中
  • pattern 正则表达式

  
  
      
  姓名：
          
      
      
      
  姓名：
          
      
      
      
   自定义邮箱：