精华内容
下载资源
问答
  • 2、背景图片 backgroud 3、文字颜色 text 4、链接文字属性 link 超链接的颜色默认是蓝色,访问后变成暗红色。可以通过link修改: 5、边距 margin 设置页面和浏览器边框的距离 五、注释标记 文字与段落标记 一、...

    HTML基础

    一、基本概念

    1、简介

    HTML:网页超文本标记语言,不是编程语言,是描述性的标记语言。

    2、基本结构

    3、标记

    :html开头,表示网页文档的开始

    二、编写方法文档工具,如:记事本

    IDE

    三、浏览html文件

    1、运行效果

    如果用pycharm编写,不要直接运行,直接找到文件路径打开这个文件最快捷。因为pycharm直接运行是作为一个服务监听起来,比较慢。

    2、看源文件

    鼠标右键-->查看源文件

    HTML基本标记

    一、

    标记head头部元素包括标题、基础信息和元信息等;

    作用范围:整篇文档;

    头信息中可以有:元信息、文档样式表和脚本等;

    头部信息一般不会再网页上直接显示。

    二、

    标记用来说明页面的用途,显示在浏览器的标题栏中。

    位置:

    ……之间

    三、元信息

    用来定义页面信息的说明、关键字和刷新等,它不用结束标记。属性有name和http-equiv。

    1、设置页面关键字

    供搜索引擎使用

    2、设置页面说明

    详细说明网页的内容

    3、定义编辑工具

    设置网页编辑工具名称

    4、设置作者信息

    5、设置网页文字及语言

    6、设置网页定时跳转

    7、icon

    8、css文件

    ?9、js文件

    四、主体标记

    1、背景色 bgcolor

    默认颜色是白色或灰白色,bgcolor自定义背景颜色。

    2、背景图片 backgroud

    3、文字颜色 text

    4、链接文字属性 link

    超链接的颜色默认是蓝色,访问后变成暗红色。可以通过link修改:

    5、边距 margin

    设置页面和浏览器边框的距离

    五、注释标记

    文字与段落标记

    一、标题

    1、h标记

    ~

    ,级别从最高到最低。

    2、对齐方式 align

    默认是左对齐,如更改,用align属性。left:左对齐

    center:居中

    right:右对齐

    二、文本基本标记

    标记用来控制字体、字号和颜色等属性。

    1、字体属性 face

    2、字号属性 size

    3、字体颜色 color

    三、文本格式化标记

    1、字体加粗

    2、斜体

    3、上标 sup

    如:平方、立方

    sup是superscript的缩写,在数学公式、日常计算应用、书记文章注解等有广泛应用。可在文字的任何地方使用,允许嵌套。

    结果:

    bf5c2c79fc414463a3245fd4704aee60.jpg

    4、下标sub

    如:化学方程式

    sub是subscript的缩写,在数学公式、化学方程式有广泛应用。

    结果:

    0e84b59da6574157a619772671e43368.jpg

    5、增大一级字号

    6、小字号标记

    7、下划线

    四、段落标记

    1、段落p

    它没有结束标记

    ,下一个

    开始意味着上一个段落结束。

    2、换行br

    相当于windows的“\r\n”和linux的"\n"换行

    3、不换行nobr

    五、水平线

    1、插入水平线hr

    2、水平线宽度width

    3、水平线高度size

    4、水平线去阴影noshade

    布尔值,加上它,不会显示例题形状的水平线。浏览器默认是显示一条立体形状带阴影的水平线。

    5、水平线颜色color

    6、水平线排列 align

    水平线默认是居中对齐,要想左对齐或右对齐,用align语法,该语法有3种:center:居中

    left:左对齐

    right:右对齐

    六、其它标记

    以&开头,以;结束。

    1、插入空格

    2、插入特殊符号“"

    &&

    >>

    ××

    §&sect

    使用列表

    展开全文
  • 控制web前端图片位置

    千次阅读 2021-02-16 15:52:06
    控制图片位置: 距离页面右端 margin-right:200px 距离页面左端: margin-left:200px 距离页面顶部: margin-top:200px 距离页面底部: margin-bottem:200px

    控制图片位置:

    距离页面右端

    margin-right:200px
    
    

    距离页面左端:

    margin-left:200px
    

    距离页面顶部:

    margin-top:200px
    

    距离页面底部:

    margin-bottem:200px
    
    展开全文
  • _WEB前端开发CSS盒子模型都具备内容content、内边距padding、边框border、外边距margin这些属性,这些属性可以用日常生活中的常见事物“盒子”作一个比喻来理解,所以称作为盒子模型。CSS实现轮播图效果(附代码)理论...

    CSS盒子模型是什么意思?_WEB前端开发

    CSS盒子模型都具备内容content、内边距padding、边框border、外边距margin这些属性,这些属性可以用日常生活中的常见事物“盒子”作一个比喻来理解,所以称作为盒子模型。

    ziaYjy.jpg

    CSS实现轮播图效果(附代码)

    理论基础

    CSS3 animation 属性和 @keyframes 规则

    主体思想

    1、准备相同大小的多个图片

    2、将要展示图片横排放在一个图片容器里面

    3、在图片容器外再加一个展示容器,展示容器大小为图片大小

    4、给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值

    注意事项

    动画效果分为切换和停留两部分

    自定义动画阶段与图片数量相关

    动画各阶段偏移值与图片大小相关

    setTimeout和setInterval的区别是什么_WEB前端开发

    setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,区别是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环下去。

    本文中示例最后一个图片到第一个图片没有切换效果,一个思路是可以由最后一个图片再挨个切换到第一个图片

    HTML

    1.png

    2.png

    3.png

    解析:

    这里创建了三个 img 元素,img 元素外面是图片容器,图片容器外面是展示容器。

    CSS

    #container {

    width: 400px;

    height: 300px;

    overflow: hidden;

    }

    #photo {

    width: 1200px;

    animation: switch 5s ease-out infinite;

    }

    #photo > img {

    float: left;

    width: 400px;

    height: 300px;

    }

    @keyframes switch {

    0%, 25% {

    margin-left: 0;

    }

    35%, 60% {

    margin-left: -400px;

    }

    70%, 100% {

    margin-left: -800px;

    }

    }

    解析:

    1、展示容器大小和图片大小一致

    2、图片添加 float 效果,不用考虑麻烦的 margin 问题

    3、由于示例只有三个图片,所以添加了三个动画阶段,每一阶段都是通过设置递增的 margin-left 值达到切换的效果

    4、设置的动画阶段(如:35%~60%)是动画停留部分,和上一阶段空余时间(如25%~35%)即为动画切换部分,各部分时间长短需要自己把控

    运行效果

    3AniMr.gif

    感谢大家的阅读,希望大家收益多多。

    本文转自:https://blog.csdn.net/u011848617/article/details/80468463

    推荐教程:《CSS教程》

    展开全文
  • Web 页面制作基础Web 的相关概念WWWWebsiteURLWeb StandardWeb BrowserWeb ServerHTML 基础标记语言从 HTML 到 XHTMLHTML 的基本结构HTML 的相关基本定义HTML 常用开发工具HTML 的通用属性HTML 的全局标准属性HTML ...

    Web 页面制作基础

    Web 的相关概念

    WWW

    Website

    URL

    Web Standard

    Web Browser

    Web Server

    HTML 基础

    标记语言

    从 HTML 到 XHTML

    HTML 的基本结构

    HTML 的相关基本定义

    HTML 常用开发工具

    HTML 的通用属性

    HTML 的全局标准属性

    HTML 的全局事件属性

    HTML 主体元素

    HTML 无语义元素

    HTML 标题元素

    HTML 段落元素

    HTML 注释元素

    HTML 格式化元素

    HTML 图片元素

    HTML 超链接元素

    HTML 列表元素

    HTML 表格元素

    HTML 表单元素

    HTML 框架元素

    HTML 的预留字符

    CSS 基础

    什么是 CSS

    CSS 的历史

    CSS 样式的基本使用

    CSS 的两个特性

    CSS 的基本语法

    CSS 的选择器

    元素选择器

    通配符选择器

    属性选择器

    派生选择器/上下文选择器

    id 选择器

    类选择器

    伪类选择器

    伪元素选择器

    CSS 的属性

    CSS 背景属性

    CSS 字体属性

    CSS 文本属性

    CSS 尺寸属性

    CSS 列表属性

    CSS 表格属性

    CSS 内容元素

    CSS 盒模型

    CSS 内边距属性

    CSS 值复制

    CSS 外边距属性

    CSS 边框属性

    CSS 轮廓属性

    布局属性

    CSS 浮动属性

    CSS 定位属性

    JavaScript 程序设计

    JavaScript 的诞生

    ECMAScript 的版本

    JavaScript 的基础知识

    JavaScript 的特点

    JavaScript 语法

    JavaScript 关键字

    JavaScript 变量

    数据类型

    运算符

    分支循环

    if 条件语句

    switch 选择语句

    for 循环

    for in 遍历对象或数组

    while 循环

    do-while 循环

    数组

    数组定义

    数组操作

    二维数组

    字符串操作

    字符串连接

    字符串搜索

    字符串截取

    字符串替换

    字符串切割

    正则表达式

    正则表达式组成

    正则所用的方法

    对象

    对象的声明

    对象的属性

    对象的方法

    对象的遍历

    函数

    函数的声明

    函数的返回值

    函数的调用

    闭包函数

    内置函数

    JavaScript 的对象模型

    BOM 对象

    window 对象

    document 对象

    location 对象

    navigation 对象

    screen 对象

    history 对象

    BOM 操作

    DOM 对象

    DOM 操作

    获取节点

    获取/设置元素的属性值

    创建节点及增添节点

    删除节点

    属性操作

    JavaScript 事件处理

    事件介绍

    窗口事件

    load 事件

    resize 事件.

    scroll 事件

    焦点事件

    鼠标事件

    获取鼠标点击位置

    鼠标悬停和离开

    鼠标拖拽

    键盘事件

    事件冒泡与捕获

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达达的简书!

    这是一个有质量,有态度的博客

    36aa8949e9314a43b5a9f8f6b40b00da.jpg

    展开全文
  • ps扣完图怎么提取出来_WEB前端开发ps扣完图提取出来的方法:首先打开ps并打开需要抠的图片;然后选择钢笔工具,沿着物体外部,勾画闭合路径;接着依次选择“建立选区或者切换到路径面板-建立选区”;最后反选完成...
  • _WEB前端开发web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流。html里文字居中代码怎么写?下面本篇文章给大家介绍...
  • Web前端:HTML最强总结 附详细代码

    万次阅读 多人点赞 2021-03-26 23:25:48
    Web前端基础: Web前端:HTML最强总结 附详细代码 Web前端:CSS最强总结 附详细代码 Web前端:JavaScript最强总结 附详细代码 Web前端工具: Web前端: JQuery最强总结(附上详细代码Web前端:Bootstrap最强总结 ...
  • _WEB前端开发web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流。html里文字居中代码怎么写?下面本篇文章给大家介绍...
  • 没经验,不知道从何开始 ,代码哥(DaiMaGe3)之前也是从新手过来的,很能理解web前端新手的难处,为了更好的帮助大家自学好web前端开发,我把自己精心梳理的web自学资料、心得及完整的web前端学习路线,统统都分享...
  • _WEB前端开发h5制作的意思是H5广告,大多是在微信上宣传营销使用的,而HTML5是第五代HTML的标准,可以说,H5都是基于 HTML5 实现的,包括目前我们看到的大部分网页,基本上所有H5都遵循HTML5这个规范。CSS3实现图片...
  • 题记 前端需求之高斯模糊图片最近工作中有一个需求,客户提交图片,服务器根据图片生成内容,并将内容显示,要求高斯模糊处理用户的图片并作为作品展示的背景,类似于苹果设备上的高斯模糊背景。用户提交的图片分...
  • 效果图: 源代码: 花花草草 花花草草 红色郁金香 黄色郁金香 再附上一张原图
  • body 的背景图设置第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放background: url(imgs/1.jpg)no-repeat;background-position:center 0; 背景图的定位原点,由于body高不确定background-attachment:fixed;...
  • 小白总结一下最近学到的前端知识,实现轮播图~~ 分两步: 第一步:在body中添加οnlοad=”show()”,onload事件是浏览器解析完页面之后就会自动触发的事件 <body onload=”show()”></body> 第二步:...
  • 如题,字面上的意思,今天小编,就是来跟大家说一下,一个网页做一个图片背景!将图片设置成背景,那么先找背景素材,这个背景素材可以到各大图片网站找!那么为什么今天小编要讲这个呢?在做一个网页中,如果网页...
  • web前端实习报告

    千次阅读 2020-12-20 22:23:56
    web前端实习报告 (10页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦!19.90 积分实 习 报 告学生姓名: 学 号: 专业班级: 实习单位: 实习时间: 校外指导教师: 校内...
  • web前端开发工程师岗位的职责1职责:1、负责产品的前端代码开发、页面重构以及交互设计逻辑处理;2、根据产品文档开发高性能、高兼容性的前端代码,完成脚本通用类库、框架、UI控件的编写,并形成文档;3、与用户、...
  • 一、前端(Frontend)1、对于web前端来说,通常是指网站的前台部分,包括网站的表现层和结构层:Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。2、前端技术一般分为前端设计和前端开发,前端设计一般可以...
  • 今天,我演讲的题目是《Web前端开发职业技术要求规划》。这个世界有很多不平凡的人,也有更多平凡的人,你是属于哪一种呢? 我曾经即当过学霸也当过学渣,从小不爱学习的我,每一科成绩都不及格,成天和朋友们出去...
  • 如图所示 下面是源代码: Document 一 书法 该诗写于1972年。余光中的祖籍是福建永春,他于1949年离开大陆去台湾。[5]当时由于政治原因,台湾和大陆长时间的隔绝,致使余光中多年没有回过大陆。他一直思念亲人,渴望...
  • 文章目录Educoder Web练习题 1 Web前端开发概述第1关:Web前端开发相关的概念相关知识Web系统的组成Web开发浏览器URLWWWhttp网站Web标准自主实训第2关:Web前端开发相关的技术相关知识基本应用技术...
  • 很多小白都感觉web前端工程师很高大上,更不知道什么是web前端工程师?web前端工程师是干什么的,那么php中文网就为大家介绍一下web前端工程师。【推荐阅读:前端开发用什么工具】一:什么是web前端工程师web前端...
  • web前端开发介绍

    2021-03-02 21:28:31
    前端内容介绍 一、什么是前端 应用软件组成:前端+后端 后端负责处理业务逻辑&提供数据,任何与用户直接打交道的操作...早期的网页制作主要内容都是静态的,以文字图片为主,用户使用网站也以浏览为主。 随着互联网
  • Web前端课程设计

    2021-06-28 19:55:37
    大三上学期期末总结,嗯,没错,是上学期,写在新学期开始hhh。...《Web前端技术实验》期末作品 ——个人网站设计要求 栏目: 自我介绍 我的大学 专业及课程 校园活动 室友 社团经历 获得奖项、证..
  • 代码直接压缩在-码蝗网首页-点下载就可 jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择。其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你...
  • Web前端开发技术期末试题1

    千次阅读 2020-12-22 02:21:59
    绝密★启用前Web前端开发技术期一、单项选择题(本大题共25小题,每小题1分,共25分)1.网页制作工具按照其工作方式可分为( )A.HTML语言和非HTML语言两大类B.DHTML方式和JavaScript方式两大类C.标注型网页制作工具和...
  • web前端文件上传的几种方式

    千次阅读 2020-12-21 10:35:35
    web文件上传的几种方式纯form表单提交前端代码后台代码测试运行后台springboot项目,打开前端form表单html填写参数,选择文件,提交踩的坑如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、...
  • 最近在做一个寺庙相关信息的大屏显示系统时,由于使用的历史系统后台,跨域问题较难解决,最后决定使用图片流的方式,在前端显示图片。后端Java如下:@RequestMapping(value = "/getFileStream", method = Request...
  • 附上一张图片 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Index</title> <style> body{ background: url("images/b....
  • 2021年最新Web前端面试题精选大全及答案

    万次阅读 多人点赞 2021-01-07 11:53:44
    1.网络中使用最多的图片格式有哪些 JPEG,GIF,PNG,最流行的是jpeg格式,可以把文件压缩到最小 在ps以jpeg格式存储时,提供11级压缩级别 2.请简述css盒子模型 一个css盒子从外到内可以分成四个部分:margin(外边...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 123,433
精华内容 49,373
关键字:

web前端代码图片