IT新手入门,零基础学IT,转行做IT,IT行业的职位选择,你我一同探讨!

IT新手入门网给你介绍IT行业的职位有哪些,让你转行做IT不发愁,IT入门有捷径

当前位置: 主页 > 技能提升 > HTML5/前端互联网工程师 > html5自学-html5基础入门(第一天)

html5自学-html5基础入门(第一天)

时间:2017-01-22 09:09来源:原创 作者:恪己 点击:
第一阶段: HTML5Basic - H5 CSS3Basic(CSS3基础) PROJECT01(项目:京东首页) CSS3CORE(CSS3高级) PROJECT02(项目:京东详情页 + WEBUI切图) JAVASCRIPTBASIC(JS基础) 第二阶段: JAVASCRIPTCORE(JS核心) DOM(Document Ob
第一阶段:
HTML5Basic - H5
CSS3Basic(CSS3基础)
PROJECT01(项目:京东首页)
CSS3CORE(CSS3高级)
PROJECT02(项目:京东详情页 + WEBUI切图)
JAVASCRIPTBASIC(JS基础)
第二阶段:
JAVASCRIPTCORE(JS核心)
DOM(Document Object Model)
JQUERY
第三阶段:
HTML5CORE(HTML5核心)
SERVER&HTTP(服务器端)
AJAX(异步提交请求)
第四阶段:
BOOTSTRAP(框架:HTML+CSS)
ANGULARJS(MVC)
WEB APP
WEIXIN
JSFRAMEWORK
 学习方法:
1、练-反复敲代码
2、背-英语单词
3、复习 和 预习 工作
***********************************
HTML5Basic Day01
一、Web基础知识(了解)
   1、Web 与 Internet
      1.1 Internet
         互联网、网络、因特网 ...
 服务: Telnet,Email,WWW,BBS,FTP
   资源共享
 基本实现技术:
   1、分组交换原理
   2、TCP/IP协议簇
      1.2  WEB与Internet
1、WEB
   是一种应用在Internet上的一种流行的应用程序-网页应用程序
   www(World Wide Web)
   W3C-World Wide Web Consortium(万维网联盟)
   功能:将信息和服务连接
服务:Telnet,Email,BBS
信息:文字,图片,音频,视频
   2、WEB的工作原理
     1、基于 浏览器/服务器 模式(B/S)
1、B/S
   B : Browser 浏览器
   S : Server 服务器
   通过 浏览器 来访问 服务器信息的一种方式-WEB
2、C/S
   C : Client 客户端
   S : Server 服务器
   通过 指定的客户端 来访问 服务器信息的一种方式
   QQ
     2、组成
        由 WEB服务器、浏览器、通信协议 组成
WEB服务器:配置高的电脑
浏览器:客户端工具
通信协议:http(Hyper Text Transfer Protocol)-超文本传输协议
   3、WEB的相关技术
     1、WEB服务器
       1、功能
          存储WEB上的内容信息,并且提供管理环境
  响应浏览器的请求,执行服务器端程序
  安全性功能
       2、产品
  TOMCAT
  IIS
  APACHE(php)
  ...
       3、技术
          php
  jsp(Java Server Page)
  asp
  asp.net
     2、WEB浏览器
       1、功能
  1、代理用户提交请求
     (User Agent  --> UA)
  2、作为HTML解释器和内嵌脚本的执行器
  3、用图形化的方式显示HTML文档
       2、产品
          1、IE -> Microsoft Internet Explor
  2、Firefox -> Mozilla Firefox
  3、Safari -> Apple
  4、Chrome -> Google
  5、Opera -> 欧鹏
       3、技术
  1、HTML
  2、CSS
  3、Javascript
二、HTML快速入门(重点)
   1、HTML概述
      1、什么是HTML
         HTML : Hyper Text Markup Language 超文本标记语言
 超文本:超级文本
    a : 第一个字符
    超文本a : 超链接
 标记:<a>
 语言:表现形式,语法规范
 HTML用来设计网页的语言
 由HTML所编写的文件,以.html或.htm作为后缀
   2、HTML基础语法
      1、标记语法
1、什么是标记
   HTML中用于描述功能的符号称之为"标记"
   ex:
    <p></p> - 段落
    <a></a> - 超链接
    ... ...
2、语法
   标记在使用时必须用尖括号<>括起来
   分类:
     1、封闭类型标记
        也叫作 双标记,必须成对出现
语法
<标记></标记>
<p></p>
<a></a>
<div></div>
     2、非封闭类型标记
也叫作 空标记或单标记
语法
<标记>或<标记/>
ex:
  <img> - 图像
  <br> - 换行
  <hr> - 水平线
      2、元素
         也称之为 标记
 标记:实际上是语法规范
 元素:强调的是标记中的内容
 <div>这是一个div</div>
      3、元素嵌套
元素之间可以实现嵌套,从而表现出更为复杂的页面结构
<div><p>这是一个被嵌套的段落</p></div>
注意:
  1、嵌套位置和顺序
     <div><p></div></p>
  2、被嵌套的内容要通过"代码缩进"来表示层级结构
     <div><p>这是一个p</p></div>
     <div>
     <p>这是一个p</p>
     </div>
     <div>
<p>这是一个p</p>
     </div>
      4、属性 和 值
         1、作用
   修饰元素
 2、语法
   1、属性的声明必须位于开始标记中
   2、一个元素可以有多个属性,多个属性之间用空格隔开,并且排名不分先后
   3、每个属性都可以有值,值和属性之间用 = 连接。值最好要放在引号中('' 或 "")
   ex :
align 属性 :控制文本的水平对齐方式,
取值:
 1、left :左对齐
 2、center :居中对齐
 3、right:右对齐
  问题:控制 一个p标记的文本,是水平居中对齐
  <p align='center'>This is a p</p>
  在以上的基础上,设置 p元素的id属性值为 p1
  <p align='center' id="p1">This is a p</p>
 3、标准属性
    所有的元素都具备的属性,称之为标准属性或通用属性
    id:定义元素在网页中独一无二的标识
    title:鼠标移入到元素上的时候,所弹出的文字
    class:定义元素所引用的类选择器(CSS中使用)
    style:定义元素的内联样式(CSS中使用)
      5、注释
1、什么是注释
   允许出现在网页源码中,但是不会被浏览器所解释的文本,称之为注释。
 
   通常情况下,会将 对代码的解释文本放在注释中,以便让其他的开发者去看。
2、注释的语法
   <!-- 注释内容  -->
   注意:
     1、注释不能嵌套
        <!--
  <!-- -->
-->
     2、注释不能出现在<>中
        <p <!-- align="center" -->></p>
以上写法是错误的。
      6、HTML 和 XHTML
         1999年12月24日 W3C推出HTML4.01标准规范
 2000年1月26日 W3C推出XHTML1.0标准规范
 XHTML1.0 版本 以 HTML4.01几乎相同,但是它是更严格更纯净的HTML版本
 比如:
   1、要求标记必须要关闭
      <p></p>
      <br/>
   2、要求属性值必须用引号引起来
      <p align=center></p>(html4.01和html5中都可以)
      7、HTML5(H5)
         h5的目标,为了实现更加简洁的HTML代码

     

------分隔线----------------------------
栏目列表
推荐内容