《新手学HTML5》学习笔记

最新推荐文章于 2024-09-11 17:25:08 发布

jiangtaozy

最新推荐文章于 2024-09-11 17:25:08 发布

阅读量834

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/jiangtaozy/article/details/51471157

版权

第1部分基础知识

第1章概述

第2章文档设置
<em>: 将文本斜体显示
<p></p>: 创建段落，使浏览器跳过一行
<li>: 创建列表项
<br>: 添加一个换行符
HTML页面必须定义的元素：
开始标记       结束标记       说明
!doctype   n/a       告诉浏览器页面遵循哪一组标准
<html>       </html>       表示整个HTML页面
<head>       </head>       表示页面的标志信息，比如页面标题
<body>       </body>       表示在浏览窗口中要显示的页面内容
<title>       </title>   定义页面标题，包含在<head>和</head>中
少量特殊字符：
字符       编号实体   命名实体
"       "   "
&       &   &
(不换行的空格)        
<       <   <
>       >   >
<!-- 注释 --!>: 添加注释

第3章设置样式表
CSS值的类型：
值类型   说明
颜色   十六进制编码，如#000000
   RGB值，如rgb(0,0,0)或rgb(0%,0%,0%)
   预定义的一个颜色关键字
关键字   一个相对值，例如small
长度   点(pt)-每英寸72个点
   派卡(pc)-每派卡12个点
   像素(px)-屏幕上的点
   ems(em)-字体高度
   exs(ex)-特定字体中x字母的高度
   英寸(in)
   毫米(mm)
   厘米(cm)
