当前位置：首页 > news >正文

资源专业网站优化排名/百度知识营销

news 2025/7/1 14:54:42

资源专业网站优化排名,百度知识营销,研究院网站系统建设方案,宝鸡做网站线上支付功能前端的东西学了有一阵子了，感觉都是比较零碎的东西，属于一学就会，一放下就忘的类型。所以就回看了视频做了笔记，对零碎的点做了梳理，方便日后自己需要的时候回看。 1. HTML - head 标签大多成对出现（主动标…

前端的东西学了有一阵子了，感觉都是比较零碎的东西，属于一学就会，一放下就忘的类型。所以就回看了视频做了笔记，对零碎的点做了梳理，方便日后自己需要的时候回看。

1. HTML - head

标签大多成对出现（主动标签），<html></html> 标签只允许出现一对。不成对出现的标签成为自闭合标签，如 <input> <img>
标签中可以定义属性
<head></head> 标签中 80% 的信息不能被看到。（title 看得到）
<style></style> 标签用来写 css 样式。
<script></script> 能在 head 中写 javascript 代码。
<link> 引入 css 的标签

2. HTML - body

<p></p> ➡️ 段落
<h1></h1> ➡️ 标题，1代表一级标题，数字支持 1-6
<span></span> 行内标签，span 是白板标签，能被 css 随意修饰。与行内标签对应的是块级标签
<br> ➡️ 换行
<div></div> 块级标签 <input> 自闭合标签
- 常用属性：<input value="默认值" placeholder="提示文案" type="text">
- 另外，type 分为：checkbox (checked="checked"), text, password, button, radio (单选框)
- radio 的使用：两个 input 的 name 相同时，radio 选择互斥
- 重要的属性：name="username", name 用来与后段交互，对应后端的 key（username 只是举例）
- 通过 value 属性拿到输入值
- button 和 submit，button 无任何效果，submit 与 form 表单联用

<label> 与 <input> 关联使用（通过 id）

1 <label for="user"></label> 
2 <input id="user">

<form>

1 <form action="https://www.baidu.com" method="get">
2     <input name="username">
3     <input name="password">
4 </form>

- 以上操作会把 username 和 password 当作参数放在 URL
&lt ➡️ 左尖括号
&gt ➡️ 右尖括号
&nbsp ➡️ 空格

<textarea></textarea> ➡️ 多行文本

<textarea> 多行文本默认信息 </textarea>

<select></select> ➡️ 下拉框，搭配以下内容一起用：

1 <select name="city">
2     <option value="1">济南</option>
3     <option value="2">青岛</option>
4 </select>

1 <select name="city">
2     <optgroup label="山东省"> 
3         <option>济南</option> 
4         <option>青岛</option> 
5     </optgroup>
6 </select>

<a></a> ➡️ 超链接标签

<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="#demo">铆点，跳转到 id=“demo” 的标签处 </a>

<img> ➡️ 图片

<img src="图片出处" title="鼠标悬浮文字" alt="加载失败时显示的文字">

<table> ➡️ 表格

 1 <table>
 2     <thead> /*表头*/
 3         <th>id</th>
 4         <th>请求方式</th>
 5     </thead>
 6     <tbody> /*表体*/
 7         <tr> /*行*/
 8             <td> 1 </td>
 9             <td> get </td>
10         </tr>
11     </tbody>
12 </table>

需合并单元格的时候，横向合并只需在相应标签中添加 colspan="2" 的属性，2 为单元格的个数；

竖向合并时，rowspan=“2”，相应被合并的单元格就不必添加对应内容了

ul li

 1 <ul>  //无序列表
 2     <li> 狮子座♌️ </li>
 3     <li> 白羊座♈️ </li>
 4 </ul>
 5 
 6 <ol>  //有序列表
 7     <li> 狮子座♌️ </li>
 8     <li> 白羊座♈️ </li>
 9 </ol>
10 
11 <dl>  //缩进格式
12     <dt> 狮子座♌️ </dt>
13     <dd> 白羊座♈️ </dd>
14 </dl>

3. CSS

css 选择器

