标签：定义 color html 学习 HTML 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>
表格
<!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>
标签：定义,color,html,学习,HTML,HTML5,链接 来源： https://blog.csdn.net/weixin_46322367/article/details/121246104
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。