本文详细介绍了HTML5和CSS3的基础知识，包括HTML5的网页组成、标签、属性，以及CSS3的样式规则、选择器、布局方式等。强调了HTML5的结构与CSS3的样式分离，探讨了浮动、定位、盒模型等内容，以及一些高级技巧，如布局、定位模式、过渡和动画效果。此外，还提及了浏览器兼容性和SEO优化的重要性。
html回忆录
1、网页的组成：图片、文字、超链接、视频、音频等
2、网页中web标准三层组成:结构(html)、表现(css)、行为(JS).
3、Chrome浏览器的内核：Blink；苹果内核：webkit;
4、HTML是超文本标记语言，是描述网页的一种语言，是一种标记，不是一种语言，是一套标记标签。
5、超文本指的是超越文本的限制，超级文本链接
6、内核渲染HTML和CSS
7、<html>
8、 <head>文档头部
9、 <title>网站标题</title>
10、 </head>
11、 <body>
12、 网页的主体
13、 </body>
14、</html>
15、单标签：a img h1~h6 hr br input
16、双标签：span ul li ol strong em div table form …
17、Img图像标签 alt 图片不能正常显示时的替换文本 title 鼠标悬停时的提示文本。
18、相对路径：相对路径是相当于当前的HTML文档的位置而言的 先找到HTML文档所在的位置 根据HTML文档位置判断是上级还是下级路径
19、下一级路径 / / / 上一级路径： …/ …/
20、绝对路径：绝对网络地址可以使用\ \ \ 反方向的斜杠
21、锚点定位 当前页跳转 创建锚点链接分为两步：
1）使用相应的id名标注跳转目标的位置。<h3 id="two">第二季</ h3>
2）使用<a href="#id名">链接文本<a> 创建链接文本即被点击的 <a href="#two">
22、 base标签
-
base可以设置整体链接的状态 -
base写到<head></head>之间 -
把所有的连接都默认添加target=”_blank”
23、pre预格式化文本
24、 < > 空格
25、表格:展示数据用的 table > t r > td; th表头 caption 表格标题 th tbody tfooter
26、table 属性borde 默认是无边框 cellspacing 设置单元格与单元格之间的空白间距 cellpadding 设置单元内容与单元格边框之间的空白间距。width height 设置表格的高度和宽度 align 表格在网页中的水平方式。通常border width height 都为0;
27、合并单元格：跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
28、顺序 先上 后下 先左 后右
29、合并单元格三部曲
-
先确定是跨行还是跨列 -
根据先上 后下 先左 后右的原则找到目标单元格 然后写上合并方式，还有合并的数量 -
删除多余的单元格 即是单元格合并后多余的部分；
30、a标签不能继承属性color a标签里面不能嵌套a标签 p标签不能包含div
30、列表是用来布局的 容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表
31、无序列表 各个列表项之间没有顺序级别之分，是并列的 ul > li
32、ul中只能嵌套li 直接在ul标签中输入其他标签或者文字的做法是不被允许的
33、li 相当于一个容器，可容纳所有的元素
34、无序列表会带有自己样式属性，放下那个样式，让css取消掉。
* {
margin 0;
Padding:0;
}
35、ol li 有序列表
36、自定义列表 dl>dt+dd; dd是对dt的解释说明 最常用的就是网页最底部的布局
37、<dl>
38、 <dt>名词1</dt>
39、 <dd>名词1解释1</dd>
40、 <dd>名词1解释2</dd>
41、 <dt>名词2</dt>
42、 <dd>名词2解释1</dd>
43、 <dd>名词2解释2</dd>
44、</dl>
45、表单 是为了收集用户信息 input
46、表单域form submit 和 reset要配合表单域
47、在HTML中一个完整的表单通常由表单控件、提示信息和表单域3个部分构成
Input属性：text 单行文本框； password 密码输入框；radio 单选按钮 checkbox 复选框；button 普通按钮 submit 提交按钮 reset 重置 file文件域
Image 图像形式的提交按钮 必须要有src属性， file 文件域 上传文件用的（上传头像）
48、checked=checked 定义选择控件的默认选中项
49、label 标签为 input 元素定义标注（标签）
作用：用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
1、第一种用法就是用label直接包括input表单。
2、第二种用法 for 属性规定 label 与哪个表单元素绑定
<label for="nan">男</label>
<input type="radio" name="sex" id="nan">
40、textarea控件 可以轻松创建多行文本框输入 resize: none;
41、select>option 默认选中selected=selected； select至少包含一行option。
42、form 表单域 实现用户信息的收集和传递，form中所有的内容都会被提交给服务器。
43、
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
属性：action url地址 用于指定并处理表单数据的服务器程序的url地址
method：get/post 用于设置表单数据的提交方式
name：名称 用于指定表单的名称，以区分同一页面中的多个表单；
注意：每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是 如果后面学 ajax 后台交互的时候，必须需要 form表单域。
44、一个标签的多个属性之间用空格隔开
45、拓展：
46、<thead></thead>:用于定义表格的头部 用来放标题之类的东西
47、<thead></thead>:用于定义表格的主题， 放数据主体
48、<tfoot></tfoot>放表格的脚注之类的
49、以上标签都是放到table标签中
CSS展望录
1、CSS层叠样式表： 引入css样式表
2、CSS的最大贡献就是： 让 HTML 从样式中脱离， 实现了 HTML 专注去做 结构呈现，样式交给css 结构**(html)与样式(css)相分离**
3、CSS的主要作用版面的布局和外观显示样式
4、引入CSS样式表：
1、行内式(内联样式表)
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>
任何HTML标签都拥有style属性，用来设置行内式
Style其实就是标签的属性 样式属性和值之间是: 多组属性值之间用;隔开
2、内部样式表(内嵌样式表)
是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>
3、外部样式表(外链表) 将所有的样式表放在一个或者多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
<head>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>
4、link是一个单标签
link标签需要放在head头部标签中，并且指定link标签的三个属性；type="text/css"可以省略。
5、总结CSS样式规则：
1、选择器用于指定CSS样式作用的HTML标签，花括号内是对该对象设置的具体样式。
2、属性和属性值以“键值对”的形式出现。
3、属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4、属性和属性值之间用英文“:”连接。
5、多个“键值对”之间用英文“;”进行区分。
5、CSS选择器：找到特定的HTML页面元素
6、选择器的分类：标签选择器、类选择器、id选择器、伪类选择器 通配符选择器。
7、标签选择器：标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
作用：标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签
优点：是能快速为页面中同类型的标签统一样式
缺点：不能设计差异化样式。
标签选择器， 页面同选起。 直接写标签， 全部不放弃。
8、类选择器
.类名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
9、使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。
* {
margin: 0;
padding: 0;
}
10、多类名选择器：
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下，还是较多使用的
11、font字体
font: font-style font-weight font-size font-family; 按照这个顺序，不可以随意跟换位置，字号和字体必须同时出现，各个属性值之间用空格隔开。
可以给文本分别指定style weight size family(字体，微软雅黑)
其中不需要设置的属性可以省略(默认值)，但必须保留font-size和font-family属性，否则font将不起作用。
font-style：normal 默认值，浏览器会显示标准的字体样式 font-style:normal; italic浏览器会显示斜体字体样式
font-weight：400 等同于 normal，而 700 等同于 bold 默认是normal
谷歌默认浏览器字体大小是16px;
12、CSS的外观属性：
1、color用于定义文本颜色。三种方式：预定义的颜色值(pink) 十六进制 #fff RGB代码
2、text-align：文本水平对齐方式：left center right 行内元素和块盒子里面的行内元素
特别注意不是让盒子居中对齐，是让盒子里的内容居中对齐
3、line-height：行间距 就是行与行之间的间距，字符的垂直间距，通常称为行高。通常情况下比字体大7，8个像素即可。
4、text-indent：设置首行文本缩进 建议使用em作单位 1em就是一个字的宽度 。
5、text-decoration：文本装饰 none underline overline line-through(后面两个基本不用)。
13、CSS符合选择器：后代选择器 子元素选择器 交集选择器 并集选择器 链接伪类选择器 :linked 未访问的链接 :visited 已访问的链接 :hover 鼠标移动到链接上 :active 选定的链接 尽量不要颠倒顺利 否则会引起错误 lvha
14、并
最低0.47元/天 解锁文章
扫一扫
671
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