<body><div id="id1"></div><div class="class1"></div><div><span></span></div><div id="id2"><span>今天</span></div><div id="id3" class="..." april="april"></div>
</body>

id 选择器
- ```
#id1{width: 100px;background: blue;
}
```
class 选择器
- ```
.class1{width: 100%;height: 100px;
}
```
标签选择器
- ```
div{width: 100%;height: 100px;
}
```

- 层级选择器（还可以使用 id 层级选择器、class 层级选择器，将 div 改为"#id1" 或 ".class1"）
  - ```
  div span{width: 100%;height: 100px;
  }
```
- 属性选择器
  - ```
  div[april="april"]{width: 100%;height: 100px;
  }
```
- css 的样式，可以写在三个地方：div 的 style 属性中、<style></style> 标签中、文件引用。顺序为：离哪个近优先用哪个。

字体：

.c1{font-size: larger;font-weight: bolder;
}

边框：
- border: 1px red solid;
居中：
- text-align: center; //水平居中
- line-height: 100px; //这里的100px为边框的高度
float
- float：left/right（可以实现块级标签在一行内展示）

块级标签和行内标签的转换、display 属性

display: inline; //块转行
display: block; //行转块display: inline-bllock; //既是行内也是块，因为行内标签不支持使用宽高属性
display: none; //隐藏属性

外边距、内边距

margin-top: 10px;    //外边框的意思显而易见，不多做解释。margin: 10px 表示四周的边距，支持各个方向的边距padding-top: 10px;    //内边距是指，以边框为准，向自身内侧扩充

分层（position）

position: fixed; 关于绝对定位的思考：div 是块级标签，如果不加 position 属性，两个 div 不会重叠，加了绝对定位，就会重合，为了防止遮挡内容，给下面的 div 增加外边框
- ```
<style>.c1{height: 48px;width: 100%;color: blue;}.temp{color: red;margin-top: 48px;}.c2{position: fixed;top: 0;right: 0;left: 0;}
</style><body><div class="c1 c2"></div><div class="temp"></div>
</body>
```

相对定位（外层：position: relative; 内层：position: absolute;）

 1 <style>
 2     .c1{  
 3         postion: relative;
 4         border: 1px red solid;
 5         height: 500px;
 6         width: 500px;
 7     }
 8     .c2{
 9         height: 80px;
10         width: 80px;
11         color: blue;
12         position: absolute;
13     }
14 </style>
15 <body>
16     <div class="c1"> //外边框，以下四个方块
17         <div class="c2"></div> //默认在左上
18         <div class="c2" style="right:0;top:0; color:green"></div>
19         <div class="c2" style="right:0;bottom:0; color:red"></div>
20         <div class="c2" style="left:0;bottom:0; color:yellow"></div>
21     </div>
22 </body>

分层时的展示优先级（z-index，优先展示 z-index 值大的）

鼠标悬浮属性（鼠标悬浮时显示小?）

<input type="button" value="Login" style="cursor:pointer">

图片填充（不做任何处理时，边框和图片默认从左上排列）

<style>.c1{height: 100px;width: 100px;border: 1px red solid;overflow: auto; //自适应，超出边框大小时有 scoll// overfllow: scoll; (不管是否超出边框都展示 scoll）// overflow: hidden; （裁剪）}.c2: hover{background-color:blue;    //鼠标悬浮变色}
</style>
<body><div class="c1"><img src="..."></div>   <div class="c2">    //悬浮变色</div>
</body>

鼠标悬浮变色（如上）

背景图

 1 <style>
 2     .c3{
 3         width: 100px;
 4         height: 100px;
 5         background-img: url("...");
 6         background-repeat: repeat-x; //横向堆叠
 7         // repeat-y (竖向堆叠)
 8         // repeat:none(不堆叠)
 9     }
10 </style>
11 <body>
12     <div class="c3"></div>
13 </body>

background-repeat: repeat; //平铺

背景图的位置展示

 1 <style>
 2     .c1{
 3         width:100px;
 4         height: 100px;
 5         background-img: url("...");
 6         background-position: 0 0;    // 0 0 分别代表 xy 轴
 7     }
 8 </style>
 9 <body>
10     <div class="c1"></div>
11 </body>