web前端学习笔记（一）

最新推荐文章于 2024-03-18 16:14:22 发布

邓坤元

最新推荐文章于 2024-03-18 16:14:22 发布

阅读量3.4w

点赞数 88

分类专栏： web前端文章标签：前端

本文链接：https://blog.csdn.net/pxhdky/article/details/81268125

版权

web前端专栏收录该内容

5 篇文章 25 订阅

订阅专栏

web前端的定义：是面向用户（浏览者）的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。

Web前端的分类：前端设计和前端架构。

HTML结构语言：超文本标记语言。

通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。

特点：通过浏览器来解析、文件名为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进制代码前面必须有#号
如果一个属性有多个值，值与值之间用空格分隔
如果指定多个方向值，则按照上右下左（顺时针方向）的顺序依次排列

邓坤元

关注

88
点赞
踩
422

收藏

觉得还不错? 一键收藏
5
评论
web前端学习笔记（一）

web前端的定义：是面向用户（浏览者）的互联网技术统称。主要包括Web界面的结构、Web界面的外观视觉表现以及Web界面的交互实现。Web前端的分类：前端设计和前端架构。 HTML结构语言：超文本标记语言。通过各种标记符号（标签）来代表网页中的内容元素、将网页中的内容结构化。特点：通过浏览器来解析、文件名为html或htm。 2. CSS样式语言（样式表）：实现表...
复制链接

扫一扫