devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web前端基础、前端复习Html、CSS、JavaScript个人总结_web前端设计与开发期末复习

作者：繁依Fanyi0 | 2024-02-22 06:33:42

赞

踩

web前端设计与开发期末复习

一、概述

网页 一种文件 的展开

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

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

二、HTML

1、介绍

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

  1. <!DOCTYPE html>
  2.  
  3.     <html>
  4.  
  5.     <head>
  6.  
  7.         <meta charset="utf-8">
  8.  
  9.         <title></title>
  10.  
  11.     </head>
  12.  
  13.     <body>
  14.  
  15.     </body>
  16.  
  17. </html>

1、标签

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

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

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

2、属性

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

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

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

属性

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

标签

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

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

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

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

<h><p><img>

<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自定义的列表

  1. 样式:<dl>
  2.  
  3. <dt>1 <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd></dt>
  4.  
  5. <dt>2 <dd>2.1</dd> <dd>2.2</dd> <dd>2.3</dd></dt>
  6.  
  7. </dl>

<div><span>

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

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

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

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

<iframe>

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

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

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

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

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

表格

<table>

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

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

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

常用格式

  1. <table border="1">
  2.  
  3. <tr>
  4. <th>表头单元格1</th><th>表头单元格2</th>
  5. </tr>
  6.  
  7. <tr>
  8. <td>内容单元格1</td><td>内容单元格2</td>
  9. </tr>
  10.  
  11. <tr>
  12. <td>内容单元格1</td> <td>内容单元格2</td>
  13. </tr>
  14.  
  15. </table>

完全版

  1. <table border="1">
  2.  
  3. <caption> 定义于表格内，显示于表格上方用于描述表格的标签 </caption>
  4.  
  5. <thead>
  6.     <tr>
  7.         <th>表头单元格1</th><th>表头单元格2</th>
  8.     </tr>
  9. </thead>
  10.  
  11. <tbody>
  12.     <tr>
  13.         <td>内容单元格1</td><td>内容单元格2</td>
  14.     </tr>
  15.     <tr>
  16.         <td>内容单元格1</td> <td>内容单元格2</td>
  17.     </tr>
  18.     <tr>
  19.         <td>内容单元格1</td> <td>内容单元格2</td>
  20.     </tr>
  21. </tbody>
  22. <tfroot>
  23.     <tr>
  24.         <td>收尾统计</td>
  25.     </tr>
  26. </tfroot>
  27.  
  28. </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）

  1. <form action="收集完数据后要跳转的页面" method="post">
  2. <！-- method属性具有两种参数post（后台传输）和get（地址栏传输） -->
  3.     <label>Account</label><input type="text"></input>
  4.     <label>Password</label><input type="password"></input>
  5.     <label for="famale">Sex</label> <input id="famale" type="radio">famale</input>
  6.     <label for="male">Sex</label> <input id="male" type="radio">male</input>
  7.     <button >提交</button>
  8. </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、选择器

分类：

①全局选择器

  1. *{
  2.  
  3. /*
  4. 内部样式声明
  5. 一般用于去默认样式（样式初始化）
  6. */
  7. }

②元素选择器

  1. 元素名（标签名）{
  2.  
  3. /*
  4. 一条或多条声明
  5. */
  6. }

③类选择器

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

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

④ID选择器

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

  1. #id名{
  2.  
  3. /*
  4. 每个id只能使用一次，不可重复
  5. id选择器使用#开头，每个元素的id不可相同
  6. */
  7. }

⑤合并选择器

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

  1. #idname1,#idname,...{
  2.  
  3. /*
  4. 选择器样式相同
  5. */
  6. }
  7.  
  8. .classname1,.classname2,...{
  9.  
  10. /*
  11. 选择器样式相同
  12. */
  13. }

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

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

①元素选择器：1

②类选择器（class）：10

③id选择器：100

行内式具有最高的权重

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

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

4、属性

字体属性

  1. p{
  2.  
  3.  
  4. //字体颜色
  5. color:red;//直接填颜色
  6. color:#ff0000;//十六进制
  7. color:rgb(255,0,0);//0-255
  8. color:rgba(255,0,0,0.5);//颜色及透明度
  9.  
  10.  
  11. //字体大小
  12. font-size:25px;//chrome浏览器默认最小12px
  13.  
  14. //字体线条粗细
  15. font-weight:lighter//更细
  16. font-weight:border;//更粗
  17. font-weight:bord;//粗体
  18. font-weight:400;//100-900（400等同默认）
  19.  
  20.  
  21. font-style:normal;//默认
  22. font-style:italic;//倾斜
  23.  
  24.  
  25.  
  26. font-family:"微软雅黑";
  27. font-family:"Micorosoft YaHei","simsun";//字体有名称中间有空格必须用引号
  28.  
  29. }

