1、HTML基础的基础**
1.1 什么是HTML：
全称Hypertext Markup Language：超文本标记语言，主要是用来写页面结构，定义每个页面是什么。HTML写出来的代码仅仅能将页面中的列表、输入框、图片、超链接、按钮等信息呈现出来，但效果也是很辣眼睛的。。.
1.2 HTML使用什么工具？
sublime text2很适合入门者使用的工具。
1.3 HTML标准
sublime text2输入以下代码
<!DOCTYPE html>
<html>
<head>
<title>我爱这个世界</title>
<meta charset=utf-8>
</head>
<body>hello world
</body>
</html>
以下是对每段代码的说明。
!DOCTYPE html
（声明文档类型是HTML，写在整个文档第一行）
<head>...</head>
（head标签中用于加入各种标记和属性标签）
charset="UTF-8"
（页面编码格式是UTF-8）
<title>...</title>
（页面title是：我爱这个世界，当然，title可以自由设置）
<body>...</body>
（页面所有信息，比如图片、文字、超链接都加入在body中）
总之，每个HTML文档中，都需要输入这段代码，具体的值可以根据自己所需的情况设定。（其实有些概念还有些模糊，但先这样写下去呗~）
1.3 HTML文件框架
1.3.1 段落标记：
<p>这是第一段</p>
<p>这是第二段</p>
p（paragraph）是分段标记，在HTML中，一般会用（小于< ）（ 标记 p ）（大于 > ）对字符进行标记，在结尾处加上（小于< ）（斜线/）（ 标记 p ）（大于 > ），表示到此为止，标记结束。
1.3.2 段落标记
<br>这是第一行
<br>这是第二行
br是换行标记，加入这个标记后，从标记后的第一个字开始的段落，会另起一行显示。br标记比较特殊，只需要加前面部分（小于< ）（ 标记 b ）（大于 > ），结尾处无需加（小于< ）（斜线/）（ 标记 b）（大于 > ）。
在HTML中，回车键和空格键不是表达的我们常用的编辑器的换行和空格效果。所以，在处理这些效果时，都需要加入特殊的标记。
1.3.3 标题
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
h1\h2\h3\h4\h5\h6分别代表的是一级标题到六级标题，每级标题显示的大小和粗细效果均不一样，一级标题最大最粗，六级标题最小最细，以此类推。
2、基础格式
2.1文字格式
<b> 这是加粗</b>
<i> 这是斜体</i>
<tt> 这是等宽西体</tt>
<small> 这是小点的字体</small>
2<sup>上标</sup>+9<sub>下标</sub>
<mark> 这是高亮</mark>
文字格式标签比较多，这里只是部分，每个标签的效果均在代码中直接写出来了。
有个比较有意思的上标和下标的效果，效果如下：2上标+9下标，一般在数学或者商标️中使用较多。
另外，mark的效果是高亮显示，这里仅表达的是高亮这个命令，具体高亮的样式再HTML中不表达，如果有特殊需求，需要用CSS进行补充。
2.2段语格式
<em>这是强调</em>
<strong>这是着重</strong>
<code>这是代码样式</code>
<samp>例子代码</samp>
<kbd>kbd用户输入</kbd>
<var>variable变量</var>
<cite>cite引用</cite>
以上这些标记意思均在代码中表达了，目前只是测试看了一些效果，具体的使用场景还需要在真正写页面时才知道如何使用。
3、深入格式
3.1.HTML标记的属性
3.1.1 HTML属性：
<hr>
<hr width=50%>
<abbr title=中华人民共和国> 点击这里的时候显示注解</abbr>
hr不是公司的hr，是分割线的意思；这里也不需要在尾部加上</hr>，因为这个标记本身就是一个样式效果。
hr width=50%（分割线长短）
abbr（表示注解），abbr title=中华人民共和国（表示注解内容为『中华人名共和国），这里需要加上尾部标记。
3.2.列表与图片
3.2.1 列表
<ul>
<li>这是一</li>
<li>这是二</li>
<ol>
<li>这是1</li>
<li>这是2</li>
<li>这是3</li>
ul（项目符号<b>·</b>），li（每个项目标记）
ol（项目编号1. 2.），li（每个编号计数）
3.2.2 图片：图片是一个字符
<img src=“xxx.jpg" >
<img src=“xxx.jpg" width=50% height="200">
<img src=“xxx.jpg” alt=“图片未加载出来时，显示出来的字样” >
img src=“xxx.jpg" （图片取自本地文件名为xxx.jpg）
img src=“xxx.jpg" width=50% height="200"（图片宽高比）
img src=“xxx.jpg” alt=“图片未加载出来时，显示出来的字样”（图片未加载出来时，显示出来的字样）
在HTML中添加图片时，除了可用本地图片，还可以直接使用网络图片地址。但为了防止对方将图片删除引起当前页面图片失效，建议都将图片存储到本地后，再引用。
另外，目前图片可使用格式：jpg\gif\png
3.2.3 iframe
<iframe src="http://zhihu.com" width=800></iframe>
在当前页面中，插入zhihu.com这个网站，且可直接在当前页面进行浏览使用。
3.3.超链接
3.3.1 超链接
<a href="http://huaban.com/pins/882969860/">进入花瓣</a>
<a href="http://huaban.com/pins/882969860/“ target=_blank>进入花瓣</a>
a是指超链接， href超链接地址；
a href="http://huaban.com/pins/882969860/" target=_blank（进入超链接，且打开新页面）
3.3.2 页面内链接
<p id=xxxx>
<a href=“#xxx"> 点击这里跳转到xxx位置所在段落</a>
<a href=“xxx.html#xxx"> 点击这里跳转到xxx页面的xxx位置所在段落</a>
注释直接写在代码中了~
3.3.3 图片定位链接
3.4 表格
前面
<table border="1”>
<caption> 表格title </caption>
<thead>
<tr>
<th>os</th>
<th>chinese</th>
<th>french</th>
</thead>
</tr>
<tr>
<td>ios10</td>
<td>yes</td>
<td>tes</td>
</tr>
<tr>
<tfoot>
<td colspan="3">hahahaha</td>
</tr></tfoot>
</table>
后面
表格效果.png
table border="1”（表格、线占1个像素 ）
caption（表格title ）
thead （表头）
tr（列）
th（行 ）
tfoot（表尾）
以上是HTML基础入门的一些内容，第一次写了一个丑丑的页面，但还是成就感满满哈哈哈。接下来要学习CSS入门啦。
网友评论