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文档基础结构
<!doctype html>
1种符号:<> 所有的HTML语言diamante都必须被括在其中
2种标签格式:
双标签:成对出现。<标签名>开始,</标签名>结束。如:
单标签:只存在开始标签,不需要结束。如: 表示无内容元素。
3个组成部分:标签、属性、值:
语法结构:<标签名 属性=“值” 属性=“值”>…</标签名> 如:
标签可以拥有属性,属性和值都卸载开始标签的尖括号中。
标签和属性之间用空格分割,多个属性之间也用空格分隔。
如果属性有对应的值,则属性和值之间是等式关系,且值需要写在英文引导中。
HTML编写规范
标签名和属性都使用小写
属性的值用双引号括起来
标签的使用符合嵌套规则
为网页添加css样式的三种引用方式:
行间样式:通过标签的style属性来设定css样式,css代码位于html标签的标记中。css样式仅对当前使用的标签有效。
内联样式:将css放在页面的head区域中,使用
外链样式:单独创建css样式文件(.css),在网页的head区域通过标签关联css文件。标签的rel属性指定为stylesheet,href属性指定css文件的路径。外链样式实现了html结构与css样式完全分离,多个网页可以调用1个样式文件表,以实现代码的最大限度重用及网站文件的最优化配置。
Q:如果三种引用方式同时存在并作用于一个html标签对象的时候,哪种被优先使用呢?A:相同级别情况下,离被设置元素越近优先级别越高。(就近原则)
行间样式(标签内部)>内嵌样式(当前文件中)>外链样式(外部文件)。(因为习惯于先写外部链接,再写内部链接)
CSS基础语法结构
组成部分:对象{样式声明}
基本格式:选择符{ 属性:值;}
选择符即CSS样式要作用的html对象
样式声明必须被括在花括号{}当中
样式声明由样式属性和对应值两部分组成
样式声明的属性和值之间用冒号:分隔
样式表明用分号;结束
选择符(对象):以html标签作为附件CSS的对象,有多种对象类型:标签本身(标签名称,如div等)、标签的特定属性(id或class)、标签的某种状态(伪类)。
<!doctype html>
第一个10年 金砖合作怎么样?
金砖机制的诞生和发展,是世界经济变迁和国际格局演变的产物。
属性(样式声明):根据不同的视觉表现方式进行分类,如文本的设定、尺寸的设定、色彩的设定。
值(样式声明):根据样式声明的属性的不同类型,有对应的取值及单位,如色彩的值、尺寸的单位、方向的值。
CSS常用选择符
1. 标签选择符:标签名称
直接以html标签的标签名作为选择符对象;如h1{ font-size:20px;};主要用于对网页文档中的基础标签进行统一的标准化设定。
2. id选择符:#id名
以html标签的唯一标识符id属性的值作为对象。html语言中:id属性是html标签的通用属性,但id值的命名是唯一的,不允许重复。在css语言中,#代表后面的名称是id值,id选择符主要用于针对具有唯一性的html对象。
HTML部分 CSS部分
给标签添加id属性 用#号+id值作为选择符对象
...
#newstitle {...} 3. class类选择符:.class名将一组css样式归纳成为一个类,作为css应用的对象。html语言中:class属性是html标签的通用属性,可以定义多个类,类名之间用空格分隔。css语言中:class选择符主要用于需要调用相同css样式的多个html对象。
HTML部分 CSS部分
给标签添加class属性 用.号+class值作为选择符对象
...
.red-text {...} 优先级关系:id选择符>class选择符>标签选择符 id和class的命名规则:
-
id属性和class属性的值命名都为自定义
-
不允许用数字开头,不允许使用特殊字符
-
命名最好具有语义化,可使用-或者_来连接词组(主流使用-)
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对象中特别指定某一类标签。如:
和某个
标签调用了important这个类,但是只想给调用了important的p对象添加样式时使用。
CSS属性和值
《CSS参考手册》,其中绿色的属性需要掌握。
常见的取值:
数值单位——px(像素)/em(倍数)/%(百分比)
方向——top(上)/right(右)/bottom(下)/left(左)/center(中间)
色彩——16进制代码(#RRGGBB或#RGB)/基本色彩单词(如红色:red)
引用路径——格式为:url(文件路径)
值的一些写法规则:
表示长宽高的数值必须带上单位
表示色彩的16进制代码前面必须有#号
如果一个属性有多个值,值与值之间用空格分隔
如果指定多个方向值,则按照上右下左(顺时针方向)的顺序依次排列