欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  一、HTML5
 
  HTML: HTML4.01 版本(1999.12-2014)
 
  HTML5:H5
 
  二、web基础知识(了解)
 
  1.web与Internet
 
  Internet:全球性的计算机互联网络,简称因特网,互联网,交互网。
 
  提供的服务:
 
  www服务:world wide web通过网络的方式去访问网站(万维网)
 
  Email:电子邮件
 
  BBS:电子公告板,俗称论坛
 
  FTP:文件的上传下载
 
  telnet:远程登录
 
  2.Internet上的应用程序
 
  < 1>c/s 程序
 
  c:client
 
  s:server
 
  通过指定的客户端连接服务器的程序(桌面应用程序)
 
  代表:qq,网络游戏,.exe程序
 
  <2>b/s 程序
 
  b:browser 浏览器
 
  s:server 服务器
 
  通过浏览器去访问服务器
 
  代表:网站
 
  3.web应用程序
 
  web:运行在internet之上的一种B/S结构的应用程序,俗称网站。
 
  web的作用:将各类信息和服务进行无缝的连接,并提供生动形象的用户界面。
 
  web的工作原理:基于浏览器和服务器以及通信协议来实现数据的传输和展示。
 
  通信协议:规范了数据是如何传递和打包。
 
  服务器:
 
  <1>功能
 
  存储web信息,并提供程序的运行环境
 
  接收用户请求并给出响应
 
  具备一定的安全功能
 
  <2>服务器产品
 
  TOMCAT(JAVA)
 
  APACHE
 
  IIS
 
  <3>服务器技术
 
  Java/php /ASP.NET/python/NODE.JS(前端技术:操作数据库)
 
  4.浏览器:
 
  <1>.功能
 
  代理用户提交请求(UA:User Agent)
 
  解析HTML,CSS,js,以图形化的方式展示给用户
 
  三、.HTML快速入门
 
  1.什么是HTML?
 
  HTML:HyperText Markup Language 超文本标记语言
 
  a:普通字母
 
  HTML的特点:
 
  1.用带有尖括号的“标记”来标识
 
  2.以.html或.htm为后缀
 
  3.由浏览器解析执行
 
  4.可以嵌套脚本语言(javascript)
 
  2.HTML基础语法
 
  <1>标记
 
  标记,又称元素或标签,在网页中表示一些功能。
 
  标记在使用时,必须使用<>括起来,标记分为两种:
 
  1.封闭类型(双标记)
 
  必须成对出现,有开始和结束标记
 
  语法:<标记>内容</标记>
 
  ex:
 
  正确
 
  错误
 
  2.非封闭类型(单标记)
 
  也称为空标记,只有一个标记,既表示开始又表示结束。
 
  语法:<标记>或<标记/>
 
  ex:
 
  练习:
 
  新建一个txt文档,将文档的后缀改为.html,然后在文档中编写如下代码
 
  1.写一对
 
  2.写一对
 
  3.写一对
 
  4.写一个
 
  <2>标记的嵌套
 
  1.什么是嵌套
 
  在一对标记中出现另外一对(个)标记,从而形成功能的层叠。
 
  2.语法
 
  <标记>
 
  <标记>
 
  <标记/>
 
  </标记>
 
  </标记>
 
  ex:
 
  嵌套注意问题:
 
  1.嵌套顺序,换行缩进
 
  2.成对出现,去嵌套其它的标记
 
  <3>属性和值
 
  属性作用:修饰标记
 
  语法:
 
  <标记 属性名称1=“值1” 属性名称2=“值2”><标记/>
 
  要求必须写在开始标记中,属性和值之间用等号连接,如果有多个属性,属性之间用空格隔开。
 
  ex:
 
  设置段落标记对齐方式为居中对齐
 
  标准属性(通有属性):
 
  id:定义元素在页面中独一无二的标识
 
  style:在css中,定义行内样式
 
  class:在css中,引用类选则器
 
  title:鼠标悬停时元素上所提示的文字
 
  <4>注释
 
  语法:
 
  注意:
 
  1.注释不能嵌套
 
  2.也不能出现在标记中
 
  四、HTML文档结构
 
  1.HTML文档的声明
 
  文档的声明:<!doctype html>
 
  作用:告诉浏览器HTML的版本类型
 
  2.HTML页面结构
 
  根标记:
 
  在根标记中包含网页头和网页主体:
 
  网页头: 定义网页的全局信息
 
  网页主体: 显示网页的所有内容
 
  3.head元素
 
  head是其它头元素的容器
 
  4.body元素
 
  显示网页的所有内容
 
  修饰body的属性:
 
  text:定义整个网页的文字颜色
 
  bgcolor:定义网页的背景颜色
 
  五、文本标记(重点)
 
  1.特殊字符
 
  用一些转义字符来表示特殊的符号
 
  空格
 
  < 表示<
 
  > 表示>
 
  @
 
  ¥ ¥
 
  × 关闭符号x
 
  2.文本样式标记
 
  3.标题元素
 
  语法:
 
  特点:
 
  1.改变字体的大小
 
  2.加粗显示
 
  3.标题元素自带上下空白间距
 
  4.独占一行
 
  属性:
 
  align:设置内容水平对齐方式
 
  取值:
 
  left:左
 
  center:中
 
  right:右
 
  4.段落标记
 
  语法:
 
  特点:
 
  1.独占一行,并且上下文之间有空白间距
 
  2.字体无加粗和大小变化
 
  属性:
 
  align:设置内容在水平方向的对齐方式
 
  取值:left/center/right
 
  5.换行标记
 
  语法:
 
  6.分割线
 
  语法:
 
  属性:
 
  1.width 宽度,表示水平线的宽度,取值为px或%的数值。
 
  2.align 水平线对齐方式,取值:left/center/right
 
  3.size 表示水平线的尺寸(高度),取值为px或%的数值。
 
  4.color 水平线的颜色,取值为合法的颜色值
 
  7.预格式化
 
  作用:用于保留html代码中回车和空格
 
  语法:
 
  8.分区元素
 
  1.块分区元素
 
  作用:用于页面的布局
 
  语法:
 
  特点:单独成行
 
  2.行分区元素
 
  作用:处理同一行文本的不同样式
 
  语法:
 
  特点:包裹的内容在一行中显示
 
  9.行内元素与块级元素
 
  1.块级元素
 
  在页面中独占一行,从上往下排列的元素
 
  常见的块级元素:
 
  h1-h6,p,div,列表,结构标记
 
  2.行内元素
 
  多个元素在一行中显示,从左往右排列的元素
 
  常见的行内元素:
 
  span,i,b,u,s,sup,sub
 
  10.图片和链接
 
  (1)URL:统一资源定位器
 
  用于表示网络中的任意资源的位置
 
  (2)路径的表现形式
 
  A.绝对路径(完整路径)
 
  网络资源:协议+主机+目录结构+文件名称
 
  本地路径:从最高盘符处开始去查找
 
  B.相对路径(用的比较多)
 
  从当前文件所在位置开始查找资源所经过的路径,就是相对路径
 
  同级目录:直接引用 ex:
 
  子级目录:先进入,再引用 ex:
 
  父级目录:先返回,再引用 ex:
 
  C.根相对路径
 
  永远是从web站点的根目录处开始查找
 
  ex:
 
  (3)图像格式
 
  .jpg 压缩比率大
 
  .png 背景透明
 
  .gif 动画
 
  (4)图像元素
 
  语法:
 
  属性:
 
  src :指定要显示图像的URL
 
  width:指定宽度
 
  height:指定高度
 
  alt:图片不能正常加载时显示的文字
 
  注意:如果需要修改图片的尺寸,一般只修改一个属性即可,因为是锁定比例。
 
  (5)链接
 
  语法:
 
  属性:
 
  href :指定跳转的路径
 
  target:指定打开新网页的方式
 
  取值 _blank:在心得标签页中打开新网页;_self:默认值,在当前网页中打开新的网页
 
  链接的其他表现形式:
 
  a.资源下载
 
  让链接的URL,链接到rar/zip的文件即可。
 
  b.电子邮箱链接
 
  c.返回页面的顶部
 
  d.链接到js
 
  (6)锚点:网页中一个记号,可以通过超链接跳转到记号位置处
 
  a.定义锚点
 
  <1>使用a标签中的name属性进行定义
 
  <2>使用任意元素的id属性定义锚点
 
  b.链接到锚点
 
  <1>链接到当前页面的锚点
 
  <2>链接到其他界面 的锚点

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h60313.shtml