众所周知,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=”合并的单元格” 合并的单元格属于上方的行
|
正在阅读:传智播客详解HTML5与标签传智播客详解HTML5与标签
2017-09-05 18:04
出处:其他
责任编辑:huangying2