Web前端入门学习(1)——走进前端世界

前端基础知识

  1. 前端开发语言

    HTML(Hypertext Markup Language):超文本标记语言;

    CSS(Cascading Style Sheets):层叠样式表;

    JS(JavaScript):脚本语言。

  2. 样式表:

    行间样式表、内部样式表、外部样式表。

  3. 样式

    样式格式:属性名:属性值;

    常见样式:

    border:1px solid red

    border-width:1px

    border-style:solid

    border-color:red

    常见颜色模式:

    关键字:red yellow blue white...

    rgb:(123,12,44)

    十六进制:#3f3f3f

  4. 盒子边框

    border-top:1px solid red

    border-right:1px solid red

    border-bottom:1px solid red

    border-left:1px solid red

  5. 背景

    background-color

    background-image

    background-repeat:(no-repeat repeat-x repeat-y repeat inherit)

    background-position(top right bottom left 30px 20px 50% 30% inherit)

    background-attachment:(srcoll fixed inherit)

    background复合:blue url(./a.img) no-repeat 20px 30px fixed;

  6. 文字设置

    font-weight:(normal bold bolder lighter 100~900(normal:400,blod:700) inherit)

    font-style:(normal italic oblique inherit)

    font-size:字体大小

    line-height:行高

    font-family:元素字体

    font复合:font-style font-weight font-size/line-hight font-family

  7. 文本设置

    color

    text-align

    text-indent

    text-decoration

    letter-spacing

    word-spacing

    white-space:(normal pre nowrap pre-wrap pre-line inherit)

  8. 超链接

    a:link 未访问过的链接;

    a:visited 已访问过的链接;

    a:hover 鼠标放在链接上时;

    a:active 链接被点击的那一刻;

    规则:a:hover必须放在a:link和a:visited后面,a:active 必须放在a:hover后面。

    download下载:点击下载href指定的地址内容。

    target:_blank _self _parent _top filename

    base标签:在<head>头部为页面上所有链接规定默认目标。

  9. padding填充

    padding-top padding-rihgt padding-bottom padding-left

    padding:15px 20px 18px 25px

    上填充:15px

    右填充:20px

    下填充:18px

    左填充:25px

    padding:10px 20px 15px

    上填充:10px

    左右填充:20px

    下填充:15px

    padding:20px 15px

    上下填充:20px

    左右填充:15px

    填充(内边距):相当于给盒子填充了厚度,会影响盒子的大小。

  10. margin外边距

    margin-top margin-rihgt margin-bottom margin-left

    margin:15px 20px 18px 25px

    上边距:15px

    右边距:20px

    下边距:18px

    左边距:25px

    padding:10px 20px 15px

    上边距:10px

    左右边距:20px

    下边距:15px

    padding:20px 15px

    上下边距:20px

    左右边距:15px

    padding:100px auto 0px

    上边距:100px

    左右边距:居中

    下边距:0px

  11. 盒子模型

    盒子大小:边距、边框、填充、内容。

    盒子宽度:margin-left + border-left + padding-left + width + padding-right + border-right + margin-right;

    盒子高度:margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom;

时间: 2025-01-10 02:46:15

Web前端入门学习(1)——走进前端世界的相关文章

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

Web前端入门学习(5)——浮动原理及清除浮动

浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换.加上display属性,可以指定元素的类型,如display:block.display:inline,以及display:inline-block.当然用得最多的是最后一个display:inline-block.结合例子来看: 例

Web开发入门学习笔记

公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协议 HTTP协议:所有的WWW文件都必须遵守HTTP协议,HTTP是客户端浏览器或者其他程序与Web服务器之间的应用层通信协议.HTTP协议建立在TCP/IP协议,也就是说,是一种可靠的传输协议,意味着两台设备在传输之前必须先建立可靠连接(握手),由客户端发起到服务器端的指定端口(默认为80)HTTP请求,并

Web前端入门学习(6)——浮动例子之鉴赏

浮动例子之鉴赏 在浮动原理及清除浮动一文中(http://cherry360.blog.51cto.com/12176744/1864258),简单介绍了浮动的相关基础知识,为了巩固知识点,本篇结合代码展示关于浮动的几个常见例子. 例1:九格子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九格子</titl

Web前端入门学习(3)——CSS选择器

CSS选择器 id选择器 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{width:200px;height:200px;border:2px solid #f3f3f

Web前端入门学习(4)—— 块级元素和行内元素之特征与转换

块级元素和行内元素  1.元素的定义 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.     div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度

web前端入门到实战:前端高手在CSS 开发效率的必备片段

这篇文章会记录我们平时常用到的 CSS 片段,使用这些 CSS 可以帮助我们解决许多实际项目问题中遇到的,墙裂建议点赞收藏再看,方便日后查找 清除浮动 浮动给我们的代码带来的麻烦,想必不需要多说,我们会用很多方式来避免这种麻烦,其中我觉得最方便也是兼容性最好的一种是,在同级目录下再创建一个<div></div>:不过这样会增加很多无用的代码.此时我们用:after这个伪元素来解决浮动的问题,如果当前层级有浮动元素,那么在其父级添加上 clearfix 类即可. // 清除浮动 .c

java web一些入门学习经验

如果用dos来编译java文件,可能会无法使用javac来编译,究其原因还是配置path环境时,要用jdk绝对路径而不能用相对路径 当然在IDE里用相对路径就可以了 final申明的类不能被继承,方法不能被重写,修饰的变量变成常量,不可被修改 MVC <%--  --%>该注释不会显示在客户端, <!--  -->该注释会显示客户端 JSP内置对象之get和post的比较 1.get:以明文的方式通过URL提交数据,数据在URL中可以看到,提交的数据最多不超过2KB,安全性低但效率

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的