HTML总结
1.HTML语法规范
-
- HTML 标签是由尖括号包围的关键词,例如 。
- HTML 标签通常是成对出现的,例如 和 ,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
- 有些特殊的标签必须是单个标签(极少情况),例如
,我们称为单标签。
- 双标签关系可以分为两类:包含关系和并列关系。
2.HTML基本结构标签
- 每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写HTML页面也称为 HTML 文档
- HTML 文档的的后缀名必须是 .html 或 .htm ,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。此时,用浏览器打开这个网页
3.HTML常用标签
-
h1:一级标题
h2:二级标题(以此类推) -
p;段落
br:换行 -
在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要. -
div:用来布局,区块,大盒子
span:用来布局,小盒子 -
在 HTML 标签中,img 标签用于定义 HTML 页面中的图像。
图像标签属性注意点:- 图像标签可以拥有多个属性,必须写在标签名的后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式,即 key=“value" 的格式,属性 =“属性值”。
页面中的图片会非常多, 通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。路径可以分为:相对路径和绝对路径
-
在 HTML 标签中, 标签用于定义超链接,作用是从一个页面链接到另一个页面。
如“ 文本或图像 ” -
链接分类:
- 外部链接: 例如 < a href="http:// www.baidu.com "> 百度。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href=“index.html”> 首页 。
- 空链接: 如果当时没有确定链接目标时,< a href=“#”> 首页 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
- 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中,设置属性值为 #名字 的形式 - 找到目标位置标签,里面添加一个 id 属性 = 刚才的名字
4.HTML中的注释和特殊字符
- 如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签
- 在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,需使用特殊字符替代。重点记住:空格 、大于号、 小于号 这三个
- 空格(space)  
- < <
-
>
5.表格
-
表格主要作用
用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。表格不是用来布局页面的,而是用来展示数据的. -
表格的基本语法
- table是用于定义表格的标签。
- tr标签用于定义表格中的行,必须嵌套在 table标签中。
- td 用于定义表格中的单元格,必须嵌套在tr标签中。
- 字母 td 指表格数据(table data),即数据单元格的内容。
-
表头单元格标签
一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示.th 标签表示 HTML 表格的表头部分(table head 的缩写)。表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示 -
表格属性
表格标签这部分属性实际开发我们不常用,通过 CSS 来设置
目的有2个:- 记住这些英语单词,后面 CSS 会使用.
- 直观感受表格的外观形态.
-
表格结构标签
使用场景:因为表格可能很长,为了更好的表示表格的语义,可以将表格分割成 表格头部和表格主体两大部分.在表格标签中,分别用:thead标签 表格的头部区域、tbody标签 表格的主体区域. 这样可以更好的分清表格结构。- thead:用于定义表格的头部。 内部必须拥有 tr 标签。 一般是位于第一行。
- tbody:用于定义表格的主体,主要用于放数据本体 。
- 以上标签都是放在 table标签中。
-
合并单元格
特殊情况下,可以把多个单元格合并为一个单元格
合并单元格方式:- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan="合并单元格的个数
跨行:最上侧单元格为目标单元格, 写合并代码
跨列:最左侧单元格为目标单元格, 写合并代码
合并单元格三步曲: - 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:。
- 删除多余的单元格。
6.列表
-
无序列表
ul 标签表示 HTML 页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用 li 标签定义。无序列表的基本语法格式如下<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul>
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
- ul中只能嵌套 li,直接在 ul标签中输入其他标签或者文字的做法是不被允许的。
- li 之间相当于一个容器,可以容纳所有元素。
- 无序列表会带有自己的样式属性,但在实际使用时,会使用 CSS 来设置。
-
有序列表
有序列表即为有排列顺序的列表,其各个列表项会按照一定的顺序排列定义。在 HTML 标签中,ol 标签用于定义有序列表,列表排序以数字来显示,并且使用 li 标签来定义列表项。有序列表的基本语法格式如下:<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol>
- ol中只能嵌套li,直接在ol标签中输入其他标签或者文字的做法是不被允许的。
- li 与 li之间相当于一个容器,可以容纳所有元素。
- 有序列表会带有自己样式属性,但在实际使用时,会使用 CSS 来设置
-
自定义列表
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
在 HTML 标签中,-
标签用于定义描述列表(或定义列表),该标签会与
(定义项目/名字)和
-
(描述每一个项目/名字)一起使用。其基本语法如下:
- 名词1解释1
- 名词1解释2
名词1
1. <dl></dl> 里面只能包含 <dt> 和 <dd>。 2. <dt> 和 <dd>个数没有限制,经常是一个<dt> 对应多个<dd>。
-
(描述每一个项目/名字)一起使用。其基本语法如下:
7.表单
-
在 HTML 中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和 提示信息3个部分构成。
-
表单域是一个包含表单元素的区域。在 HTML 标签中, form标签用于定义表单域,以实现用户信息的收集和传递。<orm 会把它范围内的表单元素信息提交给服务器
-
在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入或者选择的内容控件。
- input输入表单元素
- select下拉表单元素
- textarea 文本域元素
-
在英文单词中,input 是输入的意思,而在表单元素中 input 标签用于收集用户信息。 在 input>标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等)。
1. 标签为单标签
2. type 属性设置不同的属性值用来指定不同的控件类型
-
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用
-
- 表单元素我们学习了三大组 input 输入表单元素 select 下拉表单元素 textarea 文本域表单元素.
- 这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
- 有三个名字非常相似的标签:
(1) 表单域 form 使用场景: 提交区域内表单元素给后台服务器
(2) 文件域 file 是input type 属性值 使用场景: 上传文件
(3) 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…
css总结
css引入方式
-
-
行内样式
在开始标签上加style=”样式属性名1:样式属性值1;样式属性名2:样式属性值2;…” 属性 -
内嵌式
把所有的css样式都写在放在head标签内 -
外链式
把所有的css样式均放在一个css单独的文件里(后缀名xx.css),在html里通过来引入外部的css
-
优先级:
行内最大,其次 谁离标签近,谁的优先级高(最晚优先级最高)
选择器
-
通配符选择器 选择所有的元素 0.5
*{} -
标签选择器 1
标签名{} 例如:p{} -
类选择器 10
.类值{} 例如:.content{}
拓展: 选择器.类值{} div.box{} 类叫box的div元素
-
id选择器 100
#id值{} 例如:#con{} -
包含选择器(后代选择器) 权重相加
选择器a 选择器b{} 选择器a里的所有选择器b 选择器b只要被选择器a包着
.box div{} 类box里的所有div元素
扩展:选择器直接子元素
选择器a>选择器b{} 选择器a里的所有直接选择器b 父子关系
.box>span{} 类box里的所有直接子元素span
- 分组选择器
选择器1,选择器2,…{}
选择器权重:
行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
字体样式
- font-family 字体系列
例如:font-famiy:”宋体”,”微软雅黑”,…
font-size 字体大小
font-style 字体风格
值:1)normal 默认 不倾斜
2)italic 斜体
3)oblique 倾斜
font-weight 字体粗细
值:1)bold 粗体
2)bolder 更粗体
3)lighter 细体
4)100-900 数值越大,字体越粗
line-height 行高
值:1)数值+单位
数值 字体的倍数
缩写:
font : font-style值 font-weight值 font-size值/line-height值 font-family值
文本样式
- text-decoration 文本修饰
值:
1)none 无修饰
2)underline 下划线
3)line-through 中划线
4)overline 上划线
- text-align 文本对齐方式
值:1)left 默认 左对齐
1)center 居中对齐
2)right 右对齐
3)justify 两端对齐
4)text-indent 文本缩进
值:数值+单位(px或em) 为正数时,缩进;为负数时,悬挂
5)text-transform 文本大小写转换
值:1)uppercase 全大写
6)lowercase 全小写
7)capitalize 首字母大写
8)text-overflow 文本溢出处理
值:1)ellipsis 文本溢出以省略号显示
…
文本溢出以省略号显示
9)overflow:hidden;
10)text-overflow:ellipsis;
11)white-space:nowrap; 强制不换行
12)letter-spacing 字母与字母之间的距离 汉字与汉字之间的距离
13)word-spacing 单词与单词之间的距离
14)overflow 内容溢出处理 overflow-x overflow-y
值:1)visible 默认 溢出部分可见
15)hidden 溢出部分隐藏
16)scroll 溢出部分以滚动条形式显示
17)auto 溢出部分浏览器自动处理
盒子模型
border 边框
border-width 边框的宽度
border-color 边框的颜色
border-style 边框的样式
值:1)solid 实线
2)double 双实线
3)dotted 点状线
4)dashed 虚线
padding 内边距 内补丁 内填充
padding-top 上内边距
padding-bottom 下内边距
padding-left 左内边距
padding-right 右内边距
*
margin 外边距
margin-top 上外边距
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距
浮动
- float 浮动
值:
- none 默认 不浮动
- left 左浮动
- right 右浮动
清除浮动:
1) 给有浮动的子元素的父元素加height
2) 给有浮动的子元素的父元素加overflow:hidden
3)给所有有浮动的元素最后增加一个空元素,给该空元素加样式clear:left / right / both
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
clear:none 不清除浮动
- 给有浮动的子元素的父元素增加伪元素,在伪元素里增加样式
::after{
display:block;
content:””;
clear:both;
}
定位
- position 定位
值:
- static 默认 不定位
- relative 相对定位 相对于自己原来正常文档流的位置定位
- absolute 绝对定位
有绝对定位元素的包含框无定位,该元素相对于浏览器定位
有绝对定位元素的包含框有定位,该元素相对于离自己最近的有定位的包含框定位
4. fixed 固定定位 始终相对于浏览器定位
借助left、right、top、bottom这四个值改变元素位置
z-index 值:数字 z轴的排列顺序 z-index值越大越在最上层
其他:
伪类
-
:link 未访问的状态
-
:visited 访问后的状态
-
:hover 鼠标悬停时的状态
-
:active 鼠标激活时的状态