HTML基础概述

一.HTML基础概述

1. 成品：网页
2. 工具：hbuilder 文本编辑器
3. 语言：HTML 超文本标记语言
4. Web基本概念
   • 网页网站
   • http DNS web url www w3组织
5. HTML语言
   • 超文本标记语言，标记特点 “<标签>”
   • 分为单标记和双标记，双标记分为开始标记和介绍标记
   • 标记有属性，属性写在开始标记后面，标记和属性之间，属性和属性之间用空格隔开
   • 每个标记都有属性吗？不是
6. HTML文档结构
   四对标记

内容 4. 文本类标记 段落标记:

段落的内容

线：

---

标题标记： n从 1到6 换行标记： 格式化标记： 加粗： 倾斜： 下划线： 删除线： 上标： 下标： div 盒子 span 行内元素 文字 5. 特殊字符标记 空格： " " "<" "<" ">" ">" 注册： "®" 版权："©" 6. 图片标记 7.线

---

二.CSS基础 语法结构 选择器{属性名:属性值;属性名：属性值;......} 选择器分类 • 通配符选择器（*} • 标签选择器 标签名{属性名：属性值；...} • 类选择器 <标签名 class="类名" >

和无序列表类似，ol,li默认都有内外边距，都有 type属性。有序列表ol还有start属性,用来指定序号的起始值
3.自定义列表（描述列表)
标签

描述项

列表项

列表项 ...

2. 列表相关的css属性：
   list-style-type：square /disc/circle 项目符号的样式
   list-style-image:url(img/xxx.jpg ) 项目符号设为图片
   list-style-position：outside/inside 项目符号在li 内还是外
   上述三个属性可以使用复合属性list-style
   list-style: url(…) outside;
   3.设置列表项目符号的方法
3. 使用自带的type属性或 css属性list-stye设置
4. 可以使用背景图（精灵图）
5. 可以自定义span，设置背景色（相对定位）
   六.定位
   1.分类
   position 属性指定了元素的定位类型。
   position 属性的五个值：
   • static
   • relative
   • fixed
   • absolute
   • sticky
   static 定位（静态定位）
   postition：static
   HTML 元素的默认值，即没有定位，遵循正常的文档流对象。
   静态定位的元素不会受到 top, bottom, left, right影响。
   fixed 定位（固定定位）
   postition：fixed
   元素的位置相对于浏览器窗口是固定位置。
   即使窗口是滚动的它也不会移动：
   Fixed定位使元素的位置与文档流无关，因此不占据空间。
   Fixed定位的元素和其他元素重叠。
   relative 定位（相对定位）
   postition：relative
   相对定位元素的定位是相对其正常位置。即相对于自己没定位时的位置，适用于位置微调。
   常和：top / left一起使用
   注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
   absolute 定位（绝对定位）
   绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:
   absolute 定位使元素的位置与文档流无关，因此不占据空间。
   absolute 定位的元素和其他元素重叠。
   sticky 定位（粘性定位）
   position: sticky; 基于用户的滚动位置来定位。
   粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
   它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
   元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
   重叠的元素（z-index）
   元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素
   z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）
   z-index属性必须和定位一起使用才有效果。
   如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。