首页 » HTML5 » 前端学习笔记--html5基础篇

前端学习笔记--html5基础篇

原文 http://blog.csdn.net/zj_Lxg/article/details/78914702

2018-02-01 02:00:17阅读(203)

学习链接:点我

一、简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML5 建立的一些规则:
- 新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
- 减少对外部插件的需求(比如 Flash)
- 更优秀的错误处理
- 更多取代脚本的标记
- HTML5 应该独立于设备
- 开发进程应对公众透明

HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search

浏览器支持:
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。

二、html基础

html文档类型
<!DOCTYPE> 声明帮助浏览器正确地显示网页

<html> 元素
定义整个 HTML 文档:

<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

<head> 元素
<head> 元素是所有头部元素的容器
以下标签都可以添加到 head 部分:<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>元素
定义文档的标题:

<head>
<title>Title of the document</title>
</head>
<body> 元素
定义 HTML 文档的主体:
<body>
<p>This is my first paragraph.</p>
</body>

块元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <div>,<span>,<ul>, <table>

内联元素
内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>

标题:

<h1>This is a heading</h1>
<hr />
<h2>This is a heading</h2>
<hr />
<h3>This is a heading</h3>

使用水平线 (<hr> 标签) 来分隔文章中的小节

段落:
<p>This is a paragraph.</p>
<br/>
<p>This is another paragraph.</p>

<p> 元素定义;<br/> 是没有关闭标签的空元素,定义换行。

表格:
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下:
Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

列表

无序列表:

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下:

Coffee Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等

有序列表:

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

表单:
<form> 元素定义 HTML 表单
<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

在浏览器中看起来是这样的:
<a href=前端学习笔记--html5基础篇" src="http://img.blog.csdn.net/20180131173530892?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvempfTHhn/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" title="">
注释:表单本身并不可见。还要注意文本字段的默认宽度是 20 个字符。
More:表单传送门

链接:
<a href="http://www.w3school.com.cn" target="_blank">
This is a link</a>

链接的地址在 href 属性中指定;Target 属性可以定义被链接的文档在何处显示

图像:
<img src="boat.gif" alt="Big Boat" width="104" height="142" />
视频: <video>元素
<video width="320" height="240" controls="controls">
  <source src="/movie.ogg" type="video/ogg">
  <source src="/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<video>元素拥有方法、属性和事件。其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。control 属性供添加播放、暂停和音量控件,也可以包含宽度和高度属性。

音频:<audio> 元素
<audio controls="controls">
  <source src="/i/song.ogg" type="audio/ogg">
  <source src="/i/song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
html属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name=”value”。
属性总是在 HTML 元素的开始标签中规定。

对齐方式:
<h1 align="center">居中排列标题

背景颜色:
<body backgroundcolor="yellow">

表格边框:
<table border="1">

style 属性:提供了一种改变所有 HTML 元素的样式的通用方法

<html>
<body>
<h2>This is a heading</h2>
<p>
This is a paragraph.</p>
</body>
</html>

对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式,或者为不同的类设置不同的样式。

<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>
</div> 
</body>
</html>
脚本
<script> 标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。

引用 标签 描述 <abbr> 定义缩写或首字母缩略语 <address> 定义文档作者或拥有者的联系信息 <bdo> 定义文本方向 <blockquote> 定义从其他来源引用的节 <dfn> 定义项目或缩略词的定义 <q> 定义短的行内引用 <cite> 定义著作的标题 HTML 字符实体
我是传送门 三、画布( canvas 元素)

什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");//JavaScript 使用 id 来寻找 canvas 元素
var cxt=c.getContext("2d");//然后,创建 context 对象
//绘制一个红色的矩形,fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

实例:把一幅图像放置到画布上

<canvas id="myCanvas" width="200" height="100">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="/i/eg_flower.png"
cxt.drawImage(img,0,0);
</script>

More:实例传送门

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