- 常见浏览器介绍
1.1 常见浏览器的内核
（面试，移动端开发）---->渲染引擎 & JS引擎
- IE浏览器（Trident）–>edge,360,百度浏览器，猎豹浏览器
- 火狐浏览器（Gecko）—>代码开源
- 谷歌浏览器（Blink 渲染引擎，内置于chrome中，是webkit的分支）
- Edge浏览器（Trident）
- Safari浏览器(webkit)
- Opera浏览器（Opera）
1.2web标准
- 结构(html)标准：整理分类网页元素，xml和xhtml
- 样式(css)标准: 设置网页元素的版式，颜色，大小，外观，主要指css
- 行为(js)标准：网页模型的定义及交互的编写，主要包括DOM和ECMAScript
2.html(超文本标记语言)初识
2.1 骨架格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2.2 标签分类
- 双标签
<标签名>内容</标签名>
- 单标签
<标签名/>
2.3 标签关系(嵌套 ，并列)
- 后代大于兄弟加，注释选择Ctrl /
2.4 文档类型html5<!DOCTYPE>
<!DOCTYPE html>
2.5 字符集
<meta charset="UTF-8">
gb2312 简单中文
GBK gb2312的扩展，包含全部中文字符
2.6 标签语义化(指定标签的含义)---->面试重点
-
非语义元素的例子：
和 ---->无法提供关于其内容的信息。 -
语义元素的例子：、
以及 ---->清晰地定义其内容。
HTML5新语义化标签
header footer main只能出现一次
header :页眉 article :独立的内容
footer ：页脚 aside :辅助信息的内容
main : 主体 figure :描述图像或视频
hgroup ：标题组合 figcaption :描述图像或视频的标题部分
nav :导航 article包含section
section :区域 datalist:选项列表
details/summary: 文档细节/文档标题
progress/meter : 定义进度条/定义度量范围
time ： 定义日期或时间
mark :带有记号的文本
<input type="text" list="elems">
<datalist id="elems">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
</datalist>
<details>
<summary>
html
</summary>
<p>超文本标记语言</p>
</details>
<progress value="5" max="10"></progress>
<meter value="5" max="10"></meter> //根据一个value值会发生颜色的变化
<p>今天是<time title="5-20">5.20</time></p>
<p>今天是<mark>5.20</mark></p>
3.html常用标签
3.1排版标签
3.1.1 标题标签(熟记)
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> //最小到6级
3.2.2段落标签（记）
<p>文本内容</p> //段落不粗，标题粗
3.3.3水平线标签
<hr />单标签
案例：新闻页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>40.6摄氏度：上海创出140年气象史上高温新纪录</h1>
<p>2016年7月27日 10:58:26 来源： 新华网</p>
<hr />
<p>新华网上海７月２６日电（记者李荣）２６日１３时３６分至４７分这一时间段，上海徐家汇气象观测站测得当日最高温达４０．６摄氏度。这是上海有气象记录以来１４０年的高温新纪录，打破了此前１９３４年创下的４０．２摄氏度的历史极值。</p>
<p>上海已经连续２天发出了最高等级的红色高温警报。上海中心气象台首席服务官满莉萍说，今年副热带高压强度特别强，对上海及江南地区的控制“实在太稳定了”，整个７月份基本上都处在它的势力范围之内。２５日上海已出现了气象史上７月份“第四高”的高温值，这使得２６日的“基础”气温就很高，超过了３０摄氏度，然后不断地升温。此外，２６日白天风小，又吹的是西南风，特别是在中午之后这一个最易出现高温的时段，光照又比较强，所以气温“直线飙升”，一举冲破历史极值，出现了“创纪录”的极端酷暑天</p>
<p> 在上海历史上，出现４０摄氏度以上极端高温的几率并不大。根据相关资料，中心城区徐家汇观测站１４０年来仅出现了５次记录，除了这一次的新纪录，还有就是１９３４年７月１２日的４０．２摄氏度；１９３４年８月２５日、２００９年７月２０日、２０１０年８月１３日的４０摄氏度。</p>
<p>由于气温实在太高，上 海２６日下午不少地区出现了热对流天气。气象台说，首先是浦东地区，下起了热雷雨。到１５时０５分，全市大部分地区出现了分散性的雷电活动和热雷雨，中心城区徐家汇等地都响起了隆隆的雷声。</p>
</body>
</html>
3.4.4换行标签
<br />
-
div span标签
-
没有语义，网页布局的两个盒子
3.2 文档格式化标签
标签 显示效果
文字以粗体显示，（XHTML推荐使用strong）
文字以斜体显示，（xhtml用em）
加删除线，(XHTML 用del)
加下划线，（XHTML不赞成U）
3.3标签属性
<标签名 属性1:"属性值1" 属性2:"属性值2" ...>内容</标签名>
<a href="http://www.w3school.com.cn">This is a link</a>
<h1 align="center">
<body bgcolor="yellow">
<table border="1">
3.4 图像标签
属性 属性值 描述
src URL 图像的路径
alt 文本 图像不能显示时的替换文本
title 文本 鼠标悬停时显示的内容
width 像素 图像宽度
height 像素 图像高度
border 数字 图像边框宽度
<img src="" />
<img src="" alt="" />
<img src="" title="" />
<img src="" height="" width="" border="" />
3.5 链接标签(熟练)
<a herf="跳转目标" target="目标窗口的弹出方式">文本图像</a>
<a href="http://www.baidu.com" >百度</a> //外部连接必须http://开头
<a href="xxx.html"></a> //内部连接不必须加http
3.5.1锚点定位(百度百科定位)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>目录</h2>
<hr />
1 早年经历<br />
<a href="#movie">2 演艺经历</a><br />
<a href="#live">3 个人生活</a><br />
4 主要作品<br />
5 社会活动<br />
6 获奖记录<br />
7 人物评价<br />
<h3>早年经历</h3>
<hr />
刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意[17] 。1973年，刘德华随家人搬入香港蓝田邨第15座14楼[18] 。刘德华从黄大仙天主教小学毕业后升读可立中学[19] 。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路[20] 。
<h3 id="movie">演艺经历</h3>
<hr />
1981年，刘德华考进第10期无线电视艺员训练班[21] ；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙[22] ；该剧获得美国电视节电视剧特别奖[23] 。
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB[24] ；同年在
刘德华早期照片
刘德华早期照片(2张)
喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注[25] 。
1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过[26] ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将”[27] 。
电影时代
1981年，刘德华出演电影处女作《彩云曲》，在片中扮演一个音乐班
刘德华电视剧剧照
1993年，在古装片《战神传说》中扮演一个武功超群的渔民[54] ；<br/>
1990年，凭借专辑《可不可以》奠定其在歌坛的地位[112] ；专辑同名主打歌《可不可以》获得第十三届十大中文金曲
刘德华(3张)
华纳唱片公司以后的首张专辑《真我的风采》；该专辑发行后销量达到40万张[119] ；同年，在提前录制的央视春晚视频中，刘德华与毛阿敏合唱歌曲《心中常驻芳华》[120] ；此外，他还发行了专辑《谢谢你的爱》，同名主打歌曲获得第十六届十大中文金曲奖[121] 。
<h3 id="live">个人生活</h3>
<hr />
刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）[158] 。
感情.
<h3>主要作品</h3>
<hr />
参演电影
我的特工爷爷2016-04-01<br/>
饰演李政玖 导演洪金宝 主演洪金宝, 朱雨辰, 李勤勤<br/>
澳门风云32016-02-08<br/>
饰演刀仔 导演王晶 主演周润发、刘德华<br/>
1/3
音乐作品
内容来自
热门歌曲
01. 冰雨
02. 来生缘
03. 天意
</body>
</html>
- 使用 链接文本 创建文本链接 ----->演艺经历
- 使用相应的id 名标注跳转目标的位置------>
演艺经历
3.5.2 base nofollow
<base target = "_blank" /> //让页面中的元素整体都以新窗口的方式打开
3.9 特殊字符标签
3.10 注释标签
// ctrl+/ ctrl +shift+ /4.路径
4.1 相对路径(用的多)
- 同一级,直接图片名
- 隔一层，images/图片
4.2 绝对路径(用的少)—>c:\Users\apple…
5.列表
-
无序列表
- 列表1
- 列表2
- 列表3
-
有序列表
- Coffee
- Milk
-
自定义列表
6.表格
表格由
标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由| 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
<body>
<table border="1" cellspacing="0" cellpadding="6" height="200" width="300" align="center" >
<header>标题</header>
<!-- cellspacing合并单元格，cellpadding单元格内容和单元格撑开 -->
<thead>
<tr>
<th>性别</th>
<th>性别</th>
<th>年龄</th>
<!-- //th为表头标签-->
</tr>
</thead>
<tbody>
<tr>
<td>鸣人</td>
<td>男</td>
<td rowspan="2">跨列合并单元格</td>
<!-- 从上往下删除，合并两个，删除一个 -->
</tr>
<tr>
<td>鸣人</td>
<td>男</td>
</tr>
<tr>
<td>佐助</td>
<td colspan="2">跨列合并单元格</td>
</tr>
</tbody>
</table>
</body>
- html里边没有列，只有行和表格的写法
-
表单和表单控件
名：
姓：
-
表单控件：
用户名:
密 码:
性 别: 女 男 人妖 未知
爱 好: 足球 篮球 乒乓球
搜索：
<input type="image" src="im.jpg" /><!-- 图像按钮 --><br /> 上传头像: <input type="file" /> <!-- 文件按钮 --> </body> -
label标签：绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
-
textarea控件(文本域)
文本内容 -
下拉菜单
选项1 选项2 选项3 -
表单域
用户名：
密 码：
8.html5新增标签和属性
-
常用新标签
语义 :定义页面的头部 页眉 语义: 定义文章 语义： 定义区域
用户登录 标题 用户名:
刘德华
刘若英
刘晓庆
郭富城
张学友
郭郭
密 码: -
新增表单type类型
HTML5新增的INPUT type 类型 那些表单 邮箱:
手机:
数字:
url:
搜索:
区域:
时间:
年月日:
月份:
星期:
颜色:
-
常用新属性
属性 用法 含义
placeholder type=“text” placeholder=“请输入用户名” 占位符 当用户输入的时候 里面的文字消失 删除所有文字，自动返回
autofocus type=“text” autofocus 规定当页面加载时 input 元素应该自动获得焦点
multiple input type=“file” multiple 多文件上传
autocomplete type=“text” autocomplete=“off” 规定表单是否应该启用自动完成功能 有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮
2.这个表单您必须给他名字
required type=“text” required> 必填项 内容不能为空
accesskey type=“text” accesskey=“s” 规定激活（使元素获得焦点）元素的快捷键 采用 alt + s的形式
综合案例
<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label>姓 名：<input type="text" placeholder="请输入姓名："></label><br/><br/>
手机号：<input type="tel" name=""><br/><br/>
邮 箱：<input type="email" name=""><br /><br/>
学 院：<input type="text" placeholder="选择学院:" list="star" />
<datalist id="star">
<option>前端学院</option>
<option>java学院</option>
<option>php学院</option>
</datalist>
<br/><br/>
年 龄: <input type="date"/><br/><br/>
成 绩: <input type="number"><br/><br/>
<input type="submit" name="提交"> <input type="reset" name="重置">
</fieldset>
</form>
</body>
9.多媒体标签
- embed 视频
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。(上传到某一平台，然后通过url调用）
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
-
audio 声音
为了浏览器兼容， 我们需要做三种声音文件 ogg mp3 wav 您的浏览器不支持播放声音
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环 -
video
<body> <!-- <video src="mp4.mp4" autoplay controls></video> --> 我们的视频支持 ogg mp4 webM 三种视频格式 <video controls autoplay> <source src="mp4.mp4"/> <source src="movie04.ogg"/> 您的浏览器不支持视频播放 </video> </body>
10.流程图总结
pdf版本详见本人博客资源下载https://download.csdn.net/download/qq_43464965/18836323
4471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
