文章目录

• 01 什么是HTML？
• 02 HTML的基本结构
• 03 网页基本标签
• 04 图像标签
• 05 链接标签
• 06 块元素和行内元素
• 07 列表
• 07 表格
• 08 视频和音频
• 09 页面结构
• 10 iframe内联框架
• 11 表单语法
• • 👉 表单元素格式
  • 👉 表单的应用
  • 👉 表单初级验证

01 什么是HTML？

👉 Hyper Text Markup Language ( 超文本标记语言 )

超文本包括：文字、图片、音频、视频、动画等；

以前常见的 Flash 等插件，如今 HTML5 可以轻松实现
 
HTML5 的优势：

制定HTML5的：

02 HTML的基本结构

Hello World !

03 网页基本标签

• 标题标签 ：

• 段落标签 ：

• 换行标签 ：
  
• 水平线标签 ：

  ---

• 字体样式标签 ： 粗体 斜体
• 注释和特殊符号 ： 特殊符号&

~~~





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

这是第一段
这是第二段
这是第三段
这是第四段

接下来是换行
再换行
再换


字体样式标签
粗体
斜体


 
哈 哈

>

<
©苗半里版权所有

04 图像标签

• 常见的图像格式：
  • JPG
  • GIF
  • PNG
  • BMP
  • …

05 链接标签

有 文本超链接 和 图像超链接 ：

点击我跳转到百度



顶部
回到顶部
点击给我发邮件

06 块元素和行内元素

• 块元素
  • 无论内容多少，该元素独占一行
  • 如：段落 、 标题 …
  • （ p 、 h1 - h6 ）
• 行内元素
  • 内容撑开宽度，左右都是行内元素的可以排在一行
  • 如：粗体、斜体 …
  • （ a 、strong 、 em … ）

07 列表

什么是列表？

         列表就是信息资源的一种展示形式，可以使信息结构化和条理化，以便浏览者快捷地获取相应信息。

列表的分类：

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

网页
数据库
算法

Java
C++
Python

编程
Java
C++
Python
业务
前端
后端

07 表格

为什么使用表格？

• 简单通用
• 结构稳定

基本结构：

• 单元格
• 行 ：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 
  
 4-1 
 4-2 
 4-3 
 4-4 

运行可得下表：

08 视频和音频

video 和 audio 标签 （可自由加属性）：

09 页面结构

网页头部
网页主体

10 iframe内联框架

👉 就是一个网页里面嵌套另一个网页

点击跳转 

11 表单语法

👉 例如网页里的用户登录窗口就是一个表单

注册
名字：
密码：

👉 表单元素格式

注册
     
名字：
密码：
性别：男女
爱好:睡觉敲代码 聊天游戏运动
按钮: 
国家中国 美国英国
反馈:文本内容

上传文件:
邮箱:
URL
数量:
音量:
搜索:

👉 表单的应用

• 只读： input 标签里加上 readonly
• 禁用：input 标签里加上 disabled
• 隐藏：input 标签里加上 hidden

拓展：

你点我试试

点击文字部分，会自动跳转到右边的文本框：

👉 表单初级验证

常用方式：

• placeholder 提示信息
• required 非空判断

名字：
密码：

• pattern 正则表达式

自定义邮箱: