您当前的位置:首页 > 碎言碎语 >

传智播客 详解HTML5与标签

发布时间:2018-01-05 00:20编辑:作者一阅读(

      众所周知,HTML5的规划意图是为了在移动设备上支撑多媒体,改动用户与文档的交互方法。下面,传智播客将从HTML5和标签进行具体解读。

      一、 Html简介

      1. 传智播客详解HTML5与标签—Html简介

      Html 全写(hypertext mark-up language) 超文本符号(标签)言语

      超文本:在文本的基础上添加了愈加丰厚的信息(图片 动画 视频 音乐)

      符号 : 标志,一个符号

      符号的写法 皆有 < 符号 >

      标签有两层意义:表型 表意

      言语 : 直接被浏览器解析

      留意:

    传智播客 详解HTML5与标签

      2. 传智播客详解HTML5与标签—xhtml的弯曲之路

      xhtml 全称 (EXtensible HyperText Markup Language),即可扩展的超文本符号言语)

      世界W3C安排(万维网联盟)拟定的

    传智播客 详解HTML5与标签

      3. 传智播客详解HTML5与光辉世界www.137.com标签—HTML5的诞生

      w3c和whatwg(web超文本技能工作组)两个安排协作的成果

      l WHATWG应用程序工作组 firefox ie opear safari chrome 查浏览器的特色

      html5移动设备(手机端,平板)

      html5=html+css+javascript+api

      html5的特色 :宽松,标签有语义化 后期会讲

      4. 传智播客详解HTML5与标签—第一个网页

    传智播客 详解HTML5与标签

      ctrl+s 文件 下---保存 ----文件的扩展名 .html

      l 留意,静态网页文件扩展名 .html

      l 动态网页文件扩展名: .php

      5. 传智播客详解HTML5与标签—增强的文本修改器

      一个好的代码修改器,能够进步工作效率 ,代码修改去分红两类

      Ÿ 增强文本修改器:细巧,操作简略,文本的色彩 ,有缩进,没有代码的提示,

      editplus

      notepad++

      Ÿ IDE集成环境编译器 :开发软件 ,功用强大,有代码提示

      sublime zend studio dreamweaver

      5.1 Editplus修改器的快捷键

      ctrl+c 仿制

      ctrl+v 张贴

      ctrl+s 保存

      5.2 Editplus设置:

      1) 字体 字号 款式 行距的设置

    传智播客 详解HTML5与标签

    传智播客 详解HTML5与标签

      2) 代码色彩设置

    传智播客 详解HTML5与标签

      3) 语法代码色彩的设置

    传智播客 详解HTML5与标签

      4) 模板的设置

    传智播客 详解HTML5与标签

      5) 默许测验浏览器设置

      留意:把浏览器的途径仿制出来

      挑选浏览器---单击右键---特点----快捷方法里边有一个 --方针—把途径仿制出来不要 “”

    传智播客 详解HTML5与标签

      二、 Html标签详解

      1. 传智播客详解HTML5与标签—html标签语法

      HTML标签的语法,大致分两类:

      双标签:开端标签和完毕标签构成 ,内容的开端和完毕标签之间

      语法:<标签> 内容

      特点: 人 特征: 体重=”180” 身高=”190” 性别=”男”

    传智播客 详解HTML5与标签

    传智播客 详解HTML5与标签

      单标签:只要开端标签,完毕用在开端标签的结尾加 / 符号

      语法: <标签>

      留意:大多数标签都是双标签

      2. 传智播客详解HTML5与标签—主体标签

      html head title body

    传智播客 详解HTML5与标签

      保存 -----xx.html

      事例:树立一个空页面,页面的标题是 论坛 - 传智云讲堂

      1) HTML网页文件结构阐明

      html通知浏览器怎么解析网页的内容

      head 通知浏览器网页的汉字设置什么样的字符集,如果运用字符集不正确,呈现乱码

      gb_2312 简体中文 utf-8 多国言语 字符集的由来和设置

      在汉字操作 ,默许的字符集是gb_2312

      title 优化

      body 99% 写在该body中

      3. 传智播客详解HTML5与标签—文字标签

      设置文本的字体 巨细 色彩

      color 文本的色彩 color=”red” color=”green” color=”#ff00ff”

      size =”巨细” 号为单位

      face=”字体”

    传智播客 详解HTML5与标签

      口气加强

      口气加强

      下划线

      上标

      下标

      大一号

      小一号

      需求:输入一段文字 前10个字 ,文本色彩为蓝色,文本加粗,文本加下划线

      正午作用

      第一个作业

      · 精神障碍是常见病 患者过亿

      · 安倍赴美“朝贡”如履薄冰

      · 伊万卡 特朗普最大的软实力

      第二个作业

      4. 传智播客详解HTML5与标签—排版标签

      阶段

      阶段的特点

      align=”left // center //right”

      换行 单标签

      水平光辉世界线 :内容和版权进行切割

      水平线的特点

      l color =”色彩值 ” 『只适用于IE』

      l size 粗细

      l width 宽度 width=”70%” width=”600”固定

      l align=“left//center//right”

      l noshade 去掉暗影

      课间作业

      搜狐的

      html运用的不多,PHP里边运用的多

      把内容在浏览器中原样输出 空格和换行

    传智播客 详解HTML5与标签

      标题一 标题自己会占一行

      ..

      标题六

      下面的两个标签会在css款式顶用

      上网站上运用的最多的标签之一,自身没有意义,自己独占一行,

      有必要结合 css款式 构成功用 div+css

      网上用的最多的标签之一 ,自身没有意义,不是自己独占一行 结合css款式构成功用

      5. 传智播客详解HTML5与标签—XHTML标签的书写规矩

      l Html符号不区别巨细写,w3c规则运用小写

      l 符号能够具有若干个特点(包含0个),,是由w3c 规范拟定的

      l 特点值用双引号引起 “ ”

      l 单符号 必定要闭合,单标签一般没有内容

      l 双符号的内容放到开端符号和完毕符号之间

      l html的符号能够彼此嵌套,可是必定要留意是次序嵌套,不能穿插嵌套

      6. 传智播客详解HTML5与标签—超链接标签(要点)

      格局

      链接的内容

      特点

      href =”链接的地址”

      target=”_blank” 新的窗口翻开方针文件

      target=”_self” 默许的翻开方法,在本来的窗口翻开(原有的窗口掩盖)

      name 链接的称号 讲

      title 阐明

    传智播客 详解HTML5与标签

      1) 肯定地址(网络地址)

      单击链接能够直接找到方针文件

    传智播客 详解HTML5与标签

      2) 相对途径

      树立文件夹 ,把页面都放入该文件夹中

      在该文件夹下的操作

      l 同一个目录下的文件 ,直接输入文件名就能够

      内容

      1.html 里边内容有 搜狐主页 ---单击搜狐主页,跳转到 2.html

      2.html 里的内容 搜狐文娱新闻

      l 方针文件在当时文件下级目录

      把一切的文件夹一次写出来

      xx/xx/xx.html

      521文件夹 ----里边 ----批改文件夹----里边 办理后台文件夹------办理妹妹.html

      1. html

    光辉世界137  把文件夹名写出来 后边加/

      521/批改/办理后台/办理妹妹.html

      l 方针文件在当时文件的上级

      ../表明上一级

      ../../两级

      3) 特别链接

      l 下载链接:.rar .exe .zip

      .html .jpg .png 不必下载

      l 邮件链接:

      告发邮箱

      链接内容

      l 空链接(#)

      有链接的款式,在当时的页面,

      l Js链接

      封闭窗口

      如果浏览器无法封闭

    传智播客 详解HTML5与标签

      4) 锚点链接

      跳转到页面的某个区域 ,

      跳转到哪

      1 锚点记号

      在之间不加内容

      2跳转到记号

      跳转

      7. 传智播客详解HTML5与标签—图画标签 单标签

      img

      图片的特点

      src =“图片的途径”

      width=”宽度”

      height=”高度值”

      alt=“阐明”

      8. 传智播客详解HTML5与标签—列表标签

      列表:就是若干个类似的内容摆放出来

      1) (项目符号)无序列表:

      就是若干个类似的内容摆放出来,没有先后次序

      l html代码

      l css代码

      l js代码

      html代码

      css代码

      js代码

      ul的特点

      type=”circle” type=”square” 方形

      2) (编号列表)有序列表

      就是若干个类似的内容摆放出来,有先后次序

      1. html代码

      2. css代码

      3. js代码

      html代码

      css代码

      js代码

      ol 特点

      type=”a/A/i/I”

      start=”从第几个开端”

      3) 界说列表要点

    传智播客 详解HTML5与标签

      格局

      标题

      烹饪锅具 菜百

      9. 表格

      内容

      内容

      内容

      内容

      内容

      内容

      表格的特点

      l 表格的边框border=”数值” 默许是0

      l 表格的边框色彩 bordercolor=”色彩值”

      l 表格的宽度 width=”数值”

      l 表格水平对齐方法 align=”left/center/right”

      l 表格布景色bgcolor=”色彩”

      l 表格的布景图片 background=”图片的地址”

      l 留意:布景图片的优先级高于布景色彩

      l 单元格边框和内容之间的间隔 cellpadding=”数值” 默许是2

      l 单元格和单元格之间的间隔 cellspacing=”数值” 默许是2

      l 兼并单元格边框线rules=”all” 细线 css来设置

    传智播客 详解HTML5与标签

      作用

      作用

    传智播客 详解HTML5与标签

    传智播客 详解HTML5与标签

      作用

      的特点

      l 行的高度 height=”数值”

      l 行的布景色 bgcolor=”色彩值”

      l 行的布景图片 background=”图片的地址”

      l 行水平居中 align=”left//center//right” 左中 右

      l 行的笔直居中 valign=”top//center//bottom” 上 中 下

      作用

      留意:有布景图片的优先级高于布景色彩

      和特点

      l 单元格的宽度width=”数值”

      l 单元格的高度 height=”高度值”

      l 单元格的布景色 bgcolor=”色彩值”

      l 单元格的布景图片 background=”图片的地址”

      单元格左右兼并

    传智播客 详解HTML5与标签

      大图片

      小图片小图片小图片

      colspan=”兼并的单元格数”

      下面的事例

      单元格上下兼并

      rowspan=”兼并的单元格”

      兼并的单元格归于上方的行

    传智播客 详解HTML5与标签