当前位置:   article > 正文

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

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

一、概述

网页 一种文件 的展开

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

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

二、HTML

1、介绍

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. </body>
  9. </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. <dt>1 <dd>1.1</dd> <dd>1.2</dd> <dd>1.3</dd></dt>
  3. <dt>2 <dd>2.1</dd> <dd>2.2</dd> <dd>2.3</dd></dt>
  4. </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. <tr>
  3. <th>表头单元格1</th><th>表头单元格2</th>
  4. </tr>
  5. <tr>
  6. <td>内容单元格1</td><td>内容单元格2</td>
  7. </tr>
  8. <tr>
  9. <td>内容单元格1</td> <td>内容单元格2</td>
  10. </tr>
  11. </table>

完全版

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

②元素选择器

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

③类选择器

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

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

④ID选择器

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

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

⑤合并选择器

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

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

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

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

①元素选择器:1

②类选择器(class):10

③id选择器:100

行内式具有最高的权重

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

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

4、属性

字体属性

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

背景属性

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

文本属性

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

表格属性

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

关系选择器

①后代选择器

生效范围:所有被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. ul li{
  3. font-size:23px;
  4. color:red;
  5. }
  6. //效果作用在所有包含在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. ul>li{
  3. font-size:23px;
  4. color:green;
  5. }

③相邻兄弟选择器

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

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

④通用兄弟选择器

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

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

CSS盒子模型

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

外边距(margin)、边框(border)、内边距(padding)、实际内容(content)

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

弹性盒子模型

是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. width:600px;
  4. height:1080px;
  5. background-color:blue;
  6. //设置弹性容器
  7. display:flex;
  8. }
  9. .flex_item{
  10. //弹性元素
  11. width:100px;
  12. height:100px;
  13. color:green;
  14. }

文档流

一种默认形式

浮动

清除浮动

清除浮动方式:

①父元素设置高度

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

③overflow清除浮动

④伪对象方式

CSS3新特性

动画

媒体查询

雪碧图

字体图标

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

闽ICP备14008679号