文章目录
- 第一个html文件
- HTML 标题
- HTML 段落
- HTML 链接
- HTML 图像
- 水平线、换行
- 文本格式化
- 链接
- HTML 头部
- HTML CSS
- 表格
- HTML 列表
- HTML 区块
- HTML 布局
第一个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>
表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<table border="1">
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
thead{color: red;}
tbody{color:black}
tfoot{color: blue;}
</style>
</head>
<body>
<caption>收益表</caption>
<table border="1">
<colgroup>
<col span="1" style="background-color:green">
<col style="background-color: yellow;">
</colgroup>
<thead>
<tr>
<th>月份</th>
<th>金额</th>
</tr>
</thead>
<tfoot>
<tr>
<td>总计</td>
<td>350</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>一月</td>
<td>150</td>
</tr>
<tr>
<td>二月</td>
<td>200</td>
</tr>
</tbody>
</table>
</body>
</html>
HTML 列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<!--无序列表-->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<!--有序列表-->
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<!--自定义列表-->
<dl>
<dt>HTML</dt>
<dd>描述</dd>
<dt>CSSL</dt>
<dd>描述</dd>
<dt>JS</dt>
<dd>描述</dd>
</dl>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="A">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="I">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
</body>
</html>
HTML 区块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
.div1{
float: left;
width: 25%;
height: 500px;
background-color: red;
}
.div2{
float: left;
width: 25%;
height: 750px;
background-color: yellow;
}
#div3{
float: left;
width: 25%;
height: 500px;
background-color: black;
}
#div4{
float: left;
width: 25%;
height: 750px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
<style>
#span1 {
color: red;
}
#span2 {
color: blue;
}
#span3 {
color: black
}
#span4 {
color: green
}
</style>
</head>
<body>
<p><span id="span1">红色</span><span id="span2">蓝色</span><span id="span3">黑色</span><span id="span4">绿色</span></p>
</body>
</html>
HTML 布局
使用<div> 元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<div style="width: 500px;">
<div style="background-color: yellow;width: 100%;">
<h1 style="margin-bottom: 0;text-align: center;">网页标题</h1>
</div>
<div style="background-color: red;height: 200px;width: 100px;float: left;">
<h1>菜单</h1>
<a href="">链接1</a><br><a href="">链接2</a><br><a href="">链接3</a><br><a href="">链接4</a><br><a href="">链接5</a>
</div>
<div style="background-color: green;height: 200px; width: 400px;text-align: center;float: right;">
网页内容
</div>
<div style="background-color: pink;width: 100%;height: 100px;text-align: center;float: left;">
版权 © xingweikun
</div>
</div>
</body>
</html>
使用表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html学习</title>
</head>
<body>
<table style="width: 500px;">
<tr>
<td colspan="2" style="background-color: pink;">
<h1>网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color: yellow; width: 100px;">
<h1>菜单</h1>
<a href="">链接1</a><br><a href="">链接2</a><br><a href="">链接3</a><br><a href="">链接4</a><br><a
href="">链接5</a>
</td>
<td style="background-color: green;width: 400px;text-align: center;">网页内容</td>
</tr>
<tr>
<td colspan="2" style="background-color: grey;text-align: center;">版权 © xingweikun</td>
</tr>
</table>
</body>
</html>