正在阅读:传智播客详解HTML5与标签传智播客详解HTML5与标签

2017-09-05 18:04 出处:其他 作者:佚名 责任编辑:huangying2

众所周知,HTML5的设计目的是为了在移动设备上支持多媒体,改变用户与文档的交互方式。下面,传智播客将从HTML5和标签进行详细解读。

一、 Html简介

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

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

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

标记 : 标志,一个符号

标记的写法 皆有 < 标记  >

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

语言 : 直接被浏览器解析

注意:

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

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

国际W3C组织(万维网联盟)制定的

3. 传智播客详解HTML5与标签—HTML5的诞生

w3c和whatwg(web超文本技术工作组)两个组织合作的结果

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

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

html5=html+css+javascript+api

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

4. 传智播客详解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) 字体 字号  样式 行距的设置

2) 代码颜色设置

3) 语法代码颜色的设置

4) 模板的设置

5) 默认测试浏览器设置

注意:把浏览器的路径复制出来

选择浏览器---单击右键---属性----快捷方式里面有一个  --目标—把路径复制出来不要 “”

二、 Html标签详解

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

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

双标签:开始标签和结束标签构成 ,内容的开始和结束标签之间

语法:<标签>  内容

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

单标签:只有开始标签,结束用在开始标签的末尾加  / 符号

语法: <标签>

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

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

html head title body

保存  -----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=”字体”

语气加强

语气加强

下划线

上标

下标

大一号

小一号

需求:输入一段文字   前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里面使用的多

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

标题一 标题自己会占一行

..

标题六

下面的两个标签会在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 说明

1) 绝对地址(网络地址)

单击链接可以直接找到目标文件  http://

2) 相对路径

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

在该文件夹下的操作

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

内容

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

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

l 目标文件在当前文件下级目录

把所有的文件夹一次写出来

xx/xx/xx.html

521文件夹  ----里面 ----修正文件夹----里面  管理后台文件夹------管理妹妹.html

1. html

把文件夹名写出来 后面加/

521/修正/管理后台/管理妹妹.html

l 目标文件在当前文件的上级

../表示上一级

../../两级

3) 特殊链接

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

.html  .jpg  .png 不用下载

l 邮件链接:

<a href=mailto:邮箱的地址>举报邮箱

<a href=mailto:meimei@163.com>链接内容

l 空链接(#)

有链接的样式,在当前的页面,

l Js链接  

<a href=””>关闭窗口

如果浏览器无法关闭

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) 定义列表重点

格式

标题

烹饪锅具 菜百

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来设置

效果

效果

效果

的属性

l 行的高度  height=”数值”

l 行的背景色 bgcolor=”颜色值”

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

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

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

效果

注意:有背景图片的优先级高于背景颜色

和属性

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

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

l 单元格的背景色 bgcolor=”颜色值”

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

单元格左右合并

大图片

小图片小图片小图片

colspan=”合并的单元格数”

下面的案例

单元格上下合并

rowspan=”合并的单元格”

合并的单元格属于上方的行

关注我们

最新资讯离线随时看 聊天吐槽赢奖品