html学习的第一天

课件准备

学习准备
1：熟悉自己使用的工具
作用：编写代码 目的：做网站 做页面…
2：熟悉浏览器，每个人电脑上要不同的浏览器
主流浏览器：谷歌 火狐 360 QQ
非主流浏览器：IE8以下浏览器
3：熟悉浏览器的控制台

开发工具

• vscode

• webstrom

• subline

• Hibude…

  浏览器：

文件后缀

xxx.html 是html 文件 作用写网页的。浏览器可以解析xxx.html文件
xxx.css、是css 文件 作用：编写css语言 浏览器可以解析
xxx.js 是js 文件 作用：编写js语言
xxx.xxxx 文件格式

图片路径

以当前目录为基准
./ 查找同级目录
…/查找上一级目录
…/…/查找上两级目录

html元素

html 元素的作用：构建页面。
html标签 大多数是以标签多的形式存在的
html 是超文本链接

根据特点分类

块元素

• 特点：默认宽度为百分之百(子元素相对父元素) 元素高度：由子元素撑起来
• 子元素在父元素中，排列方式从上 往下

html body 所有布局类标签 main div section nav footer header p ul li ol dl dd form…

行元素

• 默认宽度为内容宽度，内容高度(****没有高度和宽度)
• 子元素在父元素中排列方式：从左往右依次排列，直到排满才换行
  audio video span a input bu buttom label select option …

行内块— 后天改变

• 特点：大小为内容大小，可以设置宽度和高度

浏览器默认布局形式----流式布局

• 子元素在父元素中的默认布局形式：从左往右 从上往下

元素与元素关系-----血缘关系

• 父子关系
• 兄弟关系：同一个父元素
• 子孙关系：隔代的标签

大哥和小弟区分：浏览器解析决定，解析顺序从上往下，从辈分高到辈分低

html 属性分类

全局属性：是所有的html都可以使用的属性
私有属性：某个元素或者标签特有的属性

总结：

• 每个属性都有特定的作用，具体作用的程度有这个属性的值来决定
• 属性是不可变得，属性对应的值是可以改变的，属性具有唯一性
• 一个属性可以跟多个值

html 全局属性

全局属性:是所有的html都可以使用的属性

• class 一个或多个类名
• id 规定元素的唯一
• data-* 自定义属性
• accesskey 制定快捷键
• style 规定元素的行内 CSS 样式