前端开发基础

最新推荐文章于 2024-05-21 12:27:17 发布

me8023lord

最新推荐文章于 2024-05-21 12:27:17 发布

阅读量287

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_50805134/article/details/124377873

版权

1.操作系统常用配置

1.系统调整为最佳性能

：开始菜单->控制面板->性能信息和工具->调整视觉效果->调整到最佳性能

2.文件夹显示设置

：列表显示文件夹、显示隐藏文件、应用到所有文件
操作：文件夹选项->隐藏已知文件类型(去掉)->应用到所有文件夹

3.任务栏设置

：任务栏右击->锁定任务栏+任务栏使用小图标

2.操作系统常用快捷键

win+数字键：打开/显示任务栏第N个图标的程序
win+D：快速显示桌面
win+R：快速运行，打开软件，cmd命令
win+E：快速打开资源管理器
win+方向键：最大化、还原、最小化窗口
win+L：快速锁定计算机
Ctrl+Alt+Del：显示以下选项：锁定该计算机、切换用户、注销、更改密码、启动任务管理器
Ctrl+Shift+Ese：打开任务管理器
Alt+F4：关闭当前活动页面或退出活动程序
Alt+Tab：在打开的项目中进行切换
Alt+向上方向键：在Windows Explorer中查看当前文件夹的上一目录
Ctrl+Esc：打开开始开始菜单
Ctrl+F4：关闭活动文档
Ctrl+Y：还原一个操作
Ese：取消当前项目
F2：重命名选定的项目
Sublime安装配置：
http://www.sublimetext.com/
**Atom安装：**继承度好
https://atom.io/添加链接描述
WebStorm 大项目使用webstrom 最专业的前端IDE开发工具
vs code (智能提示强大)

3.域名解析

在这里插入图片描述

4.HTML标签

1.HTML文件后缀

HTML文档的后缀名： .html .htm
当然用 .htm == .html进行命名html文档的后缀名都是一样的效果

2.快速生成HTML页面结构

Html:5 + tab键快速生成html5 的文档结构
Html:4s + tab
Html:4t + tab
Html:xt + tab : xhml过渡期的标准
目前所有的新的网站都是用html5的标准走。
在这里插入图片描述

3.标签

<!DOCTYPE html>

文档的声明：当前文件是一个html文档，遵循的标准是html5的标准
meta标签告诉浏览器当前文档的编码格式。
Link标签:
1.引入DNS预先解析
dns预解析(了解):可有效提高后续访问网站的效率

<link rel="dns-prefetch" href="http://mimg.127.net">

2.引入网站icon图标：

<link rel="shortcut icon" href="http://www.126.com/favicon.ico" />

3.引入css样式

<link rel="stylesheet" href="css/bg.css">

DTD
dtd:文档类型的定义

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

h1到h6标题标签
H1到 h6标签，相对于当前文档的重要性依次降低
段落标签
段落标签语法 : <p> 包裹段落的内容 </p>
P标签之间不会相互共用一行。会独占一行或者多行的空间
水平线标记 <hr>
Hr标签是单标签，不需要闭合标签。
使用语法： <hr> 在页面中插入一条水平线。
Br标签
Br标签可以强制段落进行换行。不受空格和换行合并的影响。
Br标签也是一个单标签，不需要进行吧闭合。
使用方式： <br >
Span标签
Span标签定义文档中的一小节文本。语义不强。
Span标签可以跟其他的span标签共用一行。
Em标签
em标签是局部的文本的加强语气，或者是文本的强调的作用。
Em标签可以会改变局部的文档的语义。

我更喜欢<em>小狗</em>和小猫咪

我更喜欢小狗和小猫咪
Strong标签是针对整个文档而言，进行一个加强语气的作用。例如：一篇文章中最重要的主题思想或者段落用strong标签进行包裹。
Sub和sup标签

H<sub>2</sub>O         下标
2<sup>32<sup>             上标

H₂O
2^{32^{超级链接标签}}

<a href=”你要跳转的网页的网址”> </a>

