前端基础：html

1. 初识HTML

1.1 什么是HTML

• HTML： Hyper Text Markup Language(超文本标记语言)


• 超文本包括：文字，图片，音频，视频，动画等

历史

1.2 HTML的优势

• 世界知名浏览器厂商对HTML5的支持
  
  
  
  • 微软
  
  
  • Google
  
  
  • 苹果
  
  
  • Opera
  
  
  • Mozilla
  
  
  
  


• 市场的需求


• 跨平台

1.3 W3C标准

• W3C
  
  
  
  • World Wide Wed Consortium(万维网联盟)
  
  
  • 成立于1994年，Wed技术领域最权威和具影响力的国际中立性技术标准机构
  
  
  • http://www.w3.org/
  
  
  • http://www.chinaw3c.org/
  
  
  
  


• W3C标准包括
  
  
  
  • 结构化标准语言（HTML，XML）
  
  
  • 表现标准语言（CSS）
  
  
  • 行为标准（DOM，ECMAScript）
  
  
  
  


• 常见IDE
  
  
  
  • 记事本
  
  
  • DreamWeaver
  
  
  • IDEA
  
  
  • WebStorm
  
  
  • ……
  
  
  
  

1.4 HTML基本结构

2. 网页基本标签

注意结尾的闭合标签带上/

2.1 网页基本信息

• DOCTYPE声明：告诉浏览器，使用什么规范


• html：内容要包含在html大标签中


• meta标签：描述网站信息，一般用来做SEO(搜索引擎优化)


• title： 网站标题














Hello, world!




2.2 网页基本标签

• 标题标签


• 段落标签（p，然后点击tab键自动生成）


• 换行标签（间距比段落标签小)


• 水平线标签（hr，然后点击tab键自动生成）


• 字体样式标签


• 注释和特殊符号标签








一级标签


二级标签

3. 图像标签

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

标签内容

• src: 图片地址 (必填)
  
  
  
  • 相对地址,绝对地址
  
  
  • ../ --上一级目录
  
  
  
  


• alt: 图像的替代文字(必填)


• tile: 图像的悬停文字


• width: 图像宽


• height: 图像高

4. 链接标签

超链接：a标签

字段/图像


• herf: 必填,标识跳转到哪个页面


• target: 标识窗口在哪打开
  
  
  
  • _blank 在新标签中打开
  
  
  • _self 在当前标签中打开(默认)
  
  
  
  

文本超链接

点击跳转到页面1


点击跳转到百度


图像超链接

锚链接

1. 需要一个锚标记


2. 跳转到标记


3. 标记: #标记

设置标记


顶部


跳转标记

回到顶部


功能性链接

• 邮件链接:mailto:


• qq链接: 搜索QQ推广生成地址

点击联系我


补充：行内元素和块元素

• 块元素
  
  
  
  • 无论内容多少，该元素独占一行
  
  
  • 如p分段，大标题
  
  
  • （p、h1-h6…）
  
  
  
  


• 行内元素
  
  
  
  • 内容撑开元素，左右都是行内元素的可以在排在一行
  
  
  • 如链接，加粗，斜体
  
  
  • （a.strong.em…）
  
  
  
  

5. 列表

• 什么是列表

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

  
  



• 列表的分类

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

有序列表

• 标签：ol


• 应用范围: 试卷,问答...

1. Java


2. Python


3. 运维


4. 前端

无序列表

• 标签：ul


• 应用范围: 导航,侧边栏...

• Java


• Python


• 运维


• 前端

自定义列表

• dl: 标签


• dt: 列表名称


• dd: 列表内容

列表名称

列表内容1

列表内容2

列表内容3

列表内容4

学科

Java

Python

运维

前端

6. 表格

• 为什么使用表格
  
  
  
  • 简单通用
  
  
  • 结构稳定
  
  
  
  


• 基本结构
  
  
  
  • 单元格
  
  
  • 行
  
  
  • 列
  
  
  • 跨行
  
  
  • 跨列
  
  
  
  

表格的使用

• 表格: table


• 行: tr


• 列: td


• 边框宽度: border


• 居中: align="center"

7. 视频和音频

• 视频元素 video


• 音频元素 audio


• 其他属性:
  
  
  
  • src: 资源路径
  
  
  • controls: 控制组件
  
  
  • autoplay: 自动播放
  
  
  
  

8. 页面结构分析

网页头部

9. 内联框架

• iframe内联框架


• src ：地址


• width : 宽度


• height: 高度

网站嵌入

注册




账号：