博客

Web前端学习笔记（1）

  • Post author:
  • Post category:其他


文章目录


提示：以下是本篇文章正文内容，下面案例可供参考



一、第一部分



1.1内容一



Web前端导入



1.拨云见日



基础入门：HTML、CSS

切图流程：传统切图、智能切图、公司里比较流行的一些切图方式等

实战阶段：PC企业站布局、PC游戏站布局



2.溯本求源



扩展知识点（细致、深入、一些新的内容）：扩展HTML、扩展CSS，

HTML5新语法（在浏览器中十分成熟，情况不错）CSS3新语法、兼容与hack（不同浏览器之间的一些兼容问题和一些解决方案）



3.风生水起



现在流行的布局：弹性布局、网格布局

移动端布局：流式布局、rem布局等

响应式布局 (如何用一套代码适应多种不同的设备）Bookstrap（基于响应式布局的框架，利用它快速搭建网页）



4.巧夺天工



工程方面：预编译CSS（Less和Css）postcss、CSS架构、高级功能、CSS与JS交互



二、第二部分



2.1内容一



HTML和CSS的定义



HTML


：中文称为超文本标记语言，从语义上来说，它只是一种是一种标识性的语言，并不是一种编程语言。



CSS


：Cascading Style Sheets，中文称为：层叠样式表或者级联样式表。它是一种负责页面样式的语言，也就是来修饰HTML（超文本标记语言）的。简单的来说也就是设定网页是以什么样子来表现的。HTML和它的区别在于，HTML只是用来编写网页的结构和内容，而它可以决定网页的表现样式。



三、第三部分



3.1内容一



宇宙第一编译器Vs Code



主要功能



该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。Somasegar也告诉笔者这款编辑器也拥有对Git的开箱即用的支持。

Visual Studio Code 提供了丰富的快捷键，用户可通过快捷键[Ctrl]+[K]+[S]（按住Ctrl键不放，再按字母K键和S键）调出快捷键面板，查看全部的快捷键定义。也可在面板中双击任一快捷键，为某项功能指定新的快捷键。一些预定义的常用快捷键包括：格式化文档（整理当前视图中的全部代码），[Shift]+[Alt]+[F]；格式化选定内容（整理当前视图中被选定部分代码），[Ctrl]+[K]+[F]；放大视图，[Ctrl]+[Shift]+[=]；缩小视图，[Ctrl]+[Shift]+[-]；打开新的外部终端（打开新的命令行提示符）：[Ctrl]+[Shift]+[C]。

该编辑器支持多种语言和文件格式的编写，截止2019年9月，已经支持了如下37种语言或文件



相关事件：



Visual Studio Code及其商标均为微软公司所有，并在《微软软件许可协议》下发布，为专有软件。而vscode(Code-OSS)为MIT许可证下的开源软件。前者在后者基础上经一定自定义构建操作得来。



3.2内容二



快捷键的使用

ctrl+s:保存

ctrl+a:全选

ctrl+x·ctrl+c·ctrl+v:剪切·复制·黏贴

ctrl+z·ctrl+y:撤销·前进

shift+end:从头选中一行

shift+home:从尾部选中一行

shift+alt+↓:快速复制一行

alt+↑或↓：快速移动一行

tab:向后缩进

tab+shift:向前缩进

多光标：alt+鼠标左键

ctrl+d:选择相同元素的下一行



四、第四部分



4.1内容一



Chrome浏览器

Google浏览器，Google Chrome，中国大陆官方译名：酷容浏览器（原网上叫做谷歌浏览器，官方给谷歌浏览器定名为酷容浏览器），台湾官方译名：Google Chrome，香港官方译名：Google浏览器，是一个由Google（谷歌）公司开发的开放原始码网页浏览器。该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。



4.2内容一



五大浏览器

什么是五大主流浏览器？

1.IE浏览器，2.Chrome浏览（谷歌浏览器），3.FirFox（火狐浏览器）4.Safari浏览器（苹果浏览器），5.Opera浏览器（欧朋浏览器）。



五大浏览器的介绍



IE浏览器


：它是微软公司为对抗网景公司于1994年夏天开始研发的一款浏览器 ，但微软并没有时间从零开始，而是微软和Spyglass合作，于是IE从早期一款商业性的专利网页浏览器Spyglass Mosaic派生出来的，最好的版本是IE6。目前微软已经放弃IE品牌，在Windows10上用Microsoft Edge取代了IE。并且停止对IE11以前版本的技术支持。



Chrome浏览器


：是一款由Google公司开发的网页浏览器，最开始Chrome采用webkit作为浏览器内核，直到2013年，Google宣布不再使用苹果的webkit内核，开始使用webkit的分支内核Blink。它的特点是简洁、快速。它有IOS,Android，Windows、Ponne等多个系统的浏览器。



FirFox浏览器


：它由Mozilla基金会与数百个志愿者​所开发的，原名“Phoenix”（凤凰），之后改名“Mozilla Firebird”（火鸟）再改为现在的名字Firefox。目前最新的正式版本为Firefox 53.0.2。Firefox采用Gecko作为内核。Gecko是一个开源的项目，代码完全公开，因此受到很多人的青睐。



火狐浏览器


是可以自由定制的，一般电脑技术爱好者都喜欢用。它的插件又是世界上最丰富的，这点得到了网友公认。下载来的火狐一般是纯净版，功能比较少，要根据自己的喜好进行定制！最后，Firefox的问世加快了第二次浏览器大战的开始。也自此打破了IE浏览器从98年网景被收购后独步浏览器市场的局面。



Safari浏览器


：是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。第二次浏览器大战也是从苹果公司发布Safari浏览器开始的，2003年苹果公司在手机上发布Safari浏览器，苹果公司利用其得天独厚的手机市场份额使Safari浏览器成为世界主流浏览器，Saf



五、第五部分



5.1内容一



深入了解网站开发

UI设计师：设计稿

web前端开发工程师（H5开发）

设计稿–>代码

数据库里的数据–>显示到页面

HTML:结构

CSS：样式

web后端开发工程师



5.2内容二



JV与HTML与CSS的关系

HTML用于控制网页的结构，

CSS用于控制网页的外观，

JavaScript控制的是网页的



第六部分



6.1内容一



web的三大核心技术

HTML:结构

CSS:样式

Javescript:行为



6.2内容二



结构,样式,行为

<style></style>
<div></div>
<script></script>



七、第七部分



7.1内容一



HTML基本结构与属性

超文本：文本内容+非文本内容（图片、视频、音频等）

标记：<单词>

单标签：

<header>


双标签：

<header></header>


语言：编程语言



7.2内容二



创建标签的快捷键

单词+tab–><单词>



7.3内容三




HTML常见标签



标签写法

<标签 属性=“值” 属性2=“值”>



八、 第八部分



8.1内容一



HTML的初始代码

!+tab创建html原始代码 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>



九、第九部分



9.1内容一



HTML的注释

<!--注释的内容-->



9.2内容二



注释意义

1.把暂时不用的代码注释起来方便使用

2.对开发人员进行显示



9.3内容三



快捷键注释的添加与删除

1.ctrl+/
2.shift+alt+a



十、第十部分



10.1内容一



HTML语义化

1.在没有CSS的情况下，页面也能呈现出很好的内容结构。

2.有利于SEO，让搜索引擎爬虫更好的理解网页。

3.方便其他设备解析(如屏幕阅读器、盲人阅读器等)。

4.便于团队开发与维护。



10.2内容二



屏幕阅读器


屏幕阅读器

（将H50vo.12.4拖拽网页书签栏，显示网页标题）



十一、第十一部分



11.1内容一



标题与段落

h标题–>双标签：

<h1></h1>......<h6></h6>


(在一个网站中，只有一个h1标签,body中标题)

段落–>双标签：

<p></p>



11.2内容二



个人简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我的简介</h1>
    <h2>个人技能(一）</h2>
    <p> 
熟练html语言,css技术开发；
熟练使用 Ajax,JavaScript,JQuery，easyui等；
熟练使用Javaee主要技术模块(Jsp/Servlet/JavaBean/jdbc等)技术的软件开发；
了解Activiti工作流；
熟悉Spring、SpringMVC、MyBatis等开源框架以及SSM框架的整合开发；
了解PL/SQL，存储过程；
熟练操作MySQL、Oracle数据库，熟悉SQL语句；
熟练使用Eclipse、MyEclipse等开发工具；
熟悉掌握Java编程思想，具有良好的编码设计规范习惯；
    <h2>个人技能（二）</h2>
    <p>
熟练使用PHP脚本语言，LAMP架构，具备后台开发能力熟练使用Laravel、ThinkPHP
等框架，能再此基础上进行开发熟悉掌握MySQL相关操作熟悉掌握Linux系统进行基
本的操作和配置掌握HTML+CSS+JavaScript+Ajax技术设计前台页面了解Git等版本
控制器的基本命令和使用。
        </p>
</body>
</html>



十二、第十二部分



12.1内容一



文本修饰标签

强调–>双标签：

<strong></strong>


加粗：

<em></em>


下标：

<sub><sub>


上标：

<sup></sup>



a<sup>2</sup>+b<sup>2</sup>=c<sup></sup> H<sub>2</sub>0


删除：

<del></del>


插入：

<ins></sub>
 

<p>促销：原价<del>300</del>,现价<ins>100</ins>
</p>
<p>北京著名的高档百货店——<em>赛特购物中心</em>即将关闭。
<strong>如果手上有购物卡尽快到店里消费</strong>
</p>



十三、图片标签与图片属性



13.1内容一



图片标签

img–>单标签

src:引入图片的地址

alt:当图片出现问题，可以显示一段友好的提示文字

title:提示信息

width、height:图片大小 

<img src=""C:\Users\86198\Desktop\屏幕截图(6).png"">



十四、第十四部分



14.1内容一



引入文件的地址路径

相对路径

.在路径中表示当前路径

…在路径中表示上一级路径

绝对路径



十五、第十五部分



15.1内容一



跳转链接

a–>双标签

href属性：链接的地址

target属性:可以改变链接打开方式。默认情况下：在当前页面打开

-self 新窗口打开-blank

给图片附上链接，代码如下（在当前页面）： 

<a href="http://www.baidu.com">访问百度</a>
        <a href="http://www.qfedu.com"></a>
        <img src="./img/animal/dog.jpg" alt="">

<a href="http://www.baidu.com"target="_blank">访问百度</a>

base–>单标签：作用就是改变链接的默认行为（都可在新页面内打开） 

<title>Document</title>
    <base target="_blank">
</head>
<body>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
    <a href="http://www.baidu.com">访问百度</a>
</body>
</html>



15.2内容二



跳转链接的练习

分别建立一个首页、列表页、详情页

并让他们之间实现相互跳转

每个页面至少包含一张图片

图片在images文件内

列表和详情在html文件夹内，首页在根目录下

在这里插入图片描述

代码如下：

链接的综合测试

html

1.list.html

2.detail.html

images

1.png

2.png

3.png

index.html 

<a href="./html/list.html">列表页</a>
    <img src="./images/t011a1797c8886af308.jpg" alt="">
 

 <a href="./detail.html">详情页</a>
    <img src="../images/v2-3cac2e5b2a78d25aea7a631cee7306ad
    _r.jpg" alt="">

<a href="../index.html">返回首页</a>
    <img src="../images/屏幕截图(2).png" alt="">



十六、第十六部分



16.1内容一



跳转锚点（本页内跳转）

在这里插入图片描述

#号

id属性 

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#Javascript">Javascript</a>
    <h2  id="html"> HTML超文本标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2 id="css">CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <h2  id="Javascript">JS脚本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>

#号

name属性 

<a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#Javascript">Javascript</a>

    <a name="html"></a>
    <h2> HTML超文本标记语言</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="css"></a>
    <h2>CSS层叠样式表</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <a name="Javascript"></a>
    <h2>JS脚本</h2>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>
    <p>模拟段落</p>



十七、第十七部分



17.1内容一



特殊笔记

在这里插入图片描述

&+字符

（避免冲突，加入多个空格）



十八、第十八部分



18.1内容二



无序列表


<ul><li>

列表的最外层容器、列表项

type属性：改变前面标记的样式

值 描述
dise 默认值，实心圆
circle 空心圆
square 实心方块



18.2内容二



小练习

<ul>
        <li><a href="#"><strong>啦啦操</strong></a></li>
        <li><a href="#">啦啦操</a></li>
        <li><a href="#">啦啦操</a></li>
        <li><a href="#">奔驰</a></li>
    </ul>



十九、第十九部分



19.1内容一



有序列表

<ol><li>
值 描述
1 默认值，数字有序列表（1、2、3、4）
a 按字母顺序排列的有序列表，小写（a、b、c、d）
A 按字母顺序排列有序列表，大写（A、B、C、D）
i 罗马字母，小写（i,ii,iii,iv）
I 罗马字母，大写（I,II,III,IV）



19.2内容二



小练习

 <ol>
    <li><a href="#">都说</a></li>
    <li><a href="#">我的啦啦操</a></li>
    <li><a href="#">夜空中最亮的星</a></li>
   </o<li>



二十、第二十部分



20.1内容二



定义列表

<dl>:定义列表
<dt>:定义专业术语
<dd>：对名词进行解释和描述



20.2内容二



创建定义列表

 <dl>
        <dt>html</dt>
        <dd>超文本标记语言</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
        <dt>Javascript</dt>
        <dd>网页脚本语言</dd>
    </dl>


版权声明：本文为maxiaoxiaohaohao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。