A标签的target属性：
_self(默认的，表示在当前页面中打开超级链接）；
_blank 表示在新的页签中，或者是新的窗口中打开超级链接的页面。
锚点链接：可以然后href属性指向一个页面中的id值，可以让页面跳转到id对应的标签的位置。
超级链接不仅仅是可以嵌套文本，还可以嵌套图片、表格、标题。
图片标签的使用

<img src=””  titlte=”图片的标题”  alt=”当图片不显示的时候，会显示alt属性的文本”>

图片的选择
jpg
色彩还原高，适合复杂颜色图片，比如banner
gif
色彩效果最低，支持透明，支持动画，适合颜色比较少，不适合渐变色。
png
PNG的优点是，清晰，无损压缩，压缩比率很高，可渐变透明，具备几乎所有GIF的优点；缺点是不如JPG的颜色丰富，同样的图片体积也比JPG略大。
PNG有着另一个优点，那就是逐次逼近显示(progressive display)：传输图像文件的同时，可以先把整个轮廓显示出来，然后逐步显示图像的细节，即先显示低分辨率显示图像，从模糊到清晰，然后逐步提高它的分辨率。这是一个很好的用户体验。
gif和png基本差不多，色彩比较少的直接gif，如果图片动画用gif。对色彩要求高的用jpg。
Src：图片的网站。
Alt：图片不显示的时候，会显示alt属性的文本
Title：对网站的seo有很大的影响。当鼠标移上去的时候，图片显示的tip提示文本内容。
列表标签

<!-- 无序列表 -->
	<ul>
		<li><span>北京</span><a href="#">你好</a></li>
		<li>上海</li>
		<li>成都</li>
		<li>武汉</li>
	</ul>

<!-- 有序列表 order liss 已经拍下的列表 -->
	<ol>
		<li>北京</li>
		<li>上海</li>
		<li>成都</li>
		<li>武汉</li>
	</ol>

自定义列表
<dt>关于我们</dt>
		<dd>传智简介</dd>
		<dd>联系方式</dd>
		<dd>诚聘英才</dd>
		<dd>人才服务</dd>

表格标签table
快捷键： ctrl+{ 进行左缩进， ctrl+} 进行右缩进

<table border="1">
		<tr>
			<td>基本参数</td><td>1.4t 帕萨特</td><td>1.8t 帕萨特</td>
		</tr>

		<tr>
			<td>基本参数</td><td>1.4t 帕萨特</td><td>1.8t 帕萨特</td>
		</tr>
	</table>

在这里插入图片描述

关于表格的合并单元格
Rowspan 行方向上合并单元格
Column 列方向合并单元格
Div和span标签
Div标签: <div></div>
Span标签: <span></span>
块级标签:独占行。
行级标签：可以跟其他的行内标签共用一行。
块：p，div，ul，ol，dl，li，dt，h1-h6
行：span，strong，em，文本相关的标签都是行内标签。
Div多用于表示文档中的一个块或者是整个结构的小节。
Span标签，多用于文本的一小节。
表单标签
Form标签，表单的域标签，用于包裹整个表单的内容。
表单就是用户提交数据到后台的一个虚拟单子。
表单一般由文本框、下拉列表、单选、多选、文本域等组成。
Action属性，用于指定当前表单提交的时候指向后台的地址。
Input标签是文本框、单选、多选、按钮等。
Type属性不同的取值决定了input标签的作用。
文本框：text
密码框：password
单选：radio
多选：checkbox
按钮：button
提交按钮：submit
重置按钮： reset
Input标签的 checked属性，属性值只有一个checked，可以省略属性值，在单选按钮和多选按钮中表示此按钮被选中。
Select标签用于下拉列表，或者列表标签。
在这里插入图片描述

选项用option标签来设置，value值只有在后台有用。Option包裹的内容是显示的选项的文本。例如：

 <select name="" id="" multiple>
		 	 <option value="1">公历</option>
		 	 <option value="2">农历</option>
		 	 <option value="2">农历</option>
		 	 <option value="2">农历</option>
		 </select>

Multipe:也是一个单属性。值只有一个multiple。设置了此属性表示select标签表现为列表标签。否则表示下拉列表标签。
Textarea文本域标签，用来输入大量文本的的标签。文本域标签的cols表示可以容纳多少列字符。Rows容纳多少行数据。一般用于输入大量文本时才用这个，其他情况用input 就可以了。

<!-- 文本域 -->
		 <textarea cols="20" rows="10">
		 	内容
		 </textarea>

Fieldset标签
表单组合标签，仅仅用于表单的组合。只是语义层面的事情。
可以影响到reset按钮的效果。
Legend标签用于组合标签的标题。

<fieldset>
			<legend>用户组2</legend>
			用户名2：<input type="text">
			<br>
			密码2：<input type="text">
		</fieldset>

Lable标签可以让标签文本点击的时候让label指向的标签表单标签获得焦点。
两种方式，使用for属性指向表单标签。
用lable标签包裹表单标签。

<label for="txtName">文本框获得焦点</label>
<label><input type="button" value="普通的按钮"> 选中按钮</label>

iframe标签，元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

可以设置高度和宽度（height，width）
去掉边框：frameborder设置为0
SEO优化的设置:

<meta name="keywords" content="招聘java,php,android,ios,c/c++,网页设计,平面设计,UI设计,JavaScript,网络营销讲师">

	<meta name="description" content="IT培训的龙头老大,年薪30万-50万招聘Java,PHP, android,ios,c/c++。" >

4.URL协议

Url协议就是规定 url地址的格式
协议规定格式：scheme://host.domain:port/path/filename
协议名称:// 域名（ip地址):80/路径/文件a.htm
scheme - 定义因特网服务的类型。最常见的类型是 http, https,ftp
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

5.URL编码

Url在线编码的工具：http://tool.chinaz.com/Tools/URLEncode.aspx

CSS

CSS 指层叠样式表 (Cascading Style Sheets)
CSS以HTML为基础
CSS就是控制页面布局和样式
HTML和CSS的关系：
HTML 结构层负责从语义的角度搭建页面结构
CSS 样式层负责从审美的角度美化页面
JavaScript 行为层负责从交互的角度提升用户体验。Style属性中，可以设置多条的CSS样式

1.引入css的方式

**默认样式：**又称为浏览器样式，受浏览器设置影响，浏览器样式优先级最低
**行内样式：**通过在标签中设置style属性来达到实现控制标签的样式的效果，Style属性中，可以设置多条的CSS样式
**嵌入样式：**在head标签中，嵌套一个style标签，在style标签中可以书写CSS的样式内容。
Style标签有一个属性type属性，默认值就是 text/css,可以省略。在这里插入图片描述 标签选择器
通配符选择器 * 代表选择当前页面所有标签，穿透力强，优先级高于继承的样式，一般不用
id选择器 #是id选择器的标志，唯一的
类选择器 class=“web demo” 可以有多个值也就是一个标签可以有多个类，可以在一个页面中出现多次，建议使用类选择器
**复合选择器：**标签指定式选择器、后代选择器
在这里插入图片描述

me8023lord

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端开发基础

1.1Vue的基本认识1.1.1官网1.英文官网：https://vuejs.org/2.中文官网：https://cn.vuejs.org/ 更快一点1.1.2简单介绍描述1.vue 渐进式的Javascript框架先用核心库当需要特定功能时添加相应的插件2.作用：动态构建用户界面3.作者：尤雨溪（一位华裔Google工程师）...
复制链接

扫一扫