HTML5学习
Posted xingweikun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5学习相关的知识，希望对你有一定的参考价值。
第一个html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1>html</h1>
<p>hello html</p>
</body>
</html>
HTML 标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
HTML 段落
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<p>这是一个段落</p>
<p>这是另一个段落</p>
</body>
</html>
HTML 链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<a href="http://www.baidu.com/">百度搜索</a>
</body>
</html>
HTML 图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<img src="img1.jpg" alt="代码截图" width="250px" height="250px">
</body>
</html>
水平线、换行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1>第一个标题</h1>
<hr><!--水平线-->
<p>
第一行
<br><!--换行-->
第二行
</p>
</body>
</html>
文本格式化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<b>定义粗体文本</b><br>
<em>定义着重文字</em><br>
<i>定义斜体字</i><br>
<small>定义小号字</small><br>
<strong>定义加重语气</strong><br>
定义下标字2<sub>3</sub><br>
定义上标字2<sup>3</sup><br>
<ins>定义插入字</ins><br>
<del>定义删除字</del>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<code>
定义计算机代码
</code><br>
<kbd>
定义键盘码
</kbd><br>
<samp>
定义计算机代码样本
</samp><br>
<var>
定义变量
</var><br>
<pre>
定义预格式文本
</pre><br>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<abbr>定义缩写</abbr><br>
<address>定义地址</address><br>
<bdo>定义文字方向</bdo><br>
<blockquote>定义长的引用</blockquote><br>
<q>定义短的引用语</q><br>
<cite>定义引用、引证</cite><br>
<dfn>定义一个定义项目</dfn><br>
</body>
</html>
链接
<a href="url">链接文本</a>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<a href="https://www.baidu.com/">访问百度搜索首页</a>
</body>
</html>
<a href="url" target="_blank">访问xxx</a>
target 属性:
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
HTML 头部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, javascript">
<!--为搜索引擎定义关键词-->
<meta name="description" content="html学习">
<!--为网页定义描述内容-->
<meta name="author" content="xingweikun">
<!--定义网页作者-->
<meta http-equiv="refresh" content="30">
<!--每30秒钟刷新当前页面-->
<title>文档标题</title>
<!--定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题-->
<base href="url" target="_blank">
<!--<base> 标签描述了基本的链接地址/链接目标，
该标签作为HTML文档中所有的链接标签的默认链接-->
<link rel="stylesheet" type="text/css" href="xxx.css">
<!--<link> 标签定义了文档与外部资源之间的关系
<link> 标签通常用于链接到样式表-->
<style type="text/css">
body {
background-color: yellow
}
p {
color: blue
}
</style>
<!--<style> 标签定义了HTML文档的样式文件引用地址
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档-->
</head>
<body>
文档内容......
</body>
</html>
HTML CSS
背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<h1 style="background-color: blue;">标题</h1>
<p style="background-color: yellow;">段落</p>
</body>
</html>
字体，字体颜色，字体大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<p style="font-family: Arial;color: red;font-size: 20px;">这是一个段落</p>
</body>
</html>
文本对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<p style="text-align: center;">这是一个段落</p>
</body>
</html>
内部样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style type="text/css">
h1 {
background-color: red;
text-align: center;
}
p {
background-color: green;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
</body>
</html>
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="xxx.css">
</head>
表格
<!HTML5新增相关标签的和属性
HTML5期末大作业：餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段