1、HTML基础的基础**

1.1 什么是HTML：

全称Hypertext Markup Language：超文本标记语言，主要是用来写页面结构，定义每个页面是什么。HTML写出来的代码仅仅能将页面中的列表、输入框、图片、超链接、按钮等信息呈现出来，但效果也是很辣眼睛的。。.

1.2 HTML使用什么工具？

sublime text2很适合入门者使用的工具。

1.3 HTML标准

sublime text2输入以下代码

 


    我爱这个世界
    

hello world

以下是对每段代码的说明。

!DOCTYPE html

（声明文档类型是HTML，写在整个文档第一行）

...

（head标签中用于加入各种标记和属性标签）

charset="UTF-8"

（页面编码格式是UTF-8）

...

（页面title是：我爱这个世界，当然，title可以自由设置）

...

（页面所有信息，比如图片、文字、超链接都加入在body中）

总之，每个HTML文档中，都需要输入这段代码，具体的值可以根据自己所需的情况设定。（其实有些概念还有些模糊，但先这样写下去呗~）

1.3 HTML文件框架

1.3.1 段落标记：

这是第一段

这是第二段

p（paragraph）是分段标记，在HTML中，一般会用（小于< ）（标记 p ）（大于 > ）对字符进行标记，在结尾处加上（小于< ）（斜线/）（标记 p ）（大于 > ），表示到此为止，标记结束。

1.3.2 段落标记


这是第一行

这是第二行

br是换行标记，加入这个标记后，从标记后的第一个字开始的段落，会另起一行显示。br标记比较特殊，只需要加前面部分（小于< ）（标记 b ）（大于 > ），结尾处无需加（小于< ）（斜线/）（标记 b）（大于 > ）。

在HTML中，回车键和空格键不是表达的我们常用的编辑器的换行和空格效果。所以，在处理这些效果时，都需要加入特殊的标记。

1.3.3 标题

这是一级标题
这是二级标题
这是三级标题

h1\h2\h3\h4\h5\h6分别代表的是一级标题到六级标题，每级标题显示的大小和粗细效果均不一样，一级标题最大最粗，六级标题最小最细，以此类推。

2、基础格式

2.1文字格式

  这是加粗
 这是斜体
 这是等宽西体
 这是小点的字体
2^上标+9_下标
 这是高亮

文字格式标签比较多，这里只是部分，每个标签的效果均在代码中直接写出来了。

有个比较有意思的上标和下标的效果，效果如下：2^上标+9_下标，一般在数学或者商标^️中使用较多。

另外，mark的效果是高亮显示，这里仅表达的是高亮这个命令，具体高亮的样式再HTML中不表达，如果有特殊需求，需要用CSS进行补充。

2.2段语格式

这是强调
这是着重
这是代码样式

例子代码
kbd用户输入
variable变量
cite引用

以上这些标记意思均在代码中表达了，目前只是测试看了一些效果，具体的使用场景还需要在真正写页面时才知道如何使用。

3、深入格式

3.1.HTML标记的属性

3.1.1 HTML属性：



  点击这里的时候显示注解

hr不是公司的hr，是分割线的意思；这里也不需要在尾部加上，因为这个标记本身就是一个样式效果。
hr width=50%（分割线长短）

abbr（表示注解），abbr title=中华人民共和国（表示注解内容为『中华人名共和国），这里需要加上尾部标记。

3.2.列表与图片

3.2.1 列表


这是一
这是二


这是1
这是2
这是3

ul（项目符号·），li（每个项目标记）
ol（项目编号1. 2.），li（每个编号计数）

3.2.2 图片：图片是一个字符

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

在当前页面中，插入zhihu.com这个网站，且可直接在当前页面进行浏览使用。

3.3.超链接

3.3.1 超链接

进入花瓣
 
  
  3.3.2 页面内链接 
  
 
 点击这里跳转到xxx位置所在段落
 点击这里跳转到xxx页面的xxx位置所在段落
 
 注释直接写在代码中了~ 
  
  3.3.3 图片定位链接 
  
 3.4 表格 
 前面
hahahaha

    


后面
 
  
   
    
     
    
   
  
    表格效果.png 
   
  
 table border="1”（表格、线占1个像素 ）
 caption（表格title ）
 thead （表头）
 tr（列）
 th（行 ）
 tfoot（表尾） 
 以上是HTML基础入门的一些内容，第一次写了一个丑丑的页面，但还是成就感满满哈哈哈。接下来要学习CSS入门啦。

第二篇-HTML入门