web前端基础、前端复习Html、CSS、JavaScript个人总结

qq_49740288

已于 2023-02-07 18:37:24 修改

阅读量827

点赞数 1

分类专栏： web前端文章标签： css html5 html 前端蓝桥杯

于 2022-11-18 23:53:10 首次发布

本文链接：https://blog.csdn.net/qq_49740288/article/details/127931540

版权

笔记同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

web前端

1 篇文章 0 订阅

订阅专栏

一、概述

网页一种文件的展开

开发过程就行写日记一样、由一片空白的纸张不断丰富为充满文字和图片的ppt

Html、css、javascrpt 三大技术分别对应网页页面的(结构)、(样式)、(事件响应)

二、HTML

1、介绍

网页的结构-----基本结构

<!DOCTYPE html>

    <html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

    </body>

</html>

1、标签

标签就是一种 “组件”，于< >

例如表单，<form></form> 盒子 <div></div> 分割线<br>

需要我们自己了解和运用，每个标签都有各自的功能，例如<input>用于输入信息

2、属性

属性于标签内的一种字段具有修饰功能类似于英语句子中的形容词，用于刻画或修改标签的各种属性如，大小，颜色...

这些都需要我们自己去了解和运用，这里给出详细的列表，关于HTML中标签及属性

2、常见标签属性介绍和运用

属性

Lang：规定了页面的语言类型、为了搜索引擎、提示翻译功能

标签

<head>里面的内容一般不显示在页面中，而是给浏览器解析对接后端用的

<body>里面的内容显示在页面上，可以给用户来看

<meta>给网页提高搜索率、利用其内置属性，扩充功能。例如：配合属性charset：设置字符集

<title>将文字写在两个标签之间，设置网页的名字

<h>标签分为1-7级，由大到小，将文字在页面内设置为标题

<p>标签在页面中，将文字变得更加格式化，分为一段一段的

<img>标签用于嵌入图片，要搭配属性src使用，src=“相对路径”、“绝对路径”或“网上提供的图片路径（呈现链接样式）” 搭配alt属性时显示的描述文字

<a>

<a>可与做超链接与属性 href使用，用于指向（规定）跳转的目标地点（页面）1、href=”目标链接”

2、href=”目标页面.html”

3、href=”#id名”（页面中有id的组件）

4、href=”tel：电话号”拨打电话

5、href=”/邮箱”发邮件

配合target属性使用，限定跳转方式_self（原窗口跳转）、_blank（新窗口打开）_parent（父级窗口）、 _top（）顶级窗口

列表 <ol> <ul>

有序ol 、无序ul 、自定义列表dl

ul 搭配属性 type cycle空心圆（default）square小方块

样式: <ul> <il>格子1</il> <il>格子2</il> <il>格子</il> </ul>

ol 搭配属性 type(用于开始排序的数字) start（从第几位开始排序）

样式: <ol> <il>格子1</il> <il>格子2</il> <il>格子</il> </ol>

dl自定义的列表

样式:<dl>

<dt>1 <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd></dt>

<dt>2 <dd>2.1</dd> <dd>2.2</dd> <dd>2.3</dd></dt>

</dl>

这两个标签使用频率最高，广泛运用在网页的页面中，是结构化的标签，用于划分区域，有人成为盒子模型，在HTML5出世之前，html+css又被称为div+css，其重要性由此可见。

搭配其他文字修饰性标签，在项目开发中清楚HTML中原有默认样式，让css充分发挥效果

<span>标签对于一些与后端数据有关，或者后续需要修改的内容进行操作

<div> <p>段落内容 <span>分离数据</span>段落内容 </p></div>

功能化的标签，内嵌窗口在标签内：

1、配合src属性，链接其他页面、页面大小通过height、width属性控制、除此之外有scrolling属性控制滚动效果auto（默认）或 no、frameborder属性控制窗口边界1有 0没有

2、通过自身name属性，配合<a>标签的target属性，在页面内进行跳转

<body>
<a src="套跳转的网址" target="insidewin">目标1</a>
<iframe name="insidewin"></iframe>
</body>

如今常用于：可用来插入广告窗口、后台管理系统

表格

<table>

必须在容器<table>内使用</table> 配合标签<tr>、<th>和<td>这两种双标签使用

<table>内属性boder、width、cellspacing、cellspadding、backgroundcolor

属性 align：用在<able>上，界定表格的位置、用在<tr>上则界定内容的位置

常用格式

<table border="1">

<tr>
<th>表头单元格1</th><th>表头单元格2</th>
</tr>

<tr>
<td>内容单元格1</td><td>内容单元格2</td>
</tr>

<tr>
<td>内容单元格1</td> <td>内容单元格2</td>
</tr>

</table>

完全版

