没有合适的资源?快使用搜索试试~ 我知道了~
前端开发笔记.docx
1 下载量 194 浏览量
2023-08-21
17:01:00
上传
评论
收藏 179KB DOCX 举报
温馨提示
试读
67页
前端开发是指构建和开发Web应用程序的过程,主要涉及创建用户界面、实现交互功能以及优化用户体验。前端开发人员使用各种技术和工具来设计和构建Web页面,使其在不同的设备和浏览器上都能良好运行。 在前端开发的学习和实践过程中,以下是一些重要的笔记内容: HTML(超文本标记语言): HTML是构建Web页面的基础,它描述了页面的结构和内容。笔记应包括常见的HTML标签、元素嵌套规则以及语义化的重要性。 CSS(层叠样式表): CSS用于定义页面的外观和样式。记录不同类型的选择器、样式属性和值,以及如何创建响应式布局和设计。 JavaScript: JavaScript是一种用于添加交互性和动态性的脚本语言。笔记内容应包括变量、数据类型、条件语句、循环、函数和面向对象编程等基本概念。 DOM(文档对象模型): DOM表示网页的结构,可以通过JavaScript进行操作。记录如何选择、修改和创建DOM元素,以实现动态更新页面内容。 响应式设计: 笔记应涵盖使用CSS媒体查询、弹性盒子布局和网格布局等技术来创建适应不同设备和屏幕尺寸的响应式页面。 前端框架和库: 介绍流行的前端框架
资源推荐
资源详情
资源评论
前端基础知识串讲
基础知识了解:
(1)HTML:超文本笔记语言
作用:实现页面基本内容结构化和系统化。将数据(静态的或者非静态的)进
行易于用户交互行为的基本布局
(2)Css:层叠样式表
作用:对 HTML 页面进行系统化和易于管理的样式渲染
(3)JavaScript:浏览器脚本语言
作用:实现基于客户端(浏览器)流程化控制的脚本设计
(4)Vue:一个 js 框架,可以提高开发效率;双向数据绑定
(5)Bootstrap(样式框架,可以实现快速布局)、element_ui(vue 的框架)
(6)其他常用框架,如 react 等
环境搭建:
不需要特殊搭建环境,可以选择一个合适的开发工具
常用开发工具:HbuilderX、vscode、webstrom
HTML 常用标记:
Html 标记可以总体分为两种类型:
(1)单标记 <标记名称 属性 1=“属性值” 属性 2=“属性值”/>
(2)双标记
<标记名称 属性 1=“属性值” 属性 2=“属性值”>
<子标记>(可选)
</标记名称>
常用标记:
<!DOCTYPE html> 文本类型,默认是 html5,也可以根据需要选择其他版本
<html> 所有标签的父标记,文档根标记
<head> html 文档环境的配置信息,以及外部资源的引入
<meta charset="utf-8"> 制定编码字符集为 utf-8
<title>测试</title> 指定标签页名字
<body> 文档内容(界面结构信息)
<a>:超链接;
可以根据 href 属性指定页面跳转地址;
使用 target 属性可以指定打开连接的目的地,_self 为默认值,表示在当前页面打开,可以
指定值为_blank 在其他页面开发连接
Title:文本提示(不是超链接特有的属性,绝大多数可视化标记都可以使用)
Eg:
<a href="http://www.baidu.com" target="_blank" title="百度">百度一下</a>
<br />:换行符
<hr color="red"/>:贯穿线,可以使用 color 属性改变颜色
图片
<img src="img/pig.jpg" width="500px" height="500px" alt="图片走失了"/>
Src:指定要显示的图片地址,可以是本地资源,也可以是万维网上的地址
Width:设置图片的横向宽度;可以为固定像素,或百分比
Height:设置图片的纵向高度
Alt:当 src 路径指定的资源不可用或失效使们用于在页面进行的提示文本
地图
<map>可以在 img 组件指定区域按照特定形状生成超级链接
用法:在 map 中指定区域,在 img 进行引用,使用 usemap 属性引入 map 的 name 属性值
进行使用
属性讲解:
shape 值为 rect:则显示一个方形,根据 coords 指定的坐标(11,11,50,50),前两个为矩形
左上角的坐标,后两个为右下角的坐标,两点形成对角线产生矩形范围;
shape 值为 circle:则显示一个环形,根据 coords 指定的坐标,前两个为圆心坐标,第三个
为半径长度。以此产生的圆形范围。
shape 值为 poly:则显示一个多边形,根据 coords 指定的坐标,坐标成对出现,每两个值定
义一个坐标点,最后一组最标点自动与第一组的坐标点闭合,产生多边形。
Eg:
<img src="img/pig.jpg" width="500px" height="500px" alt="图片走失了" usemap="#mymap"/>
<map name='mymap'>
<area shape="circle" coords="100,100,100" href="http://www<!-- .baidu.com" />
<area shape="rect" coords="200,200,400,400" href="http://www.baidu.com" />
<area shape="poly" coords="50,50,100,80,100,150"
href="http://www.baidu.com" />
</map>
排版:
标题:<h1></h1>...................................<h6></h6>:从 h1 到 h6 字号递减,单独成行
段落:<p>:自动换行,自成一行,但不保留文本格式
<pre>:自动换行,保留文本默认排版布局以及段落行列间距
 ;:空格符,将可控个空格符搭配使用,一个空格占位大小大约为空格符的二分
之一的大小
≥大于等于
≤小于等于
>大于
<小于
×x(乘号)
列表:
有序列表:
<ol>
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ol>
无序列表:
可以通过 style 属性改变列表前面的显示;如:list-style: none;为去掉列表前面的黑点
<ul style="list-style: none;">
<li>白日依山尽</li>
<li>黄河入海流</li>
<li>欲穷千里目</li>
<li>更上一层楼</li>
</ul>
修改文字样式:
Font 标签:改变字体样式
size 属性:改变字体大小,数字越小则字越小
Color:改变字体的前景色
Face:改变字体(文字字体设置是否起作用,在于客户端(浏览器)所在的主机环境是否有
该字体)
Eg:<font size="7" color="red" face="汉仪青云简">
Html 标签讲解
</font>
<b>标签:粗体,只是在视觉效果上加粗
<strong>你好</strong>:不只是视觉上的加粗,还会重声朗读
<i>:斜体,只是在视觉效果上改变
<em>:斜体,不只是视觉上的改变,还会重声朗读
<u>:下划线
<del>原价 8800</del>:贯穿线
<big>你好</big>:字体放大
<small>你好</small>:字体缩小
<s>你好</s>:贯穿线
<h1 align="center">你好</h1>:使用 align 属性,指定属性值为 center 使字体居中
<center>你好</center>:字体居中
表单组件:
<form>:表单本身作为一种范围标记进行使用,默认情况下没有任何样式,但上下自动换行
常用的表单组件:
常用属性:
Action:表示数据需要提交的目的地
Method:表示数据传输方法,默认为 get 方式(使用地址栏传输),可以设置为 post(加
密传输)
Get 和 post 的区别?
get 为轻量级传输,消耗资源相对较少,但安全性低(走地址栏);因走地址栏,但地址栏
剩余66页未读,继续阅读
资源评论
程序员Ale-阿乐
- 粉丝: 7800
- 资源: 99
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功