HTML入门
开发工具
Chrome Sublime Photoshop
常用的浏览器
IE Chrome Firefox Safari Opera
看看浏览器市场份额
网站：http://tongji.baidu.com/data/browser
Web标准
一般有三个组成
结构：HTML：对网页元素进行整理和分类
表现：CSS：设置网页元素的板式，颜色，大小等外观样式
行为：JavaScript：网页模型的定义及交互的编写
HTML初识
超文本标记语言 Hyper Text Markup Language
页面的注释标记
<!-- 注释，浏览器不会解析 -->
HTML头部标记
<!-- 声明该文档为HTML5网页 --> <!DOCTYPE html> <!-- lang="en"标记网页的语言 --> <html lang="en"> <!-- 网页的头部信息 --> <head> </head> </html>
标题标记
<!DOCTYPE html> <html> <head> <!-- 设置网页的标题 --> <title>测试</title> </head> </html>
元信息标记
<!DOCTYPE html> <html> <head> <!-- 设置字符编码为"UTF-8" --> <meta charset="UTF-8"> <!-- 设置网页关键字 --> <meta name="keyname" content="关键字"> <!-- 设置网页描述 --> <meta name="description" content="网页描述"> <!-- 设置网页编辑工具 --> <meta name="generator" content="sublime"> <!-- 设置网页作者名字 --> <meta name="author" content="修抗"> <!-- 设置网页定时跳转 --> <meta http-equiv="refresh" content="520;url=https://www.baidu.com"> <!-- 设置有效期限，一旦到期就必须从服务器重新调用 --> <meta http-equiv="expires" content="Web,26 8 1997 12:12:12 GMT"> <!-- 禁止从缓存中调用 --> <meta http-equiv="pragma" content="no-cache"> <!-- 删除过期的cookie --> <meta http-equiv="set-cookie" content="Web,26 8 1997 12:12:12 GMT"> <!-- 强制网页在当前窗口独立显示，防止自己的网页被别人用frame调用 --> <meta http-equiv="windows-target" content="_top"> <!-- 建立网站日期 --> <meta name="build" content="2018-9-8"> <!-- 设置网页版权消息 --> <meta name="copyright" content="XX科技"> <!-- 设置联系人邮箱 --> <meta name="reply-to" content="www.1778895866@qq.com"> <!-- 限制搜索方式 --> <meta name="robots" content="index"> </head> </html>
基底网址标记
<!DOCTYPE html> <html> <head> <!-- 把所有的相对路径替换成绝对路径 _parent在上一级窗口打开 _blank在新窗口打开 _self默认在当前窗口打开 _top在浏览器的整个窗口打开，忽略任何框架--> <base href="https://www.baidu.com" target="_brank"> </head> </html>
页面的主体标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网页的主体</title> </head> <!-- body标记网页的主体 text 设置页面文字的颜色 bgcolor 设置页面背景颜色 background 设置页面的背景图片 bgproperties 设置页面的背景图片为固定的，不随页面滚动而滚动 link 设置页面默认连接颜色 alink 设置鼠标点击时的链接颜色 vlink 设置访问之后的颜色 topmargin 设置页面的上边距 leftmargin 设置页面的左边距 --> <body text="red" bgcolor="blue"> </body> </html>
标题文字的建立
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <!-- 标题字标签<h>,从大到小6个标签 --> <h1>标题1</h1> <!-- 设置字体对齐方式 left 左对齐 默认 center 居中 right 右对齐 --> <h2 align="center">标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6> </body> </html>
特殊符号
设置文字格式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字</title> </head> <body> <!-- 设置字体大小 最大7，默认3 --> <font size="3">大小</font> <!-- 设置字体颜色 --> <font color="red">颜色</font> <!-- strong 粗体 em 斜体 u 下划线 sup 上标 sub 下标 strike 删除线 code 等宽文字标记，一般用于英语 --> <em>斜体</em> </body> </html>
设置段落格式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>段落</title> </head> <body> <!-- 段落通过p标签表示 --> <p>段落</p> <!-- br标签换行 --> <p>段<br/>落</p> <!-- nobr标签禁止文字换行 --> <p><nobr>段落</nobr></p> <!-- pre标签会保留空格和换行符 --> <pre>段 落</pre> <!-- center标签将文字居中 --> <center>居中</center> <!-- blockquote 右缩进标记 --> <blockquote>右缩进标记</blockquote> </body> </html>
水平线标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>水平线</title> </head> <body> <!-- hr 添加水平线 width 设置宽度 size 设置水平线高度 color 设置水平线颜色 align 设置水平线对齐方式 noshade 取消水平线空心效果 --> <hr width="50%" size="3" color="" align="center" noshade="noshade" /> </body> </html>
其他文字标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文字标记</title> </head> <body> <!-- 通过ruby标签对文字添加标注来说明某段文字 --> <ruby> 被说明的文字 <rt>解释说明文字</rt> </ruby> <!-- 设置地址文字标记 --> <address>www.1778895866@qq.com</address> <!-- 通过var声明变量文件 --> <p><var>x</var>:=<var>y</var>+6</p> <!-- plaintext/xmp 忽略html标签,一般放在body后面 --> <plaintext/> </body> </html>
使用有序列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无序列表</title> </head> <body> <!-- 有序列表 ol start 起始数 1 数字 默认 a 小写字母 A 大写字母 i 小写罗马数字 I 大写罗马数字 --> <ol start="3" type="1"> <li>第一项</li> <li>第二项</li> </ol> </body> </html>
使用无序列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>无序列表</title> </head> <body> <!-- 无序列表 ul disc 实心圆 默认 circle 空心圆 square 实心正方体--> <ul type="disc"> <li>第一项</li> <li>第二项</li> </ul> </body> </html>
自定义列表标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义列表</title> </head> <body> <!-- dl主要用于解释名词，包含两个层次的列表，第一层表示需要解释的名词，第二层表示具体的解释 --> <dl> <dt>标题1</dt><dd>解释1</dd> <dt>标题2</dt><dd>解释2</dd> </dl> <!-- 在自定义列表中，dt标记下可以有多个dd标签作为名词的字解释和说明 --> <dl> <dt> <dd>说明2</dd> <dd>说明1</dd> </dt> </dl> </body> </html>
菜单列表标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜单列表</title> </head> <body> <!-- 菜单列表主要用于设计单列菜单列表，他的功能也可以用无序列表完成 --> <menu> <li>列表1</li> <li>列表2</li> </menu> </body> </html>
目录列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>目录列表</title> </head> <body> <!-- 用于显示文件内容的目录大纲,通常用于设计一个压缩窄列的列表 --> <dir> <li>列表1</li> <li>列表2</li> </dir> </body> </html>
超链接
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>超链接</title> </head> <body> <!-- _parent在上一级窗口打开 _blank在新窗口打开 _self默认在当前窗口打开 _top在浏览器的整个窗口打开，忽略任何框架 --> <a href="index.html" target="_self">链接</a> <!-- 通过HTTP协议进行外部链接 --> <a href="https://www.baidu.com/">百度一下</a> <!-- 通过FTP可以获得各种免费软件 --> <a href="ftp://125.68.26.255">FTP地址</a> <!-- 通过Email发送邮件，电脑上有Email软件才可以 --> <a href="mailto:www.1778895866@qq.com?cc=抄送收件人&subject=邮件主题&bcc=暗送收件人&body=邮件内容">Email</a> <!-- 下载文件 添加文件地址即可--> <a href="test.exe">下载</a> <!-- 脚本链接 后面直接添加JavaScript代码--> <a href="javascript:alert('修抗')">javascript</a> <!-- 空链接 --> <a href="#">链接到本页面</a> <!-- 锚点 可以设置name或者id都可以 --> <a name="xiu">锚点</a> <a href="index.html#xiu">链接到锚点</a><!-- #前面添加锚点的文件地址,本页面默认不添加 --> </body> </html>
图像添加
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图像</title> </head> <body> <!-- src 设置图像路径 width 设置图像宽度 border 设置图像边框 hspace 设置图像水平间距 vspace 设置图像垂直间距 title 设置图像提示文字 alt 图像未加载提示文字 --> <img src="test.png" width="500px" border="10px" hspace="20" vspace="20" title="提示" alt="替换文字内容"/> <!-- 添加AVI文件 IE支持 loop 循环播放的次数 -1表示无限播放 start 播放属性 mouseover鼠标移到播放界面播放 fileopen打开网页播放 --> <img dynsrc="test.avi" hspace="10" vspace="10" loop="3" start="mouseover"/> <!-- 图像的超链接 --> <a href="#"><img src="test.png"></a> <!-- 设置图片热区感应 一般使用可视化软件DW快捷设置--> <img src="test.jpg" usemap="映射图像名称"/> <map name="映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map> </body> </html>
表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <!-- border 设置表格边框 bordercolor 设置表格颜色 cellspacing 设置单元格的间距 cellpadding 设置单元格与内容的间距 width/height 设置表格宽度/高度 align 设置表格水平对齐方式 left左 center中 right右 valign 设置表格垂直对齐方式 top上 middle中 buttom下 注： 表格标题为特殊的行 设置水平对齐或者垂直对齐方式都是使用align属性 bgcolor 设置表格背景颜色 background 设置表格背景图片 --> <table border="1px"> <caption align="top">表格标题</caption> <!-- thead表头 --> <thead> <tr> <!-- colspan 水平合并单元格 rowspan 垂直合并单元格 --> <th colspan="2">表格的表头</th> <th rowspan="2">表格的表头</th> </tr> </thead> <!-- tbody表主题 --> <tbody> <tr> <!-- bordercolorlight 设置单元格亮边框 bordercolordark 设置单元格暗边框 --> <td bordercolorlight="red">第一行第一个单元格</td> <td bordercolordark="blue">第一行第二个单元格</td> </tr> </tbody> <!-- tfoot表结尾 --> <tfoot> <tr> <td>第二行第一个单元格</td> <td>第二行第二个单元格</td> </tr> </tfoot> </table> </body> </html>
层
<div>标签
<iframe>标签
应用div制作下来菜单导航条
使用表单标记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <form action="处理表单的后台" name="表单名称" method="post" target="_self"> <!-- 普通输入框 text 默认 --> <input type="text" name="xiu" size="5" maxlength="3" value="默认值" oncopy="return false" oncut="return false" onpaste="return false"/> <!-- 密码输入框 password --> <input type="password" name="" size="" maxlength="" value=""/> <!-- number 数字输入框 --> <input type="number"/> <!-- color颜色输入 --> <input type="color" value="#ffffff"/> <!-- range滑块控件 --> <input type="range" min="0" max="9"/> <!-- date日期输入(年月日) --> <input type="date" max="1979-12-31" /> <!-- month日期输入(年月) --> <input type="month"/> <!-- week日期输入(周年) --> <input type="week"> <!-- time时间输入(无时区) --> <input type="time"> <!-- datetime时间输入(有时区) --> <input type="datetime"> <!-- datetime-local日期时间输入(无时区) --> <input type="datetime"> <!-- email电子邮件输入 --> <input type="email"> <!-- tel电话号码 --> <input type="tel"> <!-- url地址输入 --> <input type="url"> <!-- search用于搜索字段(类似于常规文本字段) --> <input type="search"> <!-- 单选按钮 radio --> <input type="radio" name="test" value="男"/>男 <input type="radio" name="test" value="女"/>女 <!-- 复选框 CheckBox --> <input type="checkbox" name="test" value="篮球"/>篮球 <input type="checkbox" name="test" value="足球"/>足球 <!-- 普通按钮 button --> <input type="button" name="" value="关闭当前页面" onclick="window.close()"> <input type="button" name="" value="打开新页面" onclick="window.open('https://www.baidu.com/')"/> <!-- 提交按钮 submit --> <input type="submit" name="" value="提交按钮"/> <!-- 重置按钮 reset --> <input type="reset" name="" value="重置按钮"/> <!-- 图像域 image --> <input type="image" src="test.png" name=""> <!-- 隐藏域 hidden 隐藏域不会显示在页面中，但name/value会提交到后台--> <input type="hidden" name="" value=""> <!-- 文件域 file --> <input type="file" name=" "> <!-- 使用label定义标签 --> <!-- 隐试关联 --> <label for="user">姓名：</label> <input type="text" name="" id="user"/> <!-- 显示关联 --> <label>密码：<input type="password" name=""></label> <!-- 自定义按钮button --> <button type="button" disabled="disabled" name="">按钮</button> <!-- 列表/菜单标记 --> <select name="" size="1" multiple="multiple"> <option>修抗</option> <option selected="selected">你好</option> </select> <!-- 文本域标记 --> <textarea name="" rows="4" cols="6">值</textarea> <!-- type 控件的类型 --> <input type=""/> <!-- name 设置输入框名字 --> <input type="" name=""> <!-- 禁止复制 --> <input type="" oncopy="return false"> <!-- 禁止剪切 --> <input type="" oncut="return false"> <!-- 禁止粘贴 --> <input type="" onpaste="return false"> <!-- value 输入字段的初始值 --> <input type="text" value="初始值"/> <!-- readonly 设置文本框为只读 --> <input type="text" value="初始值" readonly/> <!-- disabled 设置文本框不可点击，不会被提交 --> <input type="text" value="初始值" disabled/> <!-- size 设置文本框输入字数的宽度 --> <input type="text" value="初始值" size="3"/> <!-- maxlength 设置文本框输入的最大字数 --> <input type="text" value="初始值" maxlength="3"/> <!-- autocomplete 数据提交后然后后退输入框是否保留之前输入的内容 --> <input type="text" value="初始值" autocomplete="on/off" /> <!-- novalidate 提交表单时不对属性进行验证 --> <form action="" novalidate></form> <!-- autofocus 加载时自动获取焦点 --> <input type="text" value="初始值" autofocus/> <!-- form 将位于表单外的字段链接起来 --> <form action="" id="xiu"> <input type="submit"/> </form> <input type="text" font="xiu"/> <!-- required 设置必须填写的字段 --> <input type="text" required /> <!-- placeholder 占位符 --> <input type="text" placeholder="占位符"/> <!-- pattern 用于检查元素的正则表达式 --> <input type="text" pattern="{A-Za-z}{3}" /> <!-- list 默认提示 --> <input type="text" name="" list="kang"> <datalist id="kang"> <option>1</option> <option>2</option> <option>3</option> </datalist> <!-- max/min 限制range的最小的和最大范围--> <input type="number" min="3" max="8"> <!-- step 设置递增或者递减的梯度 --> <input type="number" step="4"> </form> </body> </html>
设置滚动文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>滚动文字</title> </head> <body> <!-- marquee 滚动标签 direction 滚动方向 up往上 down往下 left往左 right往右 behavior 滚动属性 scroll默认循环滚动 slide只滚动一次就停止 alternate来回交替滚动 scrollamount 设置滚动速度 scrolldelay 延长滚动毫秒 loop 滚动次数 width/height 滚动范围 bgcolor 滚动背景 hspace/vspace 水平/垂直间距 --> <marquee direction="up" behavior="alternate" scrollamount="200" scrolldelay="1000" loop="0" height="100px" bgcolor="red" hspace="10px" vspace="10px">滚动</marquee> </body> </html>
多媒体
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多媒体</title> </head> <body> <!-- 视频 --> <!-- src="url" 视频地址 width="100%" 设置视频宽度 autoplay="autoplay" 自动播放 controls = "aontrols" 显示控件 loop = "loop" 重播 preload = "preload" 预加载 --> <video src="test.mp3" controls="controls" width="400px" autoplay="autoplay" loop="loop" preload="preload"> <p>该网页不支持HTML5音频播放</p> </video> <!-- 音乐 --> <audio id="xiu"> <source src="music.mp3"></source> <p>该网页不支持HTML5音频播放</p> </audio> <!-- 添加一个按钮,并添加一个点击事件 --> <button onclick="kang()">按钮</button> <script> // 获取音乐的id节点 var music = document.getElementById("xiu"); function kang(){//添加一个kang()方法 if(music.paused){//如果视频未播放就返回true music.play();//播放 }else { music.pause();//暂停 } } </script> </body> </html>
播放器的属性方式和事件
设置ico图标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ico图标</title> <!-- 尽量先把图片设置为png格式 然后在线制作ico图标 网址: http://www.bitbug.net 图片大小设置为32*32 --> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> </body> </html>
网络变化事件
window.addEventListener("online",function(){
alert("网络连接成功");
});
window.addEventListener("offline",function(){
alert("网络链接失败");
});
FileReader
<!-- 要求:在图片提交前浏览图片 --> <input type="file" id="myFile" /> <img src="" alt=""/> <script> // onchange事件:当文本框内容改变就执行 document.querySelector("#myFile").addEventListener("change",function(){ // 创建文本读取对象 var reader = new FileReader(); // 读取文件的DataURL // 需要传递一个参数:文件(图片或者其他可以嵌入文档的类型) // 文件存储在file表单元素的files属性中,他是一个数组(元素1:文件 元素2:长度) var file = document.querySelector("#myFile").files[0]; // FileReader:读取文件内容 // readAsText():读取文本文件(可以使用txt打开的文件),返回文本字符串,默认UTF-8 // readAsBinaryString():读取任意类型的文件,返回二进制字符串,主要用于存储文件 // readAsDateURL():读取文件获取一段已data开头的字符串,这段字符串的本质就是DataURL,DataURL是一种将文件(一般指能嵌入到文档的文件格式:图片)嵌入到文档的方案,DateURL是将资源转换为base64编码的字符串形式,并且将这些内容存储在url中 // abort():中断读取 // 参数:图片或者其他可以嵌入到文档的类型 // 没有返回值,但是会将返回的结果存储在文件的result中 reader.readAsDataURL(file);//获取文件的DateURL // onabort:读取文件中断时触发 // onerror:读取错误时触发 // onload:读取成功时触发 // onloadend:读取完成时触发,不管成功或者失败 // onloadstart:开始读取时触发 // onprogress:读取文件中持续触发 reader.onload = function(){ // console.log(reader.result);//获取文件的DateURL document.querySelector("img").src = reader.result;//设置图片的src为文件的DateURL } }); </script>