<table border="1">

<caption> 定义于表格内，显示于表格上方用于描述表格的标签 </caption>

<thead>
    <tr>
        <th>表头单元格1</th><th>表头单元格2</th>
    </tr>
</thead>

<tbody>
    <tr>
        <td>内容单元格1</td><td>内容单元格2</td>
    </tr>
    <tr>
        <td>内容单元格1</td> <td>内容单元格2</td>
    </tr>
    <tr>
        <td>内容单元格1</td> <td>内容单元格2</td>
    </tr>
</tbody>
<tfroot>
    <tr>
        <td>收尾统计</td>
    </tr>
</tfroot>

</table>

合并单元格子

合并行使用属性colspan、合并列使用属性rowspan配合等于号“=”赋值

数字为几，合并同行（或列）的几个格子

表单

<form>

一种特殊的表格的结构，是用来前端收集数据，检验信息、用户交互息息相关的组件。

常常搭配标签<input>、<button>和<texteara> <select>以及其内置属性action、method使用。

注意：

<input>要搭配属性type来定义输入的数据类型

        对应值text/password/submit/radio/checkbox/reset/file/button赋予其不同功能和额外形

        radio(单选项)、checkbox（复选项）、reset（重置内容）

<textarea>标签搭配属性cols和rows来设置复选框的大小

<label>标签用于添加文字描述与for属性搭配，增强触发的效果

<button>标签配合属性type有参数submit、resert、button

        表单内默认（submit）表单外默认（button）

<form action="收集完数据后要跳转的页面" method="post">
<！-- method属性具有两种参数post（后台传输）和get（地址栏传输） -->
    <label>Account</label><input type="text"></input>
    <label>Password</label><input type="password"></input>
    <label for="famale">Sex</label> <input id="famale" type="radio">famale</input>
    <label for="male">Sex</label> <input id="male" type="radio">male</input>
    <button >提交</button>
</form>

结束语

HTML5出世后，迈入移动端增加了大量标签

初略分类为：

结构化：<header>、<nav>、<footer>、<section>、<article>...

功能化:<veideo>、<canvas>、<aduio>...

再加入这些标签之前，一个页面分区通过大量的<div>标签然后通过id属性进行区分。这与HTML语义化的标准相违背(合适的标签包含合适的内容).更有一些功能标签用来配合JavaScript使用。

优点：

1、增强了HTML的结构性 2、提高代码阅读性 3、seo（搜索引擎）增强 4、移动端增强

5、便于维护

三、CSS

1、概述

用于修饰html，css语法结构简单主要是由两部分组成：①选择器、②一条或多条声明

2、引入方式

内联样式（行内）

于HTML标签内使用 style属性=""

内部样式（<head>标签内）

通过<style> css语句 <\style>标签

外部样式（链入式）

通过<link rel = "stylesheet" type ="text/css" href="路径/样式名.css"></link>标签

3、选择器

分类：

①全局选择器

*{

/*
内部样式声明
一般用于去默认样式（样式初始化）
*/
}

②元素选择器

元素名（标签名）{

/*
一条或多条声明
*/
}

③类选择器

以.开头后接html标签的class值

.class名（类名）{

/*
要求对特定的HTML进行“标记”，通过class属性
多个类选择器可进行叠加作用于一个元素上，叠加时类名之间用space（空格隔开）
例：class="类名1 类名2"
*/
}

④ID选择器

针对某一个特定元素，只能使用一次，对应搭配属性id使用

#id名{

/*
每个id只能使用一次，不可重复
id选择器使用#开头，每个元素的id不可相同
*/
}

⑤合并选择器

写法合并，对样式相同，类型相同的选择器进行合并：选择器1，选择器2，...{}

#idname1,#idname,...{

/*
选择器样式相同
*/
}

.classname1,.classname2,...{

/*
选择器样式相同
*/
}

选择器优先级（当同一个内容使用多种选择器，重复样式修饰不同时处理原则）

CSS中选择器优先级按数值“权重”进行比较

①元素选择器：1

②类选择器（class）：10

③id选择器：100

行内式具有最高的权重

优先级从高到低：行内式>id选择器>class选择器>元素选择器

同级别选择器样式冲突时，显示效果按最后一个显示（前面的被覆盖）

4、属性

字体属性

p{


//字体颜色
color:red;//直接填颜色
color:#ff0000;//十六进制
color:rgb(255,0,0);//0-255
color:rgba(255,0,0,0.5);//颜色及透明度


//字体大小
font-size:25px;//chrome浏览器默认最小12px

//字体线条粗细
font-weight:lighter//更细
font-weight:border;//更粗
font-weight:bord;//粗体
font-weight:400;//100-900（400等同默认）


font-style:normal;//默认
font-style:italic;//倾斜



font-family:"微软雅黑";
font-family:"Micorosoft YaHei","simsun";//字体有名称中间有空格必须用引号

}

