前端基础概念（更新）

一.html

  1. ​
    文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
    ​

  2. 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.

  3. 必须写. 采取 UTF-8来保存文字.

  4. 路径分为绝对路径和相对路径

  • 相对路径：当前代码所在文件位置为参考基础，而建立出的目录路径。

  • 绝对路径：是指目录下的绝对路径，直接到达目标路径，通常是从盘符开始。

5.src 是标签的必须属性，它用于指定图像文件的路径和文件名。

a标签 锚点

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

 

特殊字符

空格 &nbsp；< &It;  > &gt ;

表格标签

（1）表格不是用来布局页面的,而是用来展示数据的.

<table>
 <tr>
 <td>单元格内的文字</td>
 ...
 </tr>
 ...
</table>

（2）表格属性

（3)合并单元格

合并单元格方式：

跨行合并：rowspan="合并单元格的个数"

 跨列合并：colspan="合并单元格的个数"

目标单元格：(写合并代码) 

跨行：最上侧单元格为目标单元格, 写合并代码

 跨列：最左侧单元格为目标单元格, 写合并代码

 

合并单元格三步曲

  1. 先确定是跨行还是跨列合并。

  2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：。

  3. 删除多余的单元格。

<tr>
                <td>1</td>
                <td>张三</td>
                <!-- 跨列合并 -->
                <td colspan="3">跑步 喝酒 抽烟</td>
                <!-- <td>电竞</td>
                <td>烘焙</td> -->
            </tr>

自定义列表

在 HTML 标签中，

  • （定义项目/名字）和（描述每一个项目/名字）一起使用。

     <dl>
            <dt>hhh</dt>
            <dt>hhh</dt>
            <dd>你好啊</dd>
            <dd>你好啊</dd>
        </dl>

    image-20220504115916029

    表单标签
    表单域是一个包含表单元素的区域。

    在 HTML 标签中， <form>标签用于定义表单域，以实现用户信息的收集和传递。 <form>会把它范围内的表单元素信息提交给服务器.

    <form action=“url地址” method=“提交方式” name=“表单域名称">
     各种表单元素控件
    </form>

    image-20220504154734924

表单控件（表单元素）

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式

image-20220504160102858

  • checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.

  • name 属性：当前 input 表单的名字，后台可以通过这个 name 属性找到这个表单。页面中的表单很多， name 的主要作用就是用于区别不同的表单

  • radio (或者checkbox）如果是一组，我们必须给他们命名相同的名字

  • checked 属性：表示默认选中状态。用于单选按钮和复选按钮

  • <label>标签用于绑定一个表单元素, 当点击 标签内的文本时，浏览器就会自动将焦点(光标)转到或者 选择对应的表单元素上,用来增加用户体验.

    用户名: <input type="text" value="请输入用户名" name="username" />
    <input type="radio" name="sex" />男
    <input type="radio" name="sex" />女
    性 别:
    <input type="radio" name="sex" value="男" checked="checked" />男
    <input type="radio" name="sex" value="女" />女
    <label for="sex">男</label>
    <input type="radio" name="sex" id="sex" />
    select 表单元素
    <select>
     <option>选项1</option>
     <option>选项2</option>
     <option>选项3</option>
     ...
    </select>
    ​
    1. ​
      ​

    2. 在 <option>中定义 selected =“ selected " 时，当前项即为默认选中项。

    <textarea>表单元素

    <textarea>标签是用于定义多行文本输入的控件。 使用多行文本输入控件，可以输入更多的文字，该控件常见于**留言板，评论。

二 . css

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

image-20220504170853482

选择器分类

选择器分为基础选择器和复合选择器两个大类

  • 基础选择器是由单个选择器组成的

  • 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

id 选择器和类选择器的区别

  1. 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。

  2. id 选择器好比人的身份证号码，全中国是唯一的，不得重复。

  3. id 选择器和类选择器最大的不同在于使用次数上。

  4. 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。

* {
 margin: 0;
 padding: 0;
}

字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。

body { 
 font: font-style font-weight font-size/line-height font-family;
}
​

  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 

  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

装饰文本
div { 
    //添加下滑线
 text-decoration：underline；
}
​
文本缩进
p { 
 text-indent: 2em;
}
​

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元 素的 1 个文字大小。

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p{
   line-height:26px;
}

image-20220504174028524

css引入方式

按照 CSS 样式书写的位置（或者引入的方式），CSS 样式表可以分为三大类：

  1. 行内样式表（行内式）

  2. 内部样式表（嵌入式）

  3. 外部样式表（链接式）

复合选择器

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器
ul li { 样式声明 } /* 选择 ul 里面所有的 li标签元素 */
​

 

子选择器（亲儿子选择器）
div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

  1. 元素1 和 元素2 中间用 大于号 隔开

  2. 元素1 是父级，元素2 是子级，最终选择的是元素2

  3. 元素2 必须是亲儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器

并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明. 使用“，”

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

链接伪类选择器注意事项

  1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

  2. 记忆法：love hate 或者 lv 包包 hao 。

  3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器
/* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }
focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

input:focus { 
 
}

复合选择器总结

image-20220504181754771

元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如自己占一行，比如一行可以放多个。

块元素

常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li></li>等，其中 <div>标签是最典型的块元素。

块级元素的特点：

① 比较霸道，自己独占一行。

② 高度，宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器（父级宽度）的100%。

④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意：

  • 文字类的元素内不能使用块级元素 

  • <p> <h1>标签主要用于存放文字，因此里面不能放块级元素，特别是不能放<div>

    行内元素
    常见的行内元素有 <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中

    <span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

    行内元素的特点：

    ① 相邻行内元素在一行上，一行可以显示多个。

    ② 高、宽直接设置是无效的。

    ③ 默认宽度就是它本身内容的宽度。

    ④ 行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里面不能再放链接

  • 特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全

行内块元素

行内元素中有几个特殊的标签 <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。

② 默认宽度就是它本身内容的宽度（行内元素特点）。

③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

元素显示模式总结

image-20220504184005099

元素显示模式转换

  • 转换为块元素：display:block;

  • 转换为行内元素：display:inline;

  • 转换为行内块：display: inline-block;

css背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

背景图像固定（背景附着）

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment : scroll | fixed

image-20220504184910279

 

背景复合写法

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

background: transparent url(image.jpg) repeat-y fixed top ;
​
背景色半透明
background: rgba(0, 0, 0, 0.3);
​

  • 最后一个参数是 alpha 透明度，取值范围在 0~1之间

  • 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .3);

  • 注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响

  • CSS3 新增属性，是 IE9+ 版本浏览器才支持的

  • 但是现在实际开发,我们不太关注兼容性写法了,可以放心使用

背景总结

image-20220504185151773

css盒子模型

所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容。

边框
border : border-width || border-style || border-color
表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

border-collapse:collapse;

  • collapse 单词是合并的意思

  • border-collapse: collapse; 表示相邻边框合并在一起

​内边距（padding

padding 属性用于设置内边距，即边框与内容之间的距离。

当我们给盒子指定 padding 值之后，发生了 2 件事情：

  1. 内容和边框有了距离，添加了内边距。

  2. padding影响了盒子实际大小。

    也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

    解决方案： 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

  • padding内边距可以撑开盒子,我们可以做非常巧妙的运用. 因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适.

  • 如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

  •  

posted @ 2022-05-04 19:06  希希sw  阅读(71)  评论(0)    收藏  举报