一章 职业规划和前景
第二章 html基本结构
<html> <head></head> <body></body> </html>
第三章 html基本标签
<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>
onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滚动速度)
第四章 img图片标签与路径
第五章 三种列表的讲解
<ul> <li></li> <li></li> <li></li> </ul>
<ol> <li>内容一</li> <li>内容二</li> <li>内容三</li> </ol>
<ul> <li>柚子 <ul> <li>沙田柚</li> <li>蜜柚</li> </ul> </li> <li>荔枝</li> <li>苹果</li></ul>
<ol> <li>茶 <ul> <li>红茶</li> <li>绿茶</li> </ul> </li> <li>果汁</li> <li>牛奶</li></ol>
<dl> <dt>pc网页制作</dt> <dd>学习DIV+CSS JS JQ 项目实战</dd> <dt>手机网页制作</dt> <dd>手机网页制作实战</dd> </dl>
<dl> <dt>中国城市</dt> <dd>北京 </dd> <dd>上海 </dd> <dd>广州 </dd> <dt>美国城市</dt> <dd>华盛顿 </dd> <dd>芝加哥 </dd> <dd>纽约 </dd> </dl>
第六章 表单元素(上)
<form> <input type="text"/> </form>
<form action="html.do" method="get"> username: <input type="text" name="user" /> <input type="submit" value="提 交" /> </form>
<form> <input type="hidden" name="hid" value="value"> </form>
<input type="text" name="" value="今天心情不错" /> <input type="radio" name="" value="" checked="checked"> <input type="checkbox" name="" value="" checked="checked"> <select name="" > <option value=""></option> <option value="" selected="selected"></option> <select>
<p>单向选择</p> <label for="male">男:</label><input type="radio" name="sex" id="male"/> <label for="nv">女:</label><input type="radio" name="sex"checked="check"/>
第七章 表单和表格(下)
<form> <select name="" id=""> <option value="1">1月</option> <option value="2">2月</option> </select> </form>
<table border="1"> <tr> <td>姓名</td> <td>性别</td> </tr> </table>
<table border="1"> <tr> <td>姓名</td> <td>性别</td> </tr> <tr> <td>姓名</td> <td>性别</td> </tr> </table>
<table border="1"> <tr> <td >姓名</td> <td>性别</td> <td>爱好</td> </tr> </table>
第一部分总结:
HTML部分导图总结
学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料,一起学习,一起成长!
庆假期很适合学习点新知识。前几天有粉丝在后台问我关于使用 js 开发后端服务的建议,我给推荐了这一个面向小白的走向全栈开发工程师的教程。
这是一个面向零基础的基于 JavaScript 语言的全栈开发教程,教程基于目前流行的前后端分离开发模式,使用 Vue.js + Node.js 并且通过从实际需求的角度来完成基础的业务代码,没有过多功能封装,几乎都是底层的代码,通俗易懂,上手容易。
教程截图
这套 JavaScript 全栈教程的作者是廖雪峰,是一位有着超过十年软件开发经验的大神,精通 Java / Python / Ruby / Visual Basic / Objective C 等,对开源框架有很深入的研究,著有《Spring 2.0核心技术与最佳实践》一书,是很多后端开发工程师非常熟知的业内大神。
因为针对的是对 javascript 零基础的小白用户,因此这个教程有很大篇幅是 javascript 语言入门。
这是我毫无后端开发经验时学习后端开发的入门的教程,这套教程让我学会了如何使用 javascript 来开发后端 api 接口。而且前面的基础语法教程,也看得津津有味,复习了很多不会用、不常用但很巧妙的代码实现。这是我推荐这个教程的最大原因。
教程截图
这个教程除了适合零基础的小白,我认为这更像一个写给后端开发者的、从其他后端语言转 javascript 的教程,如果像我之前学习的那样没有过后端开发经验,就需要注意几个问题:
入门靠老师,修行靠自己。总的来说,这只是一套非常基础的入门教程,学完后能够了解前端开发和后端开发,可以实现简单的 demo,可以帮助我们学习 koa / egg.js 这类基于 Node.js 的后端开发框架,但后端开发需要学习的知识很多,数据库设计、查询优化、架构设计等等,成为一个合格的全栈工程师,路还有很远。
这是一个完全免费的 JavaScript 全栈入门教程,就算完全不懂 js 也能快速入门,在线免费学习。如果想学 js 语法,也可以看看之前推荐过的阮一峰写的免费 javascript 系统学习入门教程。
最后祝各位有所收获,迈进全栈开发工程师行列。
关注我,持续分享高质量的免费开源、免费商用的资源。
↓↓点击查看本次分享的网址。
JavaScript 全栈开发入门 - 由廖雪峰提供的面向小白的免费在线教程|那些免费的砖
1272208556@qq.com
1、HTML + CSS + UI
2、Javascript
3、HTML5CORE + AJAX + Jquery
4、Bootstrap,Angular JS + 其他框架
1、HTML + CSS3BASIC + PRO + UI + PRO + CSS3CORE + PRO
======================================================
1、Internet
1、什么是Internet
是全球性计算机互联网络,是由若干终端(PC,移动端)以及特殊的传输介质而组成的一个网络结构
PC:Personal Computer
2、提供的服务
信息共享
Telnet : 远程连接
Email : 电子邮件
WWW : 万维网 www.baidu.com
BBS : 电子公告板 ,论坛
FTP : 上传和下载服务
3、实现技术
1、分组交换原理:数据通过数据包进行传递,到达目的地后,对数据包进行重组
2、TCP/IP 协议簇
2、WEB
1、什么是WEB
就是 WWW(World Wide Web)
w3c : www consortium 万维网联盟
2、能干什么
能够将各类的信息和服务进行连接,提供图形用户界面
信息:文字、图片、音频、视频
服务:Telnet, FTP , Mail , HTTP ...
3、万维网就是无数的文档集合(网页文档),文档会驻留在世界(互联网)的任何一个角落
3、WEB的工作原理
WEB是基于Internet的多媒体信息服务系统
1、基于 浏览器 / 服务器 模式
B / S : Browser / Server
在服务器上,主要以网页的形式发布多媒体信息
2、由WEB服务器、浏览器、通信协议组成
3、WEB 相关技术
1、服务器端技术(后台)
PHP,JSP,ASP 。。。 。。。
2、客户端技术(前端技术)
HTML,
CSS,
Javascript
=========================================================
1、HTML 入门
1、什么是HTML
HTML(Hyper Text Markup Language),超级文本标记语言
超文本:
a
标记 : 超文本都是由标记组成的
<a>
语言 : 包含自己独特的语法
HTML最终由浏览器负责解释
HTML总可以嵌入一些脚本语言编写的程序段:Javascript,VBScript
2、HTML版本
超级文本标记语言(第一版)
HTML2.0
HTML3.2
HTML4.0
HTML4.01
XHTML1.0
HTML5
3、标签(标记)
1、标签语法
1、必须使用尖括号扩起来
<a>,<div> ...
<A>,<a>
2、有封闭类型的标签,也有非封闭类型的标签
1、封闭类型
也称作双标记,则必须成对出现
<标记>文本内容</标记>
不同的标记,决定了"文本内容"的不同表现形式
eg:<a></a>,<p></p>,<div></div>
2、非封闭类型
也称作单标记、空标记
<标记>
或者
<标记/>
eg:
<hr>,<br>,<img>
3、元素
标记就是元素,元素也称为标记
4、元素嵌套(标签嵌套)
标签之间相互嵌套,形成复杂的语法结构
<body>
<p>
<a></a>
</p>
</body>
5、属性
属性是出现在开始标记中的内容,作用是修饰元素
<p 属性名="属性值"></p>
<p 属性名='属性值'></p>
<p 属性名=属性值></p>
标准属性:每个元素都会具备的通用属性
id : 定义每个标签的唯一标识
title:提示文本
class:样式相关,类样式
style:样式相关,行内样式
操作1:定义一对p标签,id属性设置为program
<p id="program"></p>
多属性:
<p 属性1="值" 属性2="值"></p>
注意:多属性之间,排名不分先后
2、创建HTML文档
开发工具:任何一个文字编辑软件都可以开发HTML
EditPlus : 超级记事本
运行环境:任何一个浏览器都能运行HTML
Google Chrome,Mozilla Firefox,Microsoft IE,Safari,Opera
超文本文件(HTML文档):
是一个以.html或.htm结尾的文档
3、文档结构
1、文档类型声明
声明使用的html版本和风格
<!doctype html>
2、html页面
1、文档根元素
每个文档有且仅有一对根元素 , html
2、在根元素的内部,包含两对子元素
1、head : 页面的头部内容
定义页面全局信息
包含:
<title></title> : 网页标题
<meta />:声明元数据(编码,关键字,描述)
<style></style>:声明内部样式表
<link />:引入外部样式表
<script></script>:定义或引入脚本文件
2、body : 页面的主体内容
任何一个标签,都可能会出现在body中
3、head元素
1、声明网页标题
<title></title>
2、定义网页文本编码格式
默认:ISO-8859-1,只支持英文以及英文状态下的标点符号
utf-8:支持中英文,标点符号
<meta charset="utf-8" />
3、... ...
4、body元素
属性:
text : 文本的颜色
bgcolor : 背景颜色
练习1:
1、为body添加两个属性,text,bgcolor
2、文本颜色 : 红色(red)
背景颜色 : 银色(silver)
3、在body中随意写上一段文本,观察页面显示效果
5、文本标记
1、特殊的文本
转义字符:
空格:
< : < less than
> : > greater than
版权标识:©
2、文本标记
1、文本样式
<b>...</b> : 加粗文本
<i>...</i> : 斜体文本
<u>...</u> : 下划线
<s>...</s> : 删除线
<sup>...</sup> : 上标
<sub>...</sub> : 下标
2、标题元素
1-6级6个标题
<hn></hn> n:1-6
一级最大
六级最小
3、段落元素
提供了结构化文本的表现方式
语法:<p></p>
注意:
1、每对p标签单独成一个段落
2、段落与其他元素有垂直空白,段落间距
常用属性:
align : 水平对齐方式
取值:left center right
4、换行元素
在代码的任何位置处,实现回车的效果
<br />
5、水平线
又叫分割线
<hr />
属性:
1、size : 水平线的粗细,通常以像素(px)为单位
2、width: 宽度
3、align: 水平线的水平对齐方式
4、color: 颜色
6、分区元素
目的:为元素进行分组,多数用在布局中
块分区元素:<div></div> 层
行内分区元素:<span></span>
注意:
div :主要用在布局上
span:修改其内部内容的样式
7、预格式化
保留源文档中的空格和回车
<pre>
文本内容
</pre>
3、注释
可以写在html源码中,但不被浏览器解释的文本
语法:
<!-- 注释内容 -->
4、行内元素与块级元素
块级元素:默认情况下,块级元素独占一行,元素的前后都会自动换行 div,hn,hr,p
块级元素作用:布局
行内元素:默认情况,多个元素位于同一行,不会换行
span,文本标记... ...
行内元素作用:修改内部内容的样式
*请认真填写需求信息,我们会在24小时内与您取得联系。