前端简记

最新推荐文章于 2023-03-17 14:51:10 发布

忙碌者61

最新推荐文章于 2023-03-17 14:51:10 发布

阅读量109

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_43154554/article/details/99238954

版权

web前端专栏收录该内容

0 篇文章 0 订阅

订阅专栏

建站学习笔记

1.html(网页结构)

只关心语义，对于修饰一般还是用css

1.1.字体

<h[1-6]></h[1-6]>

h1一般只用一个，一般只用h1,2,3

1.2.标准格式

<!DOCTYPE HTML>
<html>
	<head>
    	<title>练习</title>
	</head>
    
	<body>
        
        <h1>你好</h1>
    </body>

</html>

1.3.注释

<!--
注释在此
-->

1.4.字体颜色及大小

<font color="red" size="1">红色字体</font>
<!--
不赞成使用，一般用css实现
size值最大为7
>

1.5.设置网页解码格式（默认GB2312）

<meta charset="utf-8" />

此外，meta可用来描述网页关键词和描述以及请求的重定向

1.6.段落及换行和页面水平线

<p>我是第一段</p>
<p>我是第二段</p>


<br />
<hr />

1.7.实体（转义）

< &lt     
> &gt
空格 &nbsp
版权符 &copy

1.8.图片标签

<img src="road" alt="这个一个图片描述" width="300px" height="100px"/>

1.9.HTML规范

1.一般不区分大小写，一般用小写

2.注释不能嵌套

3.标签结构完整

4.标签可嵌套，但不能交叉嵌套

5.标签属性必须有值，且值必须加引号

1.10.内联框架

在一个页面引入另一个页面

<iframe src="road"></iframe>

1.11.超链接

<a href="https://www.baidu.com">这是一个超连接</a>
<a href="mailto:zyw@zyw">自动打开默认邮件</a>

1.12.居中

<center></center>
<!--
不推荐使用
-->

1.13.块元素

<!--独占一行-->
<div>表示一块区域，作为布局</div>
<p></p>
<!--p里面可以不能放置其他块元素-->

1.14.内联元素

<span>专门用来设置样式</span>

1.15.文本标签

<em>默认斜体</em>
<strong>默认粗体 </strong>
<i>斜体</i>
<b>粗体</b>
<small>我有点小</small>

1.16.列表

<!--无序列表-->
<ul>
    <li>第一个</li>
</ul>

<!--有序列表-->
<ol>
    <li>第一个</li>
</ol>

<!--定义列表-->
<dl>
    <dt>被定义的内容</dt>
    <dd>对定义内容的描述</dd>
</dl>

1.17.

2.CSS

描述网页表现

1.可以写在style属性中（内联样式）

2.可以编写到head内的style标签中

3.单独的css文件

2.1.颜色大小

<!--
1.
-->
<p style="color:red;font-size:20px;">红色字</p>


<!--
2.
-->
<head>
    <style type="text/css">
        <!--对p标签使用-->
        p{color:red;
        	font-size:30px}
    </style>
<head>
    
    
<!--
3.link标签引入外部1.css

1.css:
p{color:red}
-->
<link rel="stylesheet" type="text/css" href="1.css" />

2.2.基本语法

2.2.1.注释

/*我是注释*/

2.2.2.选择器

标签名(一次全选)

p{}

#id（只选择一个）

#id{}

.class(重复使用，选择多个)

.class{}

通配选择器

*{}

多个同时使用(选择任意一个，并集)

#id,p,.class{}

交集选择器(span与p直接连写)

spanp

后代元素选择器

div span{}

子元素选择器

div>span{}

伪类选择器
link{} (没访问过链接)

:visited{} (访问过的链接)

:hover{} (鼠标滑过的链接)

:active{} (正在访问的链接)

属性选择器

p[title=“hello”]{}

兄弟选择器

span+p{} (选择后面紧接着的)

span~p{} (选择后面所有的)

选择器优先级：

1.内联样式>id>类和伪类>元素 >通配优先级

2.当选择器中包含多种选择器时，需要将各个选择器优先级相加，其中并集单独计算

3.优先级一样选择后用的

4.在样式最后加一个**!important**，优先级会加到最高