01.认识前端

绝地灬酷狼 2022-05-25 11:08 200阅读 0赞

#### 1.常用快捷键（***要会，不然会显得很low***） ####

**Ctrl+c** 复制； **Ctrl+v** 粘贴； **Ctrl+x** 剪切；**Ctrl+a**全选；**Ctrl+s** 保存；**Ctrl+z** 撤销一步；**ctrl+shift+s** 另存为

**Windows+d** 返回桌面；**Windows+e** 我的电脑；**Windows+r** 打开运行

**Alt+tab** 切换软件；**Ctrl+tab** 切换页面；**F2** 重命名；**F5**刷新页面

#### 2.认识大前端 ####

（1）把UI设计好效果图，前端将其生成网页，利用html+css+js等技术；

（2）目的对象：Pc端 移动端；（3）解决用户体验

（4）**学习态度：养成一种习惯，很重要，要熟练结构、案例**

#### 3.认识网页 ####

（1）网页由文字、图片、视频、音频、超链接等组成。

（2）**Web标准：**

W3C组织（万维网联盟）

三大标准：

**Html 结构标准**：相当于人的骨架；

**Css 表现标准**：相当于给人化妆，变得更美丽；

**Js 行为标准**：让网页更生动，相当于人在唱歌；

（3）浏览器

浏览器就是上网的客户端（软件）。常用的有：IE，Chrome谷歌、猎豹、百度等等

（4）**浏览器内核**（渲染引擎）：其决定了浏览器如何显示网页的内容以及页面的格式信息==>浏览器兼容性问题出现

（5）浏览器和服务器的那点事![20180514102812845][]

IIS（软件）提供网页浏览服务

（6）Url地址

浏览器向服务器发送请求（通过http协议）；

http协议：超文本传输协议，也就是浏览器和服务器的网页传输数据的约束和规范；

url地址：平时我们写的网址就是url地址；url协议：规定url地址的格式

（协议规定格式：scheme://host.domain:port/path/filename

**scheme**：定义因特网服务的类型，常见的就是http;

**host** ：定义域主机（Http默认主机就是www）;

**domain ：**定义因特网域名 比如 ： w3school.com.cn；

**：port** 定义端口号（网页默认端口：80）；

**path**：网页所在服务器上的路径；

**filename**：文件名称 ； ）

#### 4.认识html ####

**4.1 Hyper text markup language** 超文本标签语言。

超文本：超链接。（实现页面跳转）

##### **4.2 html结构标准** #####

<!doctype html>   声明文档类型
    <html>            根标签
    <head>            头标签
    <title>好好学习</title>   标题标签
    </head>           头部标签
    <body>    主体标签
           生命不息，学习不止 
    </body>
    </html>

Html与htm是一样的，后缀名不能决定文件的格式，只能决定文件打开的方式。

##### 4.3 Html标签分类 #####

**单标签**  <!Doctype html>等

**双标签** <html></html> <head></head>等

##### **4.4 Html标签关系分类** #####

**包含（嵌套关系）** <head><title></title></head> 父子

**并列关系** <head></head><body></body> 兄弟姐妹

##### **5. 开发工具** #####

Dw 历史悠久，设计师使用；Subline 轻量级，易学上手，好用插件；Webstorm 重量级，super 智能

##### **6. 标签** #####

**单标签** : **注释标签 ：** ctrl+/  **换行标签**：<br> **水平标签** <hr>

**双标签**：**段落标签**： <p></p> **标题标签（由大到小）**：<h1></h2>,<h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>，**h1在一个页面里只能出现一次。**

**文本标签：**<font size="5" color="red">文本内容</font>

**加粗：**<strong>哈哈哈</strong>，<b>呵呵呵</b> <strong></strong>表强调，尽量使用这个标签

**倾斜：<em>文本倾斜</em> <i>文本倾斜</i>，<em>文本倾斜</em> 表强调，尽量使用这个**

**<del>删除线标签</del>尽量用前者，更语义化 <s>删除线</s>**

**下划线标签：<ins>下划线</ins>尽量用前者，更语义化 <u>下划线</u>**

