HTML基础

五大浏览器

谷歌

火狐

欧朋

ie

• edge新版

safari

web标准

结构

• html

样式

• css

行为

• javascript

图像标签

属性

• src

  • 图片的路径
  • 必写属性

• alt

  • 图片无法加载时显示的替换文本
  • 讲述人，屏幕阅读器可以读出alt中的文字

• title

  • 鼠标悬停显示的文字
  • 这个属性可以给任意标签

• width

  • 宽度

• height

  • 高度

视频和音频

audio

• src

  • 资源路径

• controls

  • 播放控件

• autoplay

  • 自动播放

• loop

  • 循环播放

• muted

  • 静音

  video

• src

  • 资源路径

• controls

  • 播放控件

• autoplay

  • 自动播放

• loop

  • 循环播放

• muted

  • 静音

文本格式化标签

加粗

• b
• strong

下划线

• u
• ins

删除线

• s
• del

倾斜

• i
• em

布局标签

标题标签

• h1--h6

• 特点

  • 加粗
  • 独占一行
  • 字体从大到小
  • h2--h6无限制的
  • 网站的logo一般用h1标签包裹，h1只能用一次

段落标签

• p

• 特点

  • 独占一行
  • 段落和段落之间有一个比较大的间隙

换行标签

• br

水平线标签

• hr

路径

绝对路径

• 本地

  • E:\桌面\文件\前端基础班\第一天资料\02-课堂案例\

• 网络

  • ossweb-img.qq.com/upload/adw/…

相对路径

• 同级

  • ./

• 上一级

  • ../

• 下一级

  • 文件夹/

超链接

a

属性

• href

  • 要跳转的地址

• target

  • _self

    • 自身标签页打开
    • 默认值

  • _blank

    • 新建标签页打开

    xmind的使用

tab

• 生成儿子节点

enter

• 生成兄弟节点

del

• 删除节点

退格

• 删除节点

html的基本骨架

html

• head

  • title

    • 网站的标题
    • 呈现在标签页上的

• body

  • 所有内容都要书写在body标签中

！

• 利用!可以快速生成html基本骨架结构

html语法规则以及结构关系

逻辑结构

• 父子关系

  • 嵌套
  • 包含

• 兄弟关系

  • 并列关系

数量

• 双标签

  • ​​

• 单标签

  • br

标签的属性

• 属于标签的一些特性

• 语法

  • 属性名="属性值"

• 注意

  • 属性要写在开始标签
  • 标签名和属性名之间要有一个空格分隔
  • 一个标签允许有多个属性，中间要用空格分隔，没有顺序限制

XMind: ZEN - Trial Version

列表

无序列表

• ul

• li

• 应用场景

  • 网页当中导航...
  • ul>li>a

• 注意

  • ul里面只能放li标签
  • li标签里面可以放任何标签

有序列表

• ol
• li

自定义列表

• dl

  • dt

    • 自定义列表标题

  • dd

    • 自定义列表项目

• 应用场景

  • 列表有标题的时候，网站中一般在底部会出现

表格

基础表格

• table

  • 声明整个表格

  • 注意点

    • 比较排外：table标签中只能放tr caption thead tbody tfoot 如果要是放了其他标签会踢到外面显示

• tr

  • 表格行

    • 只能放td和th标签

• td

  • 单元格

    • 可以放任意标签

• th

  • 表头单元格
  • 加粗居中显示内容

表格结构标签

• caption

  • 表格的标题

• thead

  • 表格头

• tbody

  • 表格体
  • 如果tr标签没有书写在任意一个表格结构标签中的话，会默认生成一个tbody进行包裹

• tfoot

  • 表格尾

table标签的属性

• border

  • 给表格添加边框

• width

  • 宽度

• height

  • 高度

合并单元格

• 确定目标单元格 左上原则

• 确定跨行合并还是跨列合并

  • 跨行合并 rowspan
  • 跨列合并 colspan

• 确定合并数量

• 删除多余单元格

表单

目的

• 用于收集用户信息

表单域标签

• form
• 在页面中划分一个专门存放表单的区域

input

• type

  • text

    • 默认值

    • 文本输入框

    • 默认值

      • value属性

  • password

    • 密码框

    • 默认值

      • value属性

  • radio

    • 单选按钮
    • 多选一的效果需要设置一个相同的name

  • checkbox

    • 复选框

  • file

    • 文件上传
    • 多文件上传 multiple

  • submit

    • 提交表单

  • reset

    • 重置表单

  • button

    • 普通按钮

button

• 按钮

  • 默认提交的功能

• 重置按钮

• 无功能普通按钮

  • 配合js实现一些业务功能比如发送验证码....

select

• 下拉选项框

• option

  • 默认选中 selected

textarea

label

• 增大表单相应区域
• 敲代码
• 敲代码

结构布局标签

没有语义

• div

  • 独占一行

• span

  • 一行显示多个

有语义但是有兼容性问题的

• header
• footer
• nav
• article
• section
• aside

实体字符

 

• 空格

 

• 一个中文字符大小的空格

<

• <

>

忘记了就百度

XMind: ZEN - Trial Version