首页 > 代码库 > web前段学习2016.6.6

web前段学习2016.6.6

目前上网的方式:
手机
平板
电脑
移动端:智能手机、平板
PC:电脑、笔记本
运行在移动端的东西:APP
ios:object-c
android:java
pc端的东西:桌面应用程序 c++

我们上网的方式都是通过浏览器打开地址来进行上网


前端是做网页开发的,也能做app开发,跨平台

前端是做能看得见摸得着的东西

常见的系统:
ios:
android:
windowsPhone:

windows
Mac OS X

linux
...


------------------------------------------------
前端之网页开发

网页开发:前端开发+后台开发

前端:呈现数据
后台:管理数据

html:网页的内容、网页结构---结构层
css:负责网页的样式---表现层
javascript:是一种专为网页交互的脚本语言---行为层

HTML:超文本标记语言
目前最新版本为HTML5,用得最广泛的是HTML4

------------------------------------------------
如何来编辑HTML?
用记事本编辑--->修改后缀名(扩展名)--->用浏览器运行


浏览器

浏览器内核:渲染引擎、javascript解析引擎

渲染引擎:主要是用来渲染HTML、CSS
javascript解析引擎:专门用来解析javascript

浏览器:
Firefox(火狐)---Gecho
IE(Internet Explorer)---Trident
Chrome(谷歌)---Webkit
Safari(苹果)---Webkit
Opera(欧朋)---Presto/Blink

HTML文档结构
<html>
<head>
<title></title>
</head>
<body>
主要战场
</body>
</html>

一张网页里面只有一对html标签、head标签、body标签、title标签
------------------------------------------------
HTML的语法

html标签(标记)

单标记 <tag/>

双标记 <tag></tag>

html的属性

<tag 属性名1="属性值1" 属性名2="属性值2" .../>

<tag 属性名1="属性值1" 属性名2="属性值2" ...>---起始标记(标签)
内容
</tag>---结束标记(标签)

<耳朵 宽度="250cm" 高度="500cm"></耳朵>

 

 

HTML的注意事项
1 必须要符合基本语法
2 必须要定义文档类型
<!DOCTYPE html>
DOCTYPE:document type

<body></body>
background=‘图片路径‘---表示背景图片
图片:.jpg .png(透明图片) .gif(动态图)。。。

路径---
绝对路径:相对于磁盘的路径,物理路径
相对路径:文件相对于网页源文件的位置
同级关系:直接引用文件名
上一级关系:../图片名
下一级关系:文件夹名/图片名
-------------------------------
一 文本格式标签
换行标签
<br/>
特殊字符标签
&lt; < (left)
&gt; > (right)
&nbsp; 空格
&quot; "
&copy; 版权号

计算机的单位
基本单位:字节(B) 一个字符占一个字节,一个汉字占两个字节
最小单位:位(bit)
1B=8bit
1kb(千字节)=1024B
1MB(兆字节)=1024kb

标题标签
<hn></hn>,n:1---6,逐级变小
<h1></h1>
特点:字体加粗,自动换行

段落标签
<p></p>
特点:自动换行
属性:
align="left/right/center",水平对齐方式

预编译标签
<pre></pre>
特点:原样输出,自动换行

水平分割线标签
<hr/>
属性:
color="颜色"
size="5px/5%",设置水平分割线的粗细
width="50px/50%",设置水平分割线的宽度
align="left(居左)/right(居右)/center(居中)",水平对齐方式
特点:自动换行

二 字符格式标签---不换行
<b></b>----文本加粗
<i></i>----文本倾斜
<u></u>----下划线
<s></s>----删除线
<small></small>---字体变小

<font></font>---字体标签
属性:
size=n,n:1----7,逐级变大,改变字体大小
color="颜色",改变字体颜色
face="黑体",设置字体类型,默认为宋体

图片标签
<img/>
属性:
src="http://www.mamicode.com/路径",设置图片路径
width="100px",设置图片的宽度
height="100px",设置图片的高度
title="相关提示信息",设置鼠标悬停时显示的文字描述
alt="相关提示信息"

 

web前段学习2016.6.6