背景属性

  1. div{
  2. width:400px;
  3. height:400px;//400像素
  4.  
  5.  
  6. //背景颜色
  7. background-color:#00ff00;
  8.  
  9.  
  10. //背景图片
  11. background-image:url("相对路径or绝对路径");
  12.  
  13.  
  14. //背景样式重复
  15. background-repeat:no-repeat;//不重复
  16.  
  17.  
  18. //背景规格
  19. background-size:100% 100%;//容器的填充程度
  20. background-size:300px 400px;//容器的填充程度，用像素描述
  21. background-size:cover;//保持图片比例填充，多余不显示，无空白
  22. background-size:contain;//保持图片比例填充，完全显示内容，但有空白
  23.  
  24.  
  25. //设置背景的位置，默认起始位置为0% 0%，
  26. background-position:left top;
  27. //双值位，共有上（top）下（bottom）中(center)左（left）右（right）五个值，任意组合
  28. //也可使用百分比 x% y%，像素来描述 xpos ypos
  29.  
  30.  
  31. }

文本属性

  1. p{
  2.  
  3. text-align:center;//文本居中
  4. text-align:left;//文本左边起始
  5. text-align:right;//文本右边起始
  6.  
  7. text-transform:capitalize;//首字母大写
  8. text-transform:lowercase;//字体全部小写
  9. text-transform:uppercase;//字体全部大写
  10.  
  11. text-indent:20px;//首行缩进20个像素
  12.  
  13. text-decoration:overline;//上划线
  14. text-decoration:underline;//下划线
  15. text-decoration:line-through;//删除线
  16.  
  17. }

表格属性

  1. table{
  2.  
  3. //添加边框
  4. border:20px solid black;//边框2像素 实线 边框颜色：黑
  5.  
  6. //高度
  7. height:50px;
  8. //宽度
  9. width:50%;
  10.  
  11. }
  12.  
  13. table{
  14. border-collapse:collapse;//将表格设置为单边框
  15.  
  16. }
  17.  
  18. td{
  19.  
  20. text-align:center;
  21.  
  22. //属性的垂直对齐
  23. vertical-align:top;//垂直居上
  24. vertical-align:center;//垂直居中
  25. vertical-align:bottom;//垂直居下
  26.  
  27. }
  28.  
  29. //表格填充
  30.  
  31. td{
  32. padding:20px;//在没有设置表格宽高时，表格大小刚好包括内容（边距padding为0）
  33. }

关系选择器

①后代选择器

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

  1. <ul>
  2. <li>列表1</li>
  3. <li>列表2</li>
  4. <li>列表3</li>
  5. <div>
  6.     <li>列表4</li>
  7.     <li>列表5</li>
  8. </div>
  9. </ul>
  1. E F{ }//E为父 F为子
  2.  
  3. ul li{
  4.  
  5. font-size:23px;
  6. color:red;
  7.  
  8. }
  9.  
  10. //效果作用在所有包含在ul下的li标签内（间接包含也算）

②子代选择器

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

  1. <ul>
  2. <li>列表1</li>
  3. <li>列表2</li>
  4. <li>列表3</li>
  5. <div>
  6.     <li>列表4</li>
  7.     <li>列表5</li>
  8. </div>
  9. </ul>
  1. E F{ }//E为父 F为子,注意直接性
  2.  
  3. ul>li{
  4.  
  5. font-size:23px;
  6. color:green;
  7.  
  8. }

③相邻兄弟选择器

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

  1. <h3>基准</h3>
  2. <p>相邻第一个</p>
  3. <p>相邻第二个</p>
  1. E+F{ }//E与F同级,注意直接相邻性
  2.  
  3. h3+p{
  4.  
  5. font-size:23px;
  6. color:blue;
  7.  
  8. }

④通用兄弟选择器

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

  1. <h3>基准</h3>
  2. <p>相邻第一个</p>
  3. <p>相邻第二个</p>
  4. <p>相邻第三个</p>
  1. E-F{ }//E与F同级,注意同级兄弟性
  2.  
  3. h3-p{
  4.  
  5. font-size:23px;
  6. color:blue;
  7.  
  8. }

CSS盒子模型

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

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

  1. <div>
  2. <p>测试内容</p>
  3. </div>
  1. div{
  2.  
  3. padding:50px;
  4. padding:60px 90px;//先上下 后左右
  5.  
  6. //仔细划分-四方赋值
  7. padding-right:10px;
  8. padding-top:20px;
  9. padding-left:30px;
  10. padding-bottom:40px
  11.  
  12. boredr:3px solid blue;
  13.  
  14. margin:80px;
  15. margin:100px 120px;//先上下 后左右
  16.  
  17. //仔细划分-四方赋值
  18. margin-right:40px;
  19. margin-top:30px;
  20. margin-left:20px;
  21. margin-bottom:10px;
  22.  
  23. }

弹性盒子模型

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

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

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

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

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

  1. <div class="flex_container">
  2.     <div class="flex_item">flex item 1</div>
  3.     <div class="flex_item">flex item 2</div>
  4.     <div class="flex_item">flex item 3</div>
  5. </div>
  1. .flex_container{
  2.  
  3. //常规属性用于效果演示
  4. width:600px;
  5. height:1080px;
  6. background-color:blue;
  7.  
  8. //设置弹性容器
  9. display:flex;
  10.  
  11. }
  12.  
  13. .flex_item{
  14.  
  15. //弹性元素
  16. width:100px;
  17. height:100px;
  18. color:green;
  19.  
  20. }

文档流

一种默认形式

浮动

清除浮动

清除浮动方式：

①父元素设置高度

②对受到影响的元素用clear属性清除

③overflow清除浮动

④伪对象方式

CSS3新特性

动画

媒体查询

雪碧图

字体图标

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/128913?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号