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/>
特殊字符标签
< < （left）
> > (right)
空格
" "
© 版权号
计算机的单位
基本单位:字节(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的更多相关文章
- web前段学习2017.6.15
CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...
- web前段学习2017.6.13
CSS---表现层,修饰和表现html文档,为了解决结构层和表现层分离的问题. 通过CSS极大的提高了工作效率,方便工作人员维护和管理CSS:层叠样式表,目前用的最广泛的css版本为css2,最新版本 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- Android 工程师如何快速学会web前段
Android 工程师如何快速学会web前段 今天主要聊一下本人最近在学习web前段的感受,最近html5是越来越火了,前段时间公司做了一个项目然后让我们“android”的程序猿过去帮忙把客户 端框 ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
随机推荐
- 二叉树遍历 C#
二叉树遍历 C# 什么是二叉树 二叉树是每个节点最多有两个子树的树结构 (1)完全二叉树——若设二叉树的高度为h,除第 h 层外,其它各层 (1-h-1) 的结点数都达到最大个数,第h层有叶子结点,并 ...
- Java UDP Socket
本文转载地址: Java学习路上的收获:http://blog.csdn.net/qinpeng100423/article/details/8980423 一. UDP协议定义 U ...
- Eclipse 扩展activiti-desinger 安装
activiti-desinger 工作流画图工具分为在线安装.离线安装两种方式:下图提供当前所用eclipse版本信息 1.1 在线安装 打开Eclipse -> Help -& ...
- 018 关联映射文件中<class>标签中的lazy(懒加载)属性
Lazy(懒加载): 只有在正真使用该对象时,才会创建这个对象 Hibernate中的lazy(懒加载): 只有我们在正真使用时,它才会发出SQL语句,给我们去查询,如果不使用对象则不会发SQL语句进 ...
- vue+vux+axios+vuex+vue-router的项目的理解
本文主要是讲解项目前期的工作,后期考虑再详细说明. 作为一个技术团队如果你们团队选择了上面的技术栈,这说明你们的技术团体对于vue有很熟练的掌握了.在这里我想说明的是前期架构的重要.这里有一遍博客写的 ...
- Redis 小白指南（二）- 基础命令和五大类型：字符串、散列、列表、集合和有序集合
Redis 小白指南(二)- 基础命令和五大类型:字符串.散列.列表.集合和有序集合 引言 目录 基础命令 字符串类型 散列类型 列表类型 集合类型 有序集合类型 基础命令 1.获得符合规则的键名列表 ...
- cookie创建，删除
Cookie 历来指就着牛奶一起吃的点心.然而,在因特网内,“Cookie”这个字有了完全不同的意思.那么“Cookie”到底是什么呢?“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览 ...
- 六一儿童节PHP宝宝又被围剿了，迅速围观！
原文链接 据说这是2020年某国际多语言幼儿园的官方讨论会现场外泄图片,程序员宝宝们,你们同意会议结果吗? 据说这是2020年某国际多语言幼儿园的官方讨论会现场外泄图片,程序员宝宝们,你们同意会议结果 ...
- SignalR来做实时Web聊天
本章和大家分享的内容是使用Signal R框架创建个简易的群聊功能,主要讲解如何在.Net的MVC中使用这个框架,由于这个项目有官方文档(当然全英文),后面也不打算写分享篇了,主要目的是让朋友们在需要 ...
- 【T-SQL进阶】02.理解SQL查询的底层原理
本系列[T-SQL]主要是针对T-SQL的总结. [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础]04.表表达式 ...