目前上网的方式:
手机
平板
电脑
移动端:智能手机、平板
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="路径",设置图片路径
width="100px",设置图片的宽度
height="100px",设置图片的高度
title="相关提示信息",设置鼠标悬停时显示的文字描述
alt="相关提示信息"

web前段学习2016.6.6的更多相关文章

  1. web前段学习2017.6.15

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...

  2. web前段学习2017.6.13

    CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  5. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  6. Android 工程师如何快速学会web前段

    Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  9. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

随机推荐

  1. SQLyog-12.4.2版下载,SQLyog最新版下载,SQLyog官网下载,SQLyog Download

    SQLyog-12.4.2版下载,SQLyog最新版下载,SQLyog官网下载,SQLyog Download >>>>>>>>>>> ...

  2. MSSQL-Scripter,一个新的生成T-SQL脚本的SQL Server命令行工具

    这里向大家介绍一个新的生成T-SQL脚本的SQL Server命令行工具:mssql-scripter.它支持在SQL Server.Azure SQL DB以及Azure SQL DW中为数据库生成 ...

  3. 使用Dockerfile构建镜像-Docker for Web Developers(5)

    1.理解Dockerfile语法 语法命令 命令功能 举例 FROM 所有的dockerfile都必须以FROM命令指定镜像基于哪个基础镜像来制作 FROM ubuntu:14:04 MAINTAIN ...

  4. Linux中重定向

    转:http://blog.csdn.net/songyang516/article/details/6758256 1重定向 1.1      重定向符号 >               输出 ...

  5. java虚拟机学习-深入理解JVM(1)

    1   Java技术与Java虚拟机 说起Java,人们首先想到的是Java编程语言,然而事实上,Java是一种技术,它由四方面组成: Java编程语言.Java类文件格式.Java虚拟机和Java应 ...

  6. 【Java并发系列03】ThreadLocal详解

    img { border: solid 1px } 一.前言 ThreadLocal这个对象就是为多线程而生的,没有了多线程ThreadLocal就没有存在的必要了.可以将任何你想在每个线程独享的对象 ...

  7. 谈一谈Java8的函数式编程 (三) --几道关于流的练习题

    为什么要有练习题?    所谓学而不思则罔,思而不学则殆,在系列第一篇就表明我认为写博客,既是分享,也是自己的巩固,我深信"纸上得来终觉浅,绝知此事要躬行"的道理,因此之后的几篇博 ...

  8. R实现地理位置与经纬度相互转换

    本实例要实现目标通过输入城市名或者地名,然后找出其经度纬度值,以及通过可视化展现其线路流向以及周边地图展示 address_list数据: 山西省太原市小店区亲贤北街77号 贵州省贵阳市云岩区书香门第 ...

  9. Java经典编程题50道之十二

    企业发放的奖金根据利润提成:利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成, 高于10万元的部分 ,可提成7.5%:20万到40万之间 ...

  10. Redis中的数据结构与常用命令

    开发系统:Ubuntu 17.04Redis驱动:StackExchange.Redis 1.2.3Redis版本:3.2.1开发平台:.NET Core 对于Redis的介绍这里只写一句:Redis ...