百分比   %，用于指出它与包含它的父元素之间的关系
URL   绝对URL：url(http://www.mhprofessional.com),相对URL:url(home.html)
!important: 声明样式比普通样式更加重要
内联样式表：
<h2 style="font-family: verdana;">:
内部样式表：
<head>
   <style type="text/css">
   h2 {font-family: verdana;}
   </style>
</head>
外部样式表：
<head>
   <link rel="stylesheet" href="styles.css">
</head>
styles.css
h1 {font: georgia 14pt bold;}

标准颜色：
名称   十六进制   RGB值
黑色   #000000   0,0,0
白色   #ffffff   255,255,255
银色   #c0c0c0   192,192,192
灰色   #808080   128,128,128
绿黄色   #00ff00   0,255,0
淡褐色   #808000   128,128,0
绿色   #008000   0，128，0
紫色   #ffff00   255,255,0
褐红色   #800000   128,0,0
深蓝色   #000080   0,0,128
红色   #ff0000   255,0,0
蓝色   #0000ff   0,0,255
紫色   #800080 128，0，128
蓝绿色   #008080   0,128,128
紫红色   #ff00ff   255,0,255
浅绿色   #00ffff   0，255，255
橙色   #ffa500   255,165,0

第4章使用文本

第5章页面结构
<p style="text-indent: 25px">This is the first sentence in my paragraph</p>: 段落的第一行从左边缩进25像素
控制元素边框的尺寸：
border-bottom-width: thick
border-left-width: 4px
border-right-width: 6px
border-top-width: thin
border-width: medium
border-color: #ffffff: 定义边框颜色
border-style: double: 定义边框样式
border-bottom-left-radius: 10px: 控制边框倒角形状
border-radius: 25px: 同上，整体设置
text-align: left: 改变文本的对齐方式
vertical-align: text-bottom: 允许文本垂直对齐

第6章定位页面元素

第2部分添加内容

第7章使用链接
<a href="http://maps.google.com">Use this link to find us on Google Maps.</a>:a元素用于添加链接，href=hypertext reference
<a href="contactme.html">Contact Me</a>: 相对链接，将在当前页面所在文件夹中查找contactme.html文件
<a name="section1">Section 1</a>: 创建锚点section1
<a href="#top">Return to the top of the page</a>: 链接到锚点top
<a href="mailto:name@emailadderss.com">Email Me!</a>: 添加电子邮件地址
<a href="http://www.yahoo.com" title="Click this link to leave our site and visit Yahoo!">Visit Yahoo!</a>: title特性，向用户发出一个警告
<a href="page1.html" tabindex="1">Page 1</a>: 定义Tab键的顺序
<a href="page1.html" tabindex="1" accesskey="1">Page 1</a> (Alt-1)<br>: 添加快捷键
<a hret="http://www.yahoo.com" target="_blank">Search Yahoo!</a>: target特性，_blank为在新窗口中打开链接，_self为在当前窗口打开链接，name为在指定名称为name的窗口中打开链接

第8章使用图像
<img src="photo.jpg">: 添加图像
<img src="photo.jpg" width="391" height="274">: 设定高度和宽度
<img src="art-turtle.gif" width="600" height="412" alt="Drawing of a Turtle">: alt特性，当图像无法显示时的替代文本
<a href="http://www.yahoo.com"><img src="photo.jif"></a>: 给图像添加链接
链接图像中的区域：
<img src="map.gif" usemap="#usa">
<map name="usa">
<area shape="poly" coords="193, 174, 247, 178, 244, 236, 187, 243" href="/newmexico.html">
</map>
添加图像标题：
<figure>
<img src="hzw2.jpeg" width="400" height="300">
<figcaption>Fabric banner handmade by the women</figcaption>
</figure>
定义图像边框：
        .headshot {
                border-style: double;
                border-left-style: none;
                border-right-style: none;
                border-width: 10px;
                border-left-width: 0px;
                border-right-width: 0px;
                border-color: #c00;
        }
<img src="hzw2.jpeg" width="400" height="300" usemap="#usa" class="headshot">
定义图像浮动特性：
<img src="hzw1.jpeg" width="391" height="274" alt="Drawing of a Turtle" title="海贼王" class="headshot" style="float: right;">
清除段落浮动特性：
<p style="clear: right;">
使图片居中显示：
img { diaplay: block; margin-left: auto; margin-right: auto;}
将图像作为背景：
        body {
                background-image: url("hzw1.jpeg");
        }

第9章使用多媒体
嵌入视频：
<video src="videoFile.mp4" width="300" height="200" controls autoplay poster="videoStill.jpg"></video>: controls:控件可见，autoplay:自动播放，poster: 海报
定义多种格式的源文件：
<video controls>
   <source src="videoFile.mp4" type="video/mp4"
   <source src="videoFile.ogv" type="video/ogg"
   <object type="application/x-shockwave-flash"
       data="videoFile.swf"
       height="480"
       width="640">
   </object>
Sorry, your brower dosen't support this video content.
</video>
添加字幕：
<video src="videoFile.mp4">
   <track kind="subtitles" src="EnglisSubtitles.vtt" srclang="en" default label="English Subtitles"></track>
</video>
其中，kind:轨道类型，srclang:轨道语言，default:定义默认使用的轨道，label:轨道标题
嵌入其他媒体：
<embed src="flashFile.swf" type="application/x-shockwave-flash" width="600" height="400">
定义媒体样式：
video {
   width: 300px;
   border: 5px solid #666;
   border-radius: 10px;
   padding: 10px;
   margin: 25px;
}

第10章创建列表
创建有序列表：
        <ol type="a" start="3">
                <li>raspberries</li>
                <li>strawberries</li>
                <li value="7">apples</li>
        </ol>
创建无序列表：
        <ul>
                <li>raspberries</li>
                <li>strawberries</li>
                <li>apples</li>
        </ul>
创建定义列表：
        <dl>
                <dt>W3C</dt>
                        <dd>World Wide Web</dd>
        </dl>
其中，dl:创建列表，dt：定义术语，dd:定义数据
定义项目符号：
<style>
li {list-style-image: url(star.gif);}
</style>

第11章使用表格
创建表格：
        table {
                width: 200px;
                height: 200px;
                border: 3px solid black;
                float: right;
        }
        td {
                border: 3px solid black;
                text-align: center;
        }
        caption {
                text-align: right;
                caption-side: bottom;
        }
        <table>
                <caption>cat's game</caption>
                <tr>
                        <td><img src="hzw1.jpeg" alt="hzw" width="19" height="19"></td>
                        <td>XXX</td>
                        <td><img src="hzw1.jpeg" alt="hzw" width="19" height="19"></td>
                </t>
                <tr>
                        <td>XXX</td>
                        <td><img src="hzw1.jpeg" alt="hzw" width="19" height="19"></td>
                        <td>XXX</td>
                </t>
                <tr>
                        <td>XXX</td>
                        <td><img src="hzw1.jpeg" alt="hzw" width="19" height="19"></td>
                        <td>XXX</td>
                </t>
        </table>
其中，tr：行，td:单元格，caption:表格标题
td {padding: 10px;}:设置单元格内边距
tr {background-color: green;}: 设置行的颜色
td.nowrap {white-space: nowrap;}: 禁止换行
<td colspan="2">XXX</td>: 使单元格跨越2列
<td rowspan="2">XXX</td>: 使单元格跨越2行
<thead></thead>: 表格头
<tfoot></tfoot>: 表格注脚
<tbody></tbody>: 表格主体
<colgroup span="5" id="group1"></colgroup>: 包含5列的group1列组
<colgroup span="2" id="group2"></colgroup>：包含2列的group2列组
colgroup#group1 {width: 50px}：设置列组宽度
colgroup#group2 {width: 25px}：设置列组宽度

第12章创建表单
<form>
       Please enter your first name: <input name="FirstName" placeholder="Enter your first name"><br>:单行文本框
       Please enter your password: <input type="password" name="Password">：密码框
       <input type="search" name="search" placeholder="Enter search terms here..." size="50">：搜索框
       <textarea name="Comments" cols="30" rows="5">Type your comments here.</textarea><br>：多行文本框
       <input type="radio" name="ContactMe" value="email">email<br>：单选按钮
                <input type="radio" name="ContactMe" value="phone">phone<br>：单选按钮
                <input type="checkbox" name="Services" value="graphic design">graphic design<br>：复选框
                <input type="checkbox" name="Services" value="illustration">illustration<br>：复选框
                <input type="number" min="0" max="12" step="2" value="8">：数值框
                1<input type="range" min="1" max="10" step="1" value="5">10：滑块
                <input name="ShirtColor" type="color">：颜色选择器
                <select name="FavoriteColor" size="3">
                        <option value="blue">blue</option>
                        <option value="red">red</option>
                        <option value="yellow">yellow</option>
                        <option value="green">green</option>
                        <option value="other">other</option>
                </select>：选择菜单
                <select name="TimeDay">
                        <optgroup label="Monday">
                                <option value="Monday AM">Monday AM</option>
                                <option value="Monday PM">Monday PM</option>
                        </optgroup>
                        <optgroup label="Tuesday">
                                <option value="Tuesday AM">Tuesday AM</option>
                                <option value="Tuesday PM">Tuesday PM</option>
                        </optgroup>
                </select>：子菜单
                <input type="file" name="PhotoUpload" size="40">：文件上传控件
                <input type="submit" name="Submit" value="submit">：提交按钮
                <input type="reset" name="Reset" value="reset">：复位按钮
                <input type="image" src="hzw1.jpeg" width="30" height="30" name="Submit" alt="Send Message">：图形按钮
        </form>
<input type="email" name="Email" required>: 控件为空时，阻止表单的提交
<input pattern="[0-9]{16}" title="Enter your 16-digit credit card number, without any space or dashes." name="CreditCard" required>: pattern特性，要求与模式匹配
<form action="mailto:name@emailadderss.com">:处理表单，发送邮件
<form action="../cgi-bin/form.cgi">:处理表单，使用CGI脚本的URL
<form action="myscript.cgi" method="post" enctype="multipart/form-data">: post:使用post方法上传表单，multipart/form-data: 允许上传文件

第13章表单的格式和样式
<input name="FirstName" tabindex="2" accesskey="f">: 设置Tab顺序和键盘快捷键，Alt-f
<label for="birthday">When is your birthday?<input type="date" name="BirthDate" id="birthday">: label元素与id特性在标签和控件之间建立了正式的关联
<fieldset>
   <legend>Schooling</legend>
   <p>High School: <input name="HighSchool"><br>
   College: <input name="College"></p>
</fieldset>: 将控件进行分组，legend:分组标题
添加数据列表：
<input name="City" list="HarCoCities">
   <datalist id="HarCoCities">
       <option value="Abingdon">Abingdon</option>
       <option value="Aberdeen">Aberdeen</option>
   </datalist>
添加进度条：
<progress value="0" max="100">Waiting to start</progress>
添加用于显示百分比的进度条：
<meter min="0" max="50" value="30"></meter>

第14章超越静态HTML
添加JavaScript代码：
<script type="text/javascript">
   document.write("I can write JavaScript!");
</script>:其中document对象代表HTML文档本身
document.body.style.backgroundColor="#333333";: 将页面样式表中的body的background-color属性改为灰色
var VotingAge = 18;：声明一个变量
function functionName() {
   commands;
}: 创建一个函数
<a href="home.html" οnclick="document.body.style.backgroundColor='#333333'";>Home</a>: 添加事件处理程序，onclick:单击时触发
JavaScript中常见事件处理程序：
onabort       当用户停止加载当前页面时触发
onblur       当用户鼠标指针的焦点从一个对象上移除时触发
onchange   当用户改变一个对象时触发
onclick       当用户单击一个对象时触发
onfocus       当用户使一个对象获得前台焦点时触发
onload       当一个对象已经完全加载时触发
onmouseover   当用户鼠标指针移过一个对象时触发
onmouseout   当用户鼠标指针移出一个对象时触发
onmouseup   当用户单击一个对象后释放鼠标按钮时触发
onselect   当用户选中一个对象时触发
onsubmit   当用户提交表单时触发
if (navigator.appName == "Microsoft Internet Explorer") {
   document.write("The Magic 8-ball says: Your browser is Internet Explorer.");
}
else {
   document.write("The Magic 8-ball says: Your brower is not Internet Explorer.");
}: 逻辑语句
var worker = new Worker('script.js'): 创建Worker对象(JavaScript活动），用于处理script.js脚本文件。
<canvas id="myCanvas" width="600" height="400"></canvas>: 创建画布
在画布中绘制图形：
window.addEventListener('load', function () {
   var elem = document.getElementById('myCanvas');
   if (!elem || !elem.getContext) {
       return;
   }
   var context = elem.getContext('2d');
   if (!context) {
       return;
   }
   context.fillStyle = 'blue';
   context.fillRect(0, 0, 300, 200);
   context.shadowOffsetX = 5;/创建阴影
   context.shadowOffsetY = 5;
   context.shadowBlur = 4;/以像素为单位设置阴影的模糊量
   context.shadowColor = 'rgba(0, 0, 0, 0.5)';/设置颜色和透明度
   context.fillStyle = 'yellow';
   context.fillRect(0, 0, 300, 200);
   },false);
添加当前日期和时间：
document.write(new Date());
定义新窗口的格式：
toolbar=yes/no       打开或关闭工具栏
location=yes/no       打开或关闭地址栏
status=yes/no       打开或关闭状态栏
menubar=yes/no       打开或关闭菜单栏
resizeable=yes/no   是否允许改变大小
scrolling=yes/no/auto   是否出现滚动条
width=#           以像素为单位，设置宽度
height=#       以像素为单位，设置高度
定义NewWindow函数：
function NewWindow(link) {
   var MonthWindow = window.open(link, 'Month', 'toolbar=no, location=no, status=yes, menubar=no, resizeable=yes, scrollbars=yes, width=200,height=200');
   MonthWindow.focus();/使新窗口获得焦点
}
在链接中引用NewWindow函数：
<a href="javascript:NewWindow('test.html');">Test</a>
将元素设置成可见：
document.getElementById("aboutus-sub").style.visibility="visible";
cursor: pointer;/将鼠标变为指针，表示一个链接