公司项目需要,本人要做一些前端项目,拿起一些前端的bootstrap等包来用的时候发现应用的乱七八糟的,所以打算从基础开始,好好理解下前端,本篇是html的部分标签,下一章再了解CSS,因为是理解html标签,所以没有做成一个完整的项目,只是零散的应用,不过也便于以后自己开发过程中查看
<!DOCTYPE html>
<!--告诉浏览器我是用html写的-->
<html>
<head>这是一个head</head>
<!--告诉浏览器本html的编码方式,否则浏览器会按照其默认方式解码,可能导致乱码-->
<meta charset="utf-8">
<body>
<h1>一级标题,h会单独占据一行</h1>
<!--b标签表示加粗,i表示斜体-->
<p>
这是<b>第一段<i>文字</i></b><br>br会在一段中进行换行,p是分段<br>
<tt>tt会标识为打印文字</tt><br>
<small>small会将字体变小</small>
<del>这是我删除的(结构,不单单是删除线格式)</del><ins>这个文字是我加上的(结构,不单单是下划线结构)</ins>
<s>表示内容是过时的,不被使用的,不是删除</s><br>
a<sup>2sup上标</sup>+<sub>b0sub下标</sub>
<!--上标下标可以嵌套使用--><br>
<mark>mark标记高亮文字</mark>
<em>em强调文字,表示很重要</em><br>
<strong>strong强调文字,表示着重</strong><br>
<dfn>definition 定义</dfn><br>
<code>
code代码(这里在源文件中有回车)
不会保留原有的换行格式
</code><br>
<samp>sample 例子代码</samp><br>
<kbd>kbd 用户输入的文字</kbd><br>
<var>variable 变量</var><br>
<cite>cite 引用的文字</cite><br>
<code>
<pre>
pre中的格式不会被html格式化,原本格式里的换行也会被保留
很适合用于输入大段的源代码
</pre>
</code>
</p>
<address>
<blockquote>
<!--blockquote 缩进-->
Rm 401 CKP West Wing<br>
<blockquote> 羽泉 Camps<br></blockquote>
<q>浙江 U q标识引用</q>
</blockquote>
<!-- address 不仅仅显示在页面,会被浏览器识别,可以作为检索的一部分 -->
</address>
<p title="123456" id="there">
title可以放入章节和h中<br>
标签属性学习,属性最好在css中用
<hr width=50%>hr插入水平线
<hr width="50" align="left" size=10> 50像素
<abbr title="这是?就叫它备注?">请把鼠标放到我身上</abbr><br>
<bdo dir=rtl>这段文字的dir是rtl,rtl表示从右向左排序<bdi>bdi会把颠倒的顺序颠倒回来</bdi>
</bdo>
<UL>UL标签创建一个没有序号的列表
<LI>123</LI>
<LI>123</LI>
<LI>123</LI>
</UL>
<ol start="-1">ol会自动为列表加上序号,start属性指定序号从几开始
<li>123</li>
<LI>123</LI>
<LI>123</LI>
</ol>
<dl>dl标签可以理解为字典
<dt>dt表示一个词条</dt>
<dd>dd表示词条的解释</dd>
</dl>
</p>
对于html来说,图片是一个特殊的字符,会和前后文字连接<br>
<img src="http://img5.imgtn.bdimg.com/it/u=3987907653,720009510&fm=26&gp=0.jpg" alt="图片加载过程中会出现alt属性中的文本"
usemap="#map" />
<map name="map">
在图片的coords区域点击,会跳转到超链接
<area shape="rect" coords="0,0,50,50" href="https://blog.csdn.net/yun8686/article/details/82118602" />
</map>
<iframe src="http://www.baidu.com" height="400" width="1000">iframe能将另一个网页嵌入到当前网页</iframe><br>
<p>
<a href="https://gitee.com/Echoe/events" target="_blank">这是一个gitee的超链接,点击一下试试吧,target属性可以更改页面出现方式</a>
<a href="#there">这是一个页面内链接</a>
</p>
<p>
<table border="1">
<caption>caption中写表头</caption>
<thead>
<!--t head--表格标题,能被浏览器认定为表的标题,无论怎么翻转,标题都会留在上面-->
<tr>
<th>这是一个标题tableHead</th>
<th>这是另一个标题tableHead</th>
</tr>
</thead>
<tbody>
<tr>
<!-- tr表示一行 -->
<td>
<!--td表示一行中的一个格子-->
第一个格子
</td>
<td>这是第二个格子</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">colspan表示水平方向延展多少个格子</td>
</tr>
</tfoot>
</table>
</p>
</body>
</html>