前端学习笔记--html5基础篇_html中.cities-CSDN博客

本文链接：https://blog.csdn.net/zj_Lxg/article/details/78914702

学习链接：点我

一、简介

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>

在浏览器中看起来是这样的：

注释：表单本身并不可见。还要注意文本字段的默认宽度是 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 style="background-color:yellow">
<h2 style="text-align:center">This is a heading</h2>
<p style="font-family:arial; color:red; font-size:20px;">
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" style="border:1px solid #c3c3c3;">
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：实例传送门