《传智播客HTML5与标签详解》由会员分享，可在线阅读，更多相关《传智播客HTML5与标签详解（15页珍藏版）》请在金锄头文库上搜索。
1、传智播客 传智播客:HTML5 与标签详解html css 样式javascriptbootstrap一、 Html 简介1. Html 简介Html 全写（ hypertext mark-up language） 超文本标记（标签）语言 超文本：在文本的基础上添加了更加丰富的信息（图片 动画 视频 音乐）标记 ： 标志，一个符号标记的写法 皆有 标签有两层含义：表型 表意 语言 : 直接被浏览器解析 注意：2. xhtml 的曲折之路xhtml 全称 (EXtensible HyperText Markup Language),即可扩展的超文本标记语言)国际 W3C 组织（万维网联盟 ）制定
2、的3. HTML5 的诞生w3c 和 whatwg(web 超文本技术工作组) 两个组织合作的结果 WHATWG 应用程序工作组 firefox ie opear safari chrome 查浏览器的特传智播客 点 html5 移动设备（手机端，平板）html5=html+css+javascript+apihtml5 的特点 :宽松，标签有语义化 后期会讲4. 第一个网页 会的ctrl+s 文件 下- 保存 -文件的扩展名 .html 注意，静态网页文件扩展名 .html 动态网页文件扩展名： .php5. 增强的文本编辑器一个好的代码编辑器，可以提高工作效率 ，代码编辑去分成两类 增强文
3、本编辑器：小巧，操作简单，文本的颜色 ，有缩进，没有代码的提示，editplusnotepad+ IDE 集成环境编译器 :开发软件 ，功能强大，有代码提示sublime zend studio dreamweaver 5.1Editplus 编辑器的快捷键ctrl+c 复制ctrl+v 粘贴ctrl+s 保存5.2 Editplus 设置：1) 字体 字号 样式 行距的设置传智播客 2) 代码颜色设置3) 语法代码颜色的设置传智播客 4) 模板的设置5) 默认测试浏览器设置注意：把浏览器的路径复制出来选择浏览器-单击右键-属性-快捷方式里面有一个 -目标把路径复制出来不要 “”传智播客 二、
4、 Html 标签详解1. html 标签语法HTML 标签的语法，大致分两类：双标签：开始标签和结束标签构成 ，内容的开始和结束标签之间属性: 人 特征: 体重=”180” 身高=”190” 性别=”男”单标签：只有开始标签，结束用在开始标签的末尾加 / 符号语法： 注意：大多数标签都是双标签语法： 内容 传智播客 2. 主体标签html head title body 保存 -xx.html案例：建立一个空页面，页面的标题是 论坛 - 传智云课堂1) HTML 网页文件结构说明html 告诉浏览器如何解析网页的内容head 告诉浏览器网页的汉字设置什么样的字符集，如果使用字符集不正确，出现乱
5、码gb_2312 简体中文 utf-8 多国语言 字符集的由来和设置在汉字操作 ，默认的字符集是 gb_2312 title 优化body 99% 写在该 body 中3. 文字标签设置文本的字体 大小 颜色color 文本的颜色 color=”red” color=”green” color=”#ff00ff”size =”大小 ” 号为单位face=”字体”语气加强 语气加强 传智播客 下划线上标下标大一号小一号 需求： 输入一段文字 前 10 个字 ，文本颜色为蓝色，文本加粗，文本加下划线中午效果第一个作业 精神障碍是常见病 患者过亿 安倍赴美“朝贡”如履薄冰 伊万卡 特朗普最大的软实力
6、第二个作业4. 排版标签段落 段落的属性align=”left / center /right” 换行 单标签 水平线 ：内容和版权进行分割 水平线的属性 color =”颜色值 ” 只适用于 IE size 粗细 width 宽度 width=”70%” width=”600”固定 align=“left/center/right” noshade 去掉阴影课间作业搜狐的html 使用的不多，PHP 里面使用的多把内容在浏览器中原样输出 空格和换行传智播客 标题一 标题自己会占一行.标题六下面的两个标签会在 css 样式中用5. XHTML 标签的书写规则 Html 标记不区分大小写,w3c
7、 规定使用小写 标记可以拥有若干个属性(包括 0 个)， ，是由 w3c 标准制定的 属性值用双引号引起 “ ” 单标记 一定要闭合，单标签一般没有内容 双标记的内容放到开始标记和结束标记之间 html 的标记可以相互嵌套，但是一定要注意是顺序嵌套，不能交叉嵌套6. 超链接标签(重点)格式属性 href =”链接的地址”target=”_blank” 新的窗口打开目标文件target=”_self” 默认的打开方式，在原来的窗口打开（原有的窗口覆盖）name 链接的名称 讲title 说明 上网站上使用的最多的标签之一，本身没有意义，自己独占一行，必须结合 css 样式 构成功能 div+cs
8、s网上用的最多的标签之一 ，本身没有意义，不是自己独占一行 结合 css 样式构成功能链接的内容传智播客 1) 绝对地址（网络地址）单击链接可以直接找到目标文件 http:/2) 相对路径建立文件夹 ，把页面都放入该文件夹中在该文件夹下的操作 同一个目录下的文件 ,直接输入文件名就可以 内容 1.html 里面内容有 搜狐首页 -单击搜狐首页，跳转到 2.html2.html 里的内容 搜狐娱乐新闻 目标文件在当前文件下级目录 把所有的文件夹一次写出来 xx/xx/xx.html 521 文件夹 -里面 -修正文件夹-里面 管理后台文件夹-管理妹妹.html1. html把文件夹名写出来 后面
9、加/ 521/修正/管理后台 /管理妹妹.html 目标文件在当前文件的上级./表示上一级././两级3) 特殊链接 下载链接：.rar .exe .zip.html .jpg .png 不用下载 邮件链接：举报邮箱链接内容 空链接（# ）有链接的样式，在当前的页面，传智播客 Js 链接 关闭窗口 如果浏览器无法关闭4) 锚点链接跳转到页面的某个区域 ，跳转到哪1 锚点记号在之间不加内容2 跳转到记号跳转7. 图像标签 单标签 img 图片的属性 src =“图片的路径”width=”宽度”height=”高度值”alt=“说明”8. 列表标签（重点）列表：就是若干个相似的内容排列出来 1)
10、 （项目符号）无序列表: 就是若干个相似的内容排列出来,没有先后顺序传智播客 html 代码 css 代码 js 代码 ul 的属性type=”circle” type=”square” 方形2) （编号列表）有序列表就是若干个相似的内容排列出来,有先后顺序1. html 代码2. css 代码3. js 代码ol 属性type=”a/A/i/I”start=”从第几个开始”3) 定义列表重点格式html 代码 css 代码 js 代码 html 代码 css 代码 js 代码 标题烹饪锅具 菜百 传智播客 9. 表格表格的属性 表格的边框 border=”数值” 默认是 0 表格的边框颜色
11、 bordercolor=”颜色值” 表格的宽度 width=”数值 ” 表格水平对齐方式 align=”left/center/right” 表格背景色 bgcolor=”颜色 ” 表格的背景图片 background=”图片的地址” 注意：背景图片的优先级高于背景颜色 单元格边框和内容之间的距离 cellpadding=”数值” 默认是 2 单元格和单元格之间的距离 cellspacing=”数值” 默认是 2 合并单元格边框线 rules=”all” 细线 css 来设置效果内容内容内容内容内容内容传智播客 效果效果的属性 行的高度 height=”数值” 行的背景色 bgcolor=”
12、颜色值 ” 行的背景图片 background=”图片的地址” 行水平居中 align=”left/center/right” 左中 右 行的垂直居中 valign=”top/center/bottom” 上 中 下 效果注意：有背景图片的优先级高于背景颜色和属性 单元格的宽度 width=”数值 ” 单元格的高度 height=”高度值” 单元格的背景色 bgcolor=”颜色值” 单元格的背景图片 background=”图片的地址”单元格左右合并 传智播客 大图片小图片 小图片 小图片colspan=”合并的单元格数”下面的案例单元格上下合并rowspan=”合并的单元格”合并的单元格属于上方的行32332传智播客 2
