- 一 、HTML
- HTML:超文本标记（标签）语言。
- 超文本：文字、图片、动画、音频和视频、超链接和程序等。
- 1.html 结构
- 有三个部分人构成：
- html、head、body
- 2.html标签
- 结构：html、head、body、title、meta
- 文章：h1~h6、p、br、em、strong
- 超链接：a
- 图片：img
- 布局：div、span
- 列表：ul、ol、li、dl、dt、dd
- 表格：table、tr、td、th
- 表单：form、input、select、option、textarea
- 二、HTML 基本标签及作用
- 1、标题标签
- h1-h6， 格式
- 内容
- 通常对于一篇新闻文章会使用h1标签。
- 还有大型网站的首页logo会使用h1标签。
- 2.段落标签
- 作用：用来分隔内容，使内容调理清晰。
- 格式：
- 内容
- 还有一个和p有关的标签是br，表示换行，是一个单标签。
- 3.超链接标签及其属性
- 作用：用于链接其他资源，从而形成万维网。
- 格式：<a href=“target=” name="“title=”>内容
- 还有一个锚点链接。
- 4.图像标签及其属性
- 作用：用于显示图片
- 格式：<img src=“width=” height="alt=“title=”>
- 注意，img标签是人妖标签，可以设置宽高。
- 5.div和span
- 作用：用来组织划分结构
- 格式：
- 内容
- 内容
- div它是一个占据一整行的分隔块，而span则是占据一行中的一部分的分隔块。
- div的使用,用于分隔整个页面中的模块。
- 三.列表标签
- 1.无序列表
- 格式：
- 内容
- 作用：将一组相关的列表项目排列在一起，列表中的项目没有特别的先后顺序，如购物清单。
- 2.有序列表
- 格式：
- 内容
- 作用：用于将一组相关的列表项目在一起，列表中的项目有特别的先后顺序
- 3.定义列表
- 格式：
- 作用：用于显示名称及其对应的“值”，如术语及其定义，或时间及相对应的事件。
- 四.表格
- 1.表格的基本标签
- table
- tr
- td
- th
- 2.表格的基本属性：
- width：宽度
- height：高度
- align：表格本身的对齐方式
- bgcolor：背景颜色
- border：边框
- cellspacing:单元格之间的距离
- cellpadding:单元格中的内容距离单元格边框的距离
- td/th 的属性
- width
- height
- bgcolor
- align
- rowspan：合并行
- colspan: 合并列
- 五.表单
- 1.常见的表单元素 表单 输入框 和下拉列表 文本域 2.input：输入框 type=“text”单行文本输入框 type=“password”密码输入框 type="checkbox"复选框 type=“radio”单选框 type=“sumbit”将表单里的信息提交给表单属性action所指向的文件 type=“reset”将表单信息清空，重新填写 type=“button”按钮 type=“hidden”隐藏域 六.其他标签 1.em和strong 作用：用来强调某一个内容 格式： 内容
- CSS
- 一.初始CSS
- 1.什么是CSS
- 层叠样式表，简称样式表。
- 作用：实现网页布局，美化网页
- 版本：css2和css3
- 2.引入css的三种方式
- 行内样式、内部样式、外部样式。
- 3.css选择器
- （1）.基本选择器
- a.类型选择器
- 也叫标签选择器，或叫元素选择器。
- b.id选择器
- 要使用id选择器，需要分成两个步骤：
- 第一步，需要在对应的标签中的增加一个id属性
- 第二步，需要在css中，使用#id属性值
- c.class选择器
- class 是班级的意思，在计算机领域中还可以理解为类、类别。
- 叫类选择器，使用也是分为两步：
- 第一步，需要在对应的标签中设置 class 属性，并设置对应值
- 第二步，在 css 的规则中，使用 .+class 属性
- 注意：对于 class 的使用
- 所有的标签都可以添加 class 属性
- 对于不同的标签，他们需要有相同的样式，此时使用 class 比较合适
- 对于相同的标签，但是在页面中，特别的多，我只需要某一部分标签有额外的样式，也应该使用 class。
- （2）.选择器用法
- a.通配选择器
- 使用通配符，*，表示所有的标签（元素）。
- b.分组选择器
- 在书写 css 的时候，有可能对两个不同的标签、class、id，设置相同的 css。
- 在 css 中，使用逗号来实现分组。两个选择器之间使用逗号进行分隔。
- c.后代选择器
- 肯定会涉及到标签的一个嵌套（包含）。
- d.伪类选择器
- 目前我们就掌握一个，最常用的，就是 a 标签的 hover 伪类。
- hover，表示将鼠标放到 a 上面的这个状态。
- a:hover
- 二.CSS排版初步
- 1.字体设置
- font-family
- font-size
- color
- font-style
- font-weight
- 2.文本设置
- (1).text-decoration
- decoration:修饰
- 作用：用来设置文本的修饰线，有如下几种：
- underline
- overline
- line-through
- none
- (2).text-indent
- Indent 是缩进
- 作用：用来缩进文本的。
- (3).text-align
- align：对齐
- 作用：设置文本对齐的水平方式，通常有如下几种对齐方式：
- left，是默认值
- center
- right
- (4).line-height
- 作用：设置行高的。
- 3.关于CSS的继承性
- 继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换
- 句话说，就是特定的 CSS 属性向下传递到子孙元素。
- 四.CSS布局
- 1.盒子模型概念
- 从日常生活中出发，
- 在我们的 HTML 中，所有的标签都是矩形的。围绕着整个矩形，我们可以使用一系列的属性
- 来控制它的显示外观。
- 有如下一些属性：
- width: 宽度
- height：高度
- border：边框
- padding：内边距 补白
- margin：外边距 边界
- background：背景
- 2.什么是盒子模型？
- CSS 定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、背景（包括背景颜色和背景图片），这就是盒模型。
- （2）.盒模型中的属性的基本用法
- a.width 和 height
- 它们表示元素的宽度和高度。不是指整个盒子所占据的空间。
- 在设置的时候，通常使用 px 来进行，如果要实现响应式，则可以使用百分比。
- b.border 设置
- border 有三部分构成
- 边框的粗细
- 边框的样式
- 边框的颜色
- border-top
- border-right
- border-bottom
- border-lef
- c.padding
- 表示的内边距，或者补白。
- 所处的区域是指 border 和内容之间的那个空间。
- 五.层布局模型
- 1.定位类型
- 在 css 中，有三种布局模型：
- 流动布局，默认的
- 浮动布局，使用 float 来实现
- 层布局，使用 position 来实现的
- 在 css 中，有如下三种定位方式：
- 相对定位
- 绝对定位
- 固定定位
- 它们是通过 position 属性来实现的
- 有如下几个值：
- relative，相对定位
- absolute，绝对定位
- fixed，固定定位
- static，不定位，默认的流动布局，一般不会写