**添加图片<img src="图片路径" alt="图片解释" title="标签题目"/>**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	  
            
            
            
    	
    	
    	有人安于某种生活，有人不能。<br/>因此能安于自已目前处境的不妨就如此生活下去，不能的只好努力另找出路。
    	<hr />
    	<p>苦乐全凭自已判断，<strong>和<u>客观环境并不一定有直接关系</u></strong>正如一个不爱珠宝的女人，即使置身在极其重视虚荣的环境，也无伤她的自尊。</p>
    	<p>拥有万卷书的穷书生，<em>并不想去和百万富翁交换钻石或股票</em>。满足于田园生活的人也并不艳羡任何学者的荣誉头衔，或高官厚禄。</p>
    	倒是哪些胸无主见的人，<ins>不受抉择之苦。</ins>因为逢到需要决定的时候，他总是求询别人说："嘿，你看怎么做？"大凡能够成大功业的人，都是抉择力甚强的人。他知道事之成败，全在乎已没有人可以代劳，更没有人能代你决定。在抉择的哪一刻，成败实已露出端倪。
    	<h1>人生哪儿有那么多退路，有时就得咬牙硬撑</h1>
    	<font size="6" color="red">可是很多时候，你会发现，人生看起来是有许多选择，可是在现实生活中，你真的别无选择。
    
    　　<del>该你吃的苦，你得吃，该你受得罪，你得受，甚至该你吞下的委屈</del>，你一丝一毫也少不了。</font>
       <img src="图片地址" alt="坚强的ant" title="图片题目" height="改变图片高度" width="300"
    	<div><del>研究所很坑<del></div>
    	<p></p>
    	<div><s>感觉被坑了</s></div>
    </body>
    </html>

##### 7.相对路径和绝对路径 #####

相对路径：相对于本身html的文件的路径。

若与html在同一个目录下，直接写**文件名**；

若文件在html文件下一级目录，写**文件夹名称/图片（html文件）名；**

若文件在html文件上一级目录，则写**../文件名。**

**绝对路径：**从**根目录**出发的文件路径（path）(一般不用这个)

**8.超链接**

标签格式：<a href = "html文件" title="文件提示" target="\_self">超链接</a>

**href** 去往的路径（跳转的页面） 必写属性

**title** 提示文本 鼠标放在链接上显示的文字 **target="\_self"**默认状态，在自身页面打开链接（关闭自身页面，打开新页面）**target="\_blank"** 打开新页面（自身页面不关闭，打开新页面）

##### 9.锚链接（点此链接将跳转到你抛锚的位置） #####

标签个事：首先先抛锚（定义一个锚点）：<id="sd">然后再设置一个超链接<a herf ="\#sd">回到顶部</a>

**10.春夏秋冬小案例**

##### 11.空链 #####

标签格式:**<a href="\#">空链</a>**

**12.压缩包文件下载 不推荐使用**

标签格式：**<a href="04超链接.rar">压缩包</a>**（不推荐使用）

##### 13.超链接优化写法（很重要的一个标签） #####

<base target="\_blank">在<head></head>中，可以使一个页面中的超链接在新窗口中打开，不需要在每个html中写<a href ="" target="\_blank">超链接</a>

##### 14.特殊符号，特殊标记 #####

**空格符号:** &nbsp; **<:** <  **>:**&gt

**15.列表**

**15.1 无序列表**

**<ul type="square">**

**<li></li> 列表项**

**<li></li>**

**</ul>**

**type="square" 小方块 ；type="disc"实心小圆圈；type="circle"空心小圆圈**

<ul type="square">
    		<li>远离抱怨：很多事自己想清楚就好</li>
    		<li>远离抱怨：很多事自己想清楚就好</li>
    		<li>远离抱怨：很多事自己想清楚就好</li>
    		<li>远离抱怨：很多事自己想清楚就好</li>
    		<li>远离抱怨：很多事自己想清楚就好</li>
    		<li>远离抱怨：很多事自己想清楚就好</li>
    	</ul>

##### 15.2 有序列表 #####

<ol>

</ol>

<ol type="a" start="3">type可以自定义序号类型，start决定了开始的位置

<ol type="a">
    		<li>生活总要有点盼头，日子也要有个奔头</li>
    		<li>在这座城市里的人们，都在认真生活，在用力生活。</li>
    		<li>我也要靠自己的大脑和双手创造自己的财富！</li>
    
    	</ol>

**15.3 自定义列表**

**<dl>**

**<dt></dt> 小标题**

**<dd></dd> 解释标题**

**</dl>**

<dl>
    	<dt>研究生生活</dt>
    	<dd>no money</dd>
    	<dd>Cheap labor</dd>
    	<dd>hopeless<dd/>
    </dl>

**15.4 音乐标签**