网站前端制作技术 第1篇
HTML文档标签是由一对尖括号包含的关键字表示,如、
1、HTML标签通常是成对出现如( ,
这是一个段落
示例:
这是一个测试段落1
这是一个测试段落2
原价=199
现价=168
网站前端制作技术 第2篇
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
现在文件拷贝到项目中
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
设置背面是否可见 例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
例如:
网站前端制作技术 第3篇
网页分成三个部分: 结构(HTML) 表现(css) 行为(JavaScript)
网页实际上是一个多层的结构,通过css可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层,总之一句话,CSS用来设置网页中元素的样式
在标签内部通过style属性来设置元素的样式
问题: 使用内联样式,样式只能对一个标签生效,如果希望影响到多个元素必须在每一个元素中都复制一遍并且当样式发生变化时,我们必须要一个一个的修改,非常的不方便 注意:开发时绝对不要使用内联样式
将样式编写到head中的style标签里,然后通过CSS的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式,并且修改时只需要修改一处即可。 内部样式表更加方便对样式进行复用
问题: 我们的内部样式表只能对一个网页起作用它里边的样式不能跨页面进行复用
可以将css样式编写到一个外部的css文件中,然后通过link标签来引入外部的CSS文件。 外部样式表需要通过link标签进行引入,意味着只要想使用这些样式的网页都可以对其进行引用使样式可以在不同页面之间进行复用
将样式编写到外部的css文件中,可以使用到浏览器的缓存机制从而加快网页的加载速度,提高用户的体验。
CSS中的注释,注释中的内容会自动被浏览器所忽略
选择器,通过选择器可以选中页面中的指定元素
比如 p 的作用就是选中页面中所有的p元素
声明块,通过声明块来指定要为元素设置的样式 声明块由一个一个的声明组成,声明是一个名值对结构,一个样式名对应一个样式值,名和值之间以:
连接,以;
结尾
作用: 根据标签名来选中指定的元素
语法: 标签名{}
例子: p{}
h{}
div{}
作用: 根据元素的id属性值选中一个元素
语法: #id属性值{}
例子: #boxf{}
#red{}
作用: 根据元素的class属性值选中一组元素
语法: .class
属性值
同一个元素可以指定多个class,多个class之间用空格隔开
注意点: 交集选择器中如果有元素选择器,必须使用元素选择器开头
作用: 同时选择多个选择器对应的元素
语法: 选择器1,选择器2,选择器3,选择器n{}
例如: #b1,.p1,h1,span,{}
注意: 1.并集选择器,我们一般竖着写 2.任何形式的选择器,都可以作为并集选择器的一部分 3.并集选择器,通常用于集体声明,可以缩小样式表体积
作用: 选中指定元素中符合要求的后代元素
语法: 选择器1 选择器2 选择器3 选择器n{}
例如: #b1 .p1 h1 span div .red{}
注意: 1.后代选择器最终选中的是后代,不选中祖先 2.儿子、孙子、重孙都属于后代 3.结构一定要符合之前讲的html嵌套要求,例如:不能p
元素中写h1~h6
作用: 选中指定元素中符合要求的子元素(儿子元素)。(先写父,再写子)
语法: 选择器1>选择器2>选择器3>选择器n{}
例如: #b1>.p1>h1>span>div>.red{}
注意: 1.子代选择器最终选择的是子代,不是父级 2.子、孙子、重孙子、重重孙子…统称为后代,子就是指儿子。
作用: 选择属性值符合一定要求的选择器
语法:
例子:
什么是伪类? 很像类,但不是类,是元素特殊状态的一种描述。
作用: 选中特殊状态的元素
如何理解“伪”?- 虚假的,不是真实的 如何理解“伪类”?- 像类(class),但不是类,是元素的一种特殊的状态。
:link
超链接未被访问
的状态
:visited
超链接访问过
的状态
:hover
鼠标悬停
在元素上的状态
:active元素激活
的状态
什么是激活状态?——按下鼠标不松开 注意:遵循LVHA
的顺序,即:link
,visited
,hover
,active
。
:focus
获取焦点的元素
网站前端制作技术 第4篇
一般来说网站项目分为两种【前后端不分离、前后端分离】,其中前后端不分离的项目是(后端语言可以直接与前端的html等内容糅合在一起,后端语言可以操作数据进行动态渲染前端的html文件进行展示)。前后端分离的项目是(后端语言不会直接对前端的html文件进行动态渲染,而是后端语言直接将处理好的数据给到前端的javascript代码,javascript代码将数据动态渲染到html文件中;目前国内比较流行的前端框架有:Vue Angular React 官方中文文档)。
CSS),或功能与行为(如 JavaScript)。
网站前端制作技术 第5篇
例如:
汉字转拼音的网站: