大前端html基础学习01

根目录

相对路径：针对图片数量比较多的情况，新建一个文件夹，将所有图片放进去，imgs/cat.webp

（1）/：下一级

（2）a/b/c/cat.webp

返回路径（向外找）：从下一级html中找上级或上上级的图片，走出去，img scr=”../”

(3)   ../:返回上一级（可以多次书写）

（4）../../  返回上一级的上一级

绝对路径：不建议使用。

认真听，大量练

一、 注释

1、<!—h1一个页面只能用一次-->

2、作用：写给自己或者其他开发者看的

3、html的注释语法<！--注释内容-->  快捷键：ctrl+/

4、css的语法注释/*css注释内容*/  快捷键：ctrl+/光标在这一行即可

二、 表单

1、 收集用户的数据

2、 组成

（1）      表单域-form

（2）      表单控件：text文本输入框，password密码框，value=“username”默认值

（3）      提示信息：submit提交，reset重置

（4）      注意：input在一行显示，提交后出问号，点重置后没有变化

 

三、 CSS（cascading style sheets）层叠样式表，web中的标准语言，修饰网页信息的显示样式。

1、 语法：选择符（属性：值；属性：值；）

2、 选择器+空格+大括号+属性+冒号+值+分号+回车

3、

4、 选择符表示要定义样式的对象

5、 声明：属性+属性值

6、 属性必须放入花括号，且必须分号结尾。

7、 Font-size： 30px   （意思是字体大小：30像素）

8、 浏览器 的默认字体大小是16px  font-size： 16px

四、 css选择器

1、 标签（元素）

2、 Id选择器

（1）       id=#暂时不推荐使用

（2）      注意：Id名不能重复，（具有唯一性），一个只能用一次

3、 Class选择器:开发中使用频率比较高的（推荐使用）

（1）      class =.

（2）     

五css的创建方式

1、 内部样式表-直接在html文件中通过style标签书写的css

2、 行内样式-直接写在标签身上的样式

3、 外部样式（外链）

4、  

五、群组选择器1，2，3 {

六、通配符选择器：*+空格+花括号+回车+属性---匹配所有标签

* {

Margin:0;

Padding:0;

}(取消标签的间隙)

七、包含（后代）选择器怕p strong {

}

八、伪类选择器：..属于a标签的四种语法

1、link:a:link {

Color: red；

}指超链接的初始状态

2、visited:a:visited {

color:red；

}指超链接跳转后的状态

4、 hover：a:hover {

color: red;

}之鼠标悬停的状态

5、 active: a:active {

6、 color:red;

}之鼠标按下去激活后的状态

注意事项：如果这四个要写，必须按照顺序去写，hover 伪类，任何元素都可以添加这个伪类

两个新的标签：1、div  一般称为容器或盒子，一般用来进行页面布局，可以写任何元素包括div进行嵌套，独占一行

3、 span 一般针对局部文字进行特殊处理，在一行显示。

类名的要求（id名一样）：1、类名不能使用纯数字，且不要用数字开头，不要使用一些特殊符号，建议有意义（changered），也不要使用中文，最好使用英文，实在不行拼音。