社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
<!DOCTYPE html>
<!--
文档声明（doctype）
用来告诉浏览器当前的网页版本
html5的文档声明
<!DOCTYPE>
-->
<html>
<!-- html根标签,网页中所有内容都要写到根标签里面 -->
<head>
<!-- head中的内容不会在网页中直接出现，主要来帮助浏览器或搜索引擎来解析网页 -->
<meta charset="utf-8" />
<!-- 元数据，设置字符集，避免乱码问题 -->
<!--字符编码：
字符集：编码和解码采用的规则。
乱码：编码和解码的字符集不一致。
iso8859-1
ascii
utf-8
utf-16
gb2312
gbk
编码：数据在计算机都以二进制存储，所以一段文字存储到内存中，都需要转换为二进制编码
解码：当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读。
-->
<title>主页</title>
<!-- 网页的标题：title中的内容会显示在浏览器的标识栏上，
搜索引擎主要根据title中的内容来判断网页的主要内容 -->
<!-- title标签的内容：会作为搜索结果上的超链接上的文字显示 -->
</head>
<body>
<!--
网页的主体：网页中所有的可见内容都应该写在body里。
-->
<!--
作者：尹会东
时间：2020-02-07
描述：
-->
<!--
属性：在标签中（开始或自结束标签）还可以设置属性
属性是一个名值对（x=y）
属性是用来设置标签中的内容如何显示
属性和标签名或其他属性应该使用空格隔开
有些属性有属性值，有些没有，如果有属性值，属性值应该用引号引起来
-->
<h1><font color="red" size="7">这是我的第一个网页</font></h1>
</body>
</html>
1.注释标签：<!--注释-->
2.换行标签：<br/>
3.段落标签：<p>文本文字</p>
特点：段与段之间行高
属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
<!-- 在网页中，html专门用来负责网页的结构
标题标签：h1-h6共六级标签
h1-h6重要性递减，
h1的重要性仅次于title标签
一般情况下，一个网页只会有一个一级标签
在页面中独占一行的元素叫做块元素（block element
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<div></div>:块级标签，独占一行，换行
<span></span>:行级标签，所内容都在同一行
作用： <div></div>:主要是结合css页面分块布局
<span></span>:进行友好提示信息
5）列表标签
无序列表标签： <ul></ul>
属性：type :个值，分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
示例如下：
<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
有序列表标签：<ol></ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字
列表项： <li></li>
示例如下：
<ol type="I">序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
定义列表
dl (defination list) 定义列表
dt (defination title) 定义标题
dd (defination description) 定义描述
定义列表
<dl>
<dt>苹果</dt>
<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>
列表嵌套
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
图片标签
<img/> 独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相当位置（个属性值：top middle bottom
alt:图片的文字说明
title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某
个部分。
（1页面跳转
（2锚链接
<a>文本或图片</a>
属性：
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己) _blank(新页面，之前页面存在) _parent _top 默认_self
_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任
意名字。
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
表格由 标签来定义。每个表格均若干行（由 标签定义），每行被分割为若干单元格，由标签定义。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度
height:高度-->
<!--table的 align属性控制表格的对齐方式 left center right-->
<!--td 的align属性控制内容对齐方式 left center right -->
<!--td 的valign属性控制内容对齐方式 top middle bottom -->
<table border="1" bordercolor="red" cellspacing="0" align="center"
width="200" height="100">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
<table border="1" bordercolor="red" cellspacing="0" align="center">
<caption>学生表</caption>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
<tr>
<td>1</td>
<td>aa</td>
</tr>
</table>
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td colspan="2">各科成绩</td>
</tr>
<tr>
<td>1</td>
<td>aa</td>
<td>80</td>
<td>90</td>
</tr>
</table>
<table border="1" bordercolor="red" cellspacing="0" align="center">
<tr>
<td colspan="4" align="center">学生表</td>
</tr>
<tr>
<td>学号</td>
<td>姓名</td>
<td>语文成绩</td>
<td>数学成绩</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">aa</td>
<td>80</td>
<td>90</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
</tr>
</table>
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<!--
音乐视频播放
音视频文件引入时，默认情况下不允许用户控制
audio:引入外部音频文件的标签。
src：指定引入文件的路径。
controls="controls"：出现播放窗口
autoplay="autoplay":自动播放
loop="loop"循环播放
video:引入外部视频文件的标签。
-->
<audio src="../img/testMP3i18n.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
<!-- 除了用src指定播放路径，还可以用source来指定 -->
<audio>
对不起，您的浏览器不支持！
<source="../img/testMP3i18n.mp3"></source>
</audio>
<video></video>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>基本标签综合案例</title></head>
<body><!--顶部视图：第一个div块-->
<div>
<table>
<tr>
<td align="center" width="22%"> 千锋教育-稀有的坚持全 程面授品质的大型IT教育机构</td>
<td width="1200px"></td>
<td align="center" width="22%"><a> 好程序员特训营 </a> <a> 扣丁学堂 </a>
<a> 练习我们 </a> <a> 加入收藏</a></td>
</tr>
</table>
</div>
<br> <!--logo图标块-->
<div>
<table>
<tr>
<td align="center" width="15%"><img src="http://www.qfedu.com/images/new_logo.png"/></td>
<td width="1000px"></td>
<td align="center" width="15%"><img src="http://www.mobiletrain.org/images/index/nav_r_ico.png"/>
</td>
</tr>
</table>
</div> <!--菜单视图：第二个div块-->
<div align="center">
<hr>
<span> 首页 </span><span> 课程培训 </span><span> 教学保障 </span>
<span> 免费视频 </span><span> 公开课 </span><span> 企业合作 </span>
<span> 免就业喜报 </span><span> 学员天 地 </span><span> 关于千锋 </span>
<span> 学员论坛 </span>
<hr>
</div> <!--导航视图：第四个div块-->
<div align="right">首页>课程培训>JavaEE列表 </div> <!--分类名称：第五个div块-->
<div><h2><strong>课程培训</strong></h2> <h4><strong>共XX种课程视频</strong></h4>
<hr>
</div> <!--分割图片-->
<div><img src="img/productlist.gif" width="100%" height="50px"/></div> <!--图书展示块-->
<div>
<table width=
版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_45596022/article/details/108944087
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