背景属性

div{
width:400px;
height:400px;//400像素


//背景颜色
background-color:#00ff00;


//背景图片
background-image:url("相对路径or绝对路径");


//背景样式重复
background-repeat:no-repeat;//不重复


//背景规格
background-size:100% 100%;//容器的填充程度
background-size:300px 400px;//容器的填充程度，用像素描述
background-size:cover;//保持图片比例填充，多余不显示，无空白
background-size:contain;//保持图片比例填充，完全显示内容，但有空白


//设置背景的位置，默认起始位置为0% 0%，
background-position:left top;
//双值位，共有上（top）下（bottom）中(center)左（left）右（right）五个值，任意组合
//也可使用百分比 x% y%，像素来描述 xpos ypos


}

文本属性

p{

text-align:center;//文本居中
text-align:left;//文本左边起始
text-align:right;//文本右边起始

text-transform:capitalize;//首字母大写
text-transform:lowercase;//字体全部小写
text-transform:uppercase;//字体全部大写

text-indent:20px;//首行缩进20个像素

text-decoration:overline;//上划线
text-decoration:underline;//下划线
text-decoration:line-through;//删除线

}

表格属性

table{

//添加边框
border:20px solid black;//边框2像素 实线 边框颜色：黑

//高度
height:50px;
//宽度
width:50%;

}

table{
border-collapse:collapse;//将表格设置为单边框

}

td{

text-align:center;

//属性的垂直对齐
vertical-align:top;//垂直居上
vertical-align:center;//垂直居中
vertical-align:bottom;//垂直居下

}

//表格填充

td{
padding:20px;//在没有设置表格宽高时，表格大小刚好包括内容（边距padding为0）
}

关系选择器

①后代选择器

生效范围：所有被E元素囊括的 F元素，中间用空格隔开

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
    <li>列表4</li>
    <li>列表5</li>
</div>
</ul>

E F{ }//E为父 F为子

ul li{

font-size:23px;
color:red;

}

//效果作用在所有包含在ul下的li标签内（间接包含也算）

②子代选择器

选择所有与E元素有直接联系的F元素，对于更深层次的元素则不起作用

<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<div>
    <li>列表4</li>
    <li>列表5</li>
</div>
</ul>

E F{ }//E为父 F为子,注意直接性

ul>li{

font-size:23px;
color:green;

}

③相邻兄弟选择器

选择与E元素同级的F元素，用加号（+）相连接，仅作用于相邻的第一个元素

<h3>基准</h3>
<p>相邻第一个</p>
<p>相邻第二个</p>

E+F{ }//E与F同级,注意直接相邻性

h3+p{

font-size:23px;
color:blue;

}

④通用兄弟选择器

选择E元素之后所有同级的F，与之后相邻且同级的兄弟元素，共同作用

<h3>基准</h3>
<p>相邻第一个</p>
<p>相邻第二个</p>
<p>相邻第三个</p>

E-F{ }//E与F同级,注意同级兄弟性

h3-p{

font-size:23px;
color:blue;

}

CSS盒子模型

所有的HTML元素均可以视为盒子模型，在CSS中“box-model”这种术语是用来设计和布局时使用，其本质上就是一个盒子，封装周围的HTML元素，包括：

外边距（margin）、边框（border）、内边距（padding）、实际内容（content）

<div>
<p>测试内容</p>
</div>

div{

padding:50px;
padding:60px 90px;//先上下 后左右

//仔细划分-四方赋值
padding-right:10px;
padding-top:20px;
padding-left:30px;
padding-bottom:40px

boredr:3px solid blue;

margin:80px;
margin:100px 120px;//先上下 后左右

//仔细划分-四方赋值
margin-right:40px;
margin-top:30px;
margin-left:20px;
margin-bottom:10px;

}

弹性盒子模型

是CSS3的新特性，尤其是移动端（页面需要适应不同的大小，以及不同设备类型）

引入弹性布局，目的是提供一种更加有效的方式，来对容器中的子元素进行排列。

弹性盒子模型由弹性容器“flex-container”和弹性元素“flex item”组成

弹性容器通过设置display的属性值为flex（弹性容器）

弹性容器内包含一个或多个弹性元素

<div class="flex_container">
    <div class="flex_item">flex item 1</div>
    <div class="flex_item">flex item 2</div>
    <div class="flex_item">flex item 3</div>
</div>

.flex_container{

//常规属性用于效果演示
width:600px;
height:1080px;
background-color:blue;

//设置弹性容器
display:flex;

}

.flex_item{

//弹性元素
width:100px;
height:100px;
color:green;

}

文档流