前端中怎么把网页多个文件夹的内容整合成一个_web前端学习笔记
web前端的定义：是面向用户（浏览者）的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。
HTML结构语言：超文本标记语言。
Web前端的分类：前端设计和前端架构。
通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。
特点：通过浏览器来解析、文件名为html或htm。
2. CSS样式语言（样式表）：实现表现与结构分离的样式设计语言。
控制网页的视觉表现及简单交互。通过浏览器来解析，文件名为css。
3. DW编码软件（dreamwaver）
两大主要功能：网页编程和管理网站。推荐版本：CS6/CC。
相关资源：1.HTML参考手册+CSS参考手册 2.DW软件安装 3.多款浏览器
网站的结构
网站是存放在服务器上的一个文件夹（根目录），是网站所有文件的集合。
网站中的各种文件按照文件类型或功用分门别类的整理存放。
文件的命名规则
网站中的所有文件命名全部用英文字母、数字、下划线、连字符的组合，其中不得包含汉字、空格和特殊字符。
尽量采用语义明确简单地英文单词命名。
常见命名
文件/文件夹 常见命名
静态首页文件 index/default
图片文件夹 img/images
样式表文件夹 css/styles
脚本文件夹 js/scripts
字体文件夹 fonts
模板文件夹 templets
媒体文件夹 medias
DW：建站/管理网站
1.文件面板
2.新建（关联）站点
新建web文件
html静态网页文件（类型为HTML5）
CSS样式表文件
编码视图
使用代码视图敲代码
使用真实浏览器查看页面效果
通过代码的缩进/凸出排版
通过标签选择区查看层级关系
html语言的注释方法
<!--注释内容-->
HTML文档基础结构
<!--html语言中的注释-->
<!doctype html><!--html文档的文档类型声明：这是一个html的文档，版本是5-->
<html><!--html标签：html文档正式开始-->
<head><!--html文档的头部区域开始，主要是用来说明html文档的一些相关属性或者设置-->
<meta charset="utf-8"><!--meta标签：元信息标签，用来给网页添加一些相关信息或设置。charset:字符集。指定此网页的编码为UTF-8-->
<!--常见的编码：国际化——utf-8,中文编码——GBK-->
<title>无标题文档</title><!--title标签：设定此网页的标题-->
</head><!--html文档的头部区域结束-->
<body><!--body标签：表示html文档的主体区域开始，对应浏览器的对应呈现窗口-->
</body><!--body标签：表示html文档的主体区域结束-->
</html><!--html标签：html文档正式结束-->
HTML语法结构
1种符号：<> 所有的HTML语言diamante都必须被括在其中
2种标签格式：
双标签：成对出现。<标签名>开始，</标签名>结束。如：<title>无标题文档</title> 通常用于包含内容的元素。
单标签：只存在开始标签，不需要结束。如：<meta charset="utf-8"> 表示无内容元素。
3个组成部分：标签、属性、值：
语法结构：<标签名 属性=“值” 属性=“值”>...</标签名> 如：<meta charset="utf-8">
标签可以拥有属性，属性和值都卸载开始标签的尖括号中。
标签和属性之间用空格分割，多个属性之间也用空格分隔。
如果属性有对应的值，则属性和值之间是等式关系，且值需要写在英文引导中。
HTML编写规范
标签名和属性都使用小写
属性的值用双引号括起来
标签的使用符合嵌套规则
为网页添加css样式的三种引用方式：
行间样式：通过标签的style属性来设定css样式，css代码位于html标签的标记中。css样式仅对当前使用的标签有效。
内联样式：将css放在页面的head区域中，使用<style>标签进行调用。css样式仅对当前页面有效，不能跨页面使用。
<style type="text/css">
h1{font-size:12px; color:#000fff;}
</style>
外链样式：单独创建css样式文件（.css），在网页的head区域通过<link>标签关联css文件。<link>标签的rel属性指定为stylesheet，href属性指定css文件的路径。外链样式实现了html结构与css样式完全分离，多个网页可以调用1个样式文件表，以实现代码的最大限度重用及网站文件的最优化配置。
<link rel="sytlesheet" href="css文件的路径">
Q：如果三种引用方式同时存在并作用于一个html标签对象的时候，哪种被优先使用呢？
A：相同级别情况下，离被设置元素越近优先级别越高。（就近原则）
行间样式（标签内部）>内嵌样式（当前文件中）>外链样式（外部文件）。（因为习惯于先写外部链接，再写内部链接）
CSS基础语法结构
组成部分：对象{样式声明}
基本格式：选择符{ 属性:值;}
选择符即CSS样式要作用的html对象
样式声明必须被括在花括号{}当中
样式声明由样式属性和对应值两部分组成
样式声明的属性和值之间用冒号:分隔
样式表明用分号;结束
选择符（对象）：以html标签作为附件CSS的对象，有多种对象类型：标签本身（标签名称，如div等）、标签的特定属性（id或class）、标签的某种状态（伪类）。
<!doctype html>
<html>
<head>
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet">
<style>
#first-p { background:#FF0000;}<!--用#号后面表示的是id的名字-->
.text-2em{text-indent:2em;}<!--用.后面是个类别的名字-->
</style>
</head>
<body>
<div><!--新闻标题-->
<p id="first-p" class="text-2em">第一个10年 金砖合作怎么样？</p>
<p class="text-2em">金砖机制的诞生和发展，是世界经济变迁和国际格局演变的产物。</p>
</div>
</body>
</html>
属性（样式声明）：根据不同的视觉表现方式进行分类，如文本的设定、尺寸的设定、色彩的设定。
值（样式声明）：根据样式声明的属性的不同类型，有对应的取值及单位，如色彩的值、尺寸的单位、方向的值。
CSS常用选择符
1. 标签选择符：标签名称
直接以html标签的标签名作为选择符对象；如h1{ font-size:20px;}；主要用于对网页文档中的基础标签进行统一的标准化设定。
2. id选择符：#id名
以html标签的唯一标识符id属性的值作为对象。html语言中：id属性是html标签的通用属性，但id值的命名是唯一的，不允许重复。在css语言中，#代表后面的名称是id值，id选择符主要用于针对具有唯一性的html对象。
HTML部分 CSS部分
给标签添加id属性 用#号+id值作为选择符对象
<h1 id="newstitle">...</h1> #newstitle {...}
3. class类选择符：.class名
将一组css样式归纳成为一个类，作为css应用的对象。html语言中：class属性是html标签的通用属性，可以定义多个类，类名之间用空格分隔。css语言中：class选择符主要用于需要调用相同css样式的多个html对象。
HTML部分 CSS部分
给标签添加class属性 用.号+class值作为选择符对象
<h1 class="red-text">...</h1> .red-text {...}
优先级关系：id选择符>class选择符>标签选择符
id和class的命名规则：
1. id属性和class属性的值命名都为自定义
2. 不允许用数字开头，不允许使用特殊字符
3. 命名最好具有语义化，可使用-或者_来连接词组（主流使用-）
CSS组合选择符
1. 通配选择符：*
适配文档中的所有html对象；用于定义html文档中所有对象的基础样式（消除浏览器默认设置的基础样式）；根据就近原则，要放在css代码的首行；最常见的用法：*{margin:0;padding:0;} /*消除所有html标签默认存在的内外边距*/
2. 包含选择符：父级对象a 子级对象b
根据html对象的嵌套关系，指定某个父级元素的子级元素样式；选择符对象可以是多重包含，即一层层的包含下去，样式仅作用于最后的内部对象。元素对象之间用空格分隔。
如：div p { color : red ;} /*div对象中的所有p对象被指定了红色的样式*/
#box p a { color : blue ; } /*id为box的对象中的p对象中的a对象被指定蓝色样式*/
3. 群组选择符：对象a，对象b，对象c......
将同样的样式用于多个选择符对象，选择符对象之间用逗号隔开。这里的对象并不一定得是标签，可以是class，id等
4. 指定选择符：标签名.class类名
将class类选择符和标签选择符结合在一起使用。主要适用于在使用了某个class类的所有html对象中特别指定某一类标签。如：<h1>和某个<p>标签调用了important这个类，但是只想给调用了important的p对象添加样式时使用。
CSS属性和值
《CSS参考手册》，其中绿色的属性需要掌握。
常见的取值：
数值单位——px（像素）/em（倍数）/%（百分比）
方向——top（上）/right（右）/bottom（下）/left（左）/center（中间）
色彩——16进制代码（#RRGGBB或#RGB）/基本色彩单词（如红色：red）
引用路径——格式为：url（文件路径）
值的一些写法规则：
表示长宽高的数值必须带上单位
表示色彩的16进制代码前面必须有#号
如果一个属性有多个值，值与值之间用空格分隔
如果指定多个方向值，则按照上右下左（顺时针方向）的顺序依次排列
前端中怎么把网页多个文件夹的内容整合成一个_web前端学习笔记相关推荐
- debian 文件夹中文件大小_linux查看目录（文件夹）内容大小
习惯Terminal没有不知道ls命令的(等同于DOS的dir),经常只是需要查看目录的内容大小,但ls -h显示的只是目录的本身大小,而且很多项内容 ls 在这方面的两个诟病出现了: 小诟1. 显示 ...
- 如何快速将多个文件夹下内容合并到一个文件夹下
在需要合并的文件夹路径下新建一个文件夹和txt文件,均命名为all 打开all.txt,输入如下内容: for /f "delims=" %%p in ('dir /b/ad') ...
- 将多个文件夹下内容合并到一个文件夹下
将上面文件夹的东西全部复制到all文件夹中,先创建all空文件夹,创建txt文件 txt文件中的代码如下,然后将txt文件重命名为.bat文件,双击打开即可 for /f "delims=& ...
- Mac的访达中，如何只搜索当前文件夹的内容？
Finder 访达使用教程:设置搜索时搜索当前文件夹在Finder右上角搜索时,默认是搜索[这台Mac],是Mac全盘,因为搜索全盘速度慢且浪费时间,大部分时候是想默认搜索当前文件夹,可以按下面进行设 ...
- opt文件夹下没有ros_ubuntu16.04下ROS操作系统学习笔记（二）
做SLAM的硬件要求(不一定是必须的,看包和库的依赖): (1):差分轮式机器人,可以使用Twist速度指令控制,需要线速度和角速度. (2):需要激光雷达.深度摄像头等测距设备,可以获取环境深度信息 ...
- 【IDEA】关于 IDEA 中新建 web 项目的 webapp 文件夹没有小蓝点 ，启动服务，访问不到解决方案
[IDEA]关于 IDEA 中新建 web 项目的 webapp 文件夹没有小蓝点 ,启动服务,访问不到解决方案 参考文章: (1)[IDEA]关于 IDEA 中新建 web 项目的 webapp 文 ...
- 批量替换一个文件中的文件名，例如将文件夹中s**_abnormal.jpg文件修改为s**_abnor.jpg
文章涉及到StringAbout::开头的函数具体实现参考:string与Cstring字符串类型转换和其他操作总结 CProcessFile::开头的函数实现参考:文件读写操作工具类CProcess ...
- Windows 10系统中，如何重命名用户文件夹
免责声明 该方法不适用于所有情况,可能导致数据丢失.计算机无法重启等问题,请提前保护好数据! 背景 许多Windows用户总是喜欢将文件放在用户文件夹(C:\Users\username)下,但有时候 ...
- html中怎么在新窗口打开文件夹,如何解决文件夹总是在新窗口打开 三种办法解决文件夹总是在新窗口打开...
之前用电脑打开文件夹时,都是在同一窗口,很方便,但是,不知何故,每次打开文件夹时,都会创建一个新窗口,如果文件路径很短,还只有二三个窗口,如果路径很长,要打开七八个窗口,甚至更多,而且后面还要一个一个 ...
最新文章
- Java NIO学习系列七：Path、Files、AsynchronousFileChannel
- 实现Telnet远程登录，利用Wireshark抓包分析
- repl java9_Java 9抢先体验：与JShell进行动手实践– Java REPL
- cfiledialog 保存 扩展名_儿童美术：油画棒 插画一组超萌的大饼脸小孩 保存了跟小朋友一起画吧...
- Python除了不会生孩子，什么都会
- java去掉重复字符_Java实现去掉字符串重复字母的方法示例
- 编写算法判别给定二叉树是否为完全二叉树_推荐一位实力超强的平安前端算法大佬：瓶子君...
- js 判断数组是否是递增的
- 春季高考计算机专业知识归纳,春季高考计算机试题总结分析
- 淘宝在线客服为什么回复那么慢
- 爬虫漫游指南：浏览器指纹
- ArcGIS水文分析实战教程（2）ArcGIS水文分析工具的基本原理
- (++a)+=(a++)和(++a)=(++a)+(a++)的区别
- android 断电自动关机,Android 断开电源10秒后自动关机
- adb命令将应用安装为系统应用
- Vue中父子之间的通信
- 【转载】风控-风控策略逻辑
- linux终端下如何分屏,linux下终端分屏使用的两种方法（screen和tmux）
- Github上如何精确搜索开源项目
- 添加 retweet button