《新手学HTML5》学习笔记

第1部分  基础知识

第1章  概述

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

第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;/将鼠标变为指针,表示一个链接
1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。1、资源项目源码均已通过严格测试验证,保证能够正常运行; 2、项目问题、技术讨论,可以给博主私信或留言,博主看到后会第一时间与您进行沟通; 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用,尤其对于人工智能、计算机科与技术等相关专业,更为适合; 4、下载使用后,可先查看README.md文件(如有),本项目仅用作交流学习参考,请切勿用于商业用途。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值