《新手学HTML5》学习笔记

第1部分  基础知识

第1章  概述

第2章  文档设置
: 将文本斜体显示

: 创建段落，使浏览器跳过一行

: 创建列表项

: 添加一个换行符
HTML页面必须定义的元素：
开始标记        结束标记        说明
!doctype    n/a        告诉浏览器页面遵循哪一组标准
                表示整个HTML页面
                表示页面的标志信息，比如页面标题
                表示在浏览窗口中要显示的页面内容
    定义页面标题，包含在和中
少量特殊字符：
字符        编号实体    命名实体
"        "    "
&        &    &
(不换行的空格)          
<        <    <
>        >    >
: 添加注释

第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: 声明样式比普通样式更加重要
内联样式表：

:
内部样式表：

    

外部样式表：

    

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章  页面结构

This is the first sentence in my paragraph

: 段落的第一行从左边缩进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章  使用链接
Use this link to find us on Google Maps.:a元素用于添加链接，href=hypertext reference
Contact Me: 相对链接，将在当前页面所在文件夹中查找contactme.html文件
Section 1: 创建锚点section1
Return to the top of the page: 链接到锚点top
Email Me!: 添加电子邮件地址
Visit Yahoo!: title特性，向用户发出一个警告
Page 1: 定义Tab键的顺序
Page 1 (Alt-1)
: 添加快捷键
Search Yahoo!: target特性，_blank为在新窗口中打开链接，_self为在当前窗口打开链接，name为在指定名称为name的窗口中打开链接

第8章  使用图像
: 添加图像
: 设定高度和宽度
: alt特性，当图像无法显示时的替代文本
: 给图像添加链接
链接图像中的区域：


添加图像标题：

Fabric banner handmade by the women

定义图像边框：
        .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 { diaplay: block; margin-left: auto; margin-right: auto;}
将图像作为背景：
        body {
                background-image: url("hzw1.jpeg");
        }

第9章  使用多媒体
嵌入视频：
: controls:控件可见，autoplay:自动播放，poster: 海报
定义多种格式的源文件：

添加字幕：

其中，kind:轨道类型，srclang:轨道语言，default:定义默认使用的轨道，label:轨道标题
嵌入其他媒体：

定义媒体样式：
video {
    width: 300px;
    border: 5px solid #666;
    border-radius: 10px;
    padding: 10px;
    margin: 25px;
}

第10章  创建列表
创建有序列表：
       

               
3. raspberries

               
4. strawberries

               
7. apples

       

创建无序列表：
       

               
• raspberries

               
• strawberries

               
• apples

       

创建定义列表：
       

               

W3C

                       

World Wide Web

       

其中，dl:创建列表，dt：定义术语，dd:定义数据
定义项目符号：


第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;
        }
       
               
               
                       
                       
                       
               
               
                       
                       
                       
               
               
                       
                       
                       
               
       

cat's game

	XXX
XXX		XXX
XXX		XXX

其中，tr：行，td:单元格，caption:表格标题
td {padding: 10px;}:设置单元格内边距
tr {background-color: green;}: 设置行的颜色
td.nowrap {white-space: nowrap;}: 禁止换行
XXX: 使单元格跨越2列
XXX: 使单元格跨越2行
: 表格头
: 表格注脚
: 表格主体
: 包含5列的group1列组
：包含2列的group2列组
colgroup#group1 {width: 50px}：设置列组宽度
colgroup#group2 {width: 25px}：设置列组宽度

第12章  创建表单

        Please enter your first name:
:单行文本框
        Please enter your password: ：密码框
        ：搜索框
        Type your comments here.
：多行文本框
        email
：单选按钮
                phone
：单选按钮
                graphic design
：复选框                         
                illustration
：复选框
                ：数值框
                110：滑块
                ：颜色选择器
               
                        blue
                        red
                        yellow
                        green
                        other
                ：选择菜单
               
                       
                                Monday AM
                                Monday PM
                       
                       
                                Tuesday AM
                                Tuesday PM
                       
                ：子菜单
                ：文件上传控件
                ：提交按钮
                ：复位按钮
                ：图形按钮
       

: 控件为空时，阻止表单的提交
: pattern特性，要求与模式匹配

:处理表单，发送邮件
:处理表单，使用CGI脚本的URL
: post:使用post方法上传表单，multipart/form-data: 允许上传文件

第13章  表单的格式和样式
: 设置Tab顺序和键盘快捷键，Alt-f
When is your birthday?: label元素与id特性在标签和控件之间建立了正式的关联

    

Schooling

    

High School:

    College:

: 将控件进行分组，legend:分组标题
添加数据列表：

    
添加进度条：
Waiting to start
添加用于显示百分比的进度条：


第14章  超越静态HTML
添加JavaScript代码：
:其中document对象代表HTML文档本身
document.body.style.backgroundColor="#333333";: 将页面样式表中的body的background-color属性改为灰色
var VotingAge = 18;：声明一个变量
function functionName() {
    commands;
}: 创建一个函数
Home: 添加事件处理程序，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脚本文件。
: 创建画布
在画布中绘制图形：
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函数：
Test
将元素设置成可见：
document.getElementById("aboutus-sub").style.visibility="visible";
cursor: pointer;/将鼠标变为指针，表示一个链接