html知识总结

最近想要对前端的一些基础知识进行一些总结，废话不多说，就从html开始吧！

1.HTML的定义

HTML，超文本标记语言，就是浏览器可以识别的语言，目前网络（web）上应用最广泛的语言。
HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。
我们写好html文件（***.html）后，可以直接右键选择打开方式中选择浏览器来打开。主流的浏览器包括IE、Firefox、Chrome、opera等。

2.HTML标签元素

HTML元素由开始标签和结束标签组成。有一对开始<>和结束</>

<p></p>
<div></div>

一般标签名推荐用小写。
标签具有属性，属性用来表示标签的特征。比如，我们用大小这个属性，来衡量一个苹果。所以，大小可以用来表示苹果的特征。属性时写在标签里面的，而且是开始标签内。如：

<div width="12px"></div>
<a href="http://www.baidu.com"></a>

3.HTML 文件的基本结构

<html>
    <head>
        <title>这是我的博客</title>
    </head>
    <body>
      这是我的身体。
    </body>
</html>

第一个标签<html>是告诉浏览器这是html文档的开始。Html文档的最后一个标签是</html>，是告诉浏览器这是html的终止。
标签<head></head>之间的文本是头部信息，
标签<title></title>之间的文本是文档标题，会显示在浏览器的窗口的标题栏。-
<body></body>之间的文本是正文。

4.规范的html页面

<!DOCTYPE html>  //要写文档声明语句
<html lang="en">
<head>
    <meta charset="UTF-8">  //这里是页面的编码方式
    <title>这里是标题</title>
</head>
<body>
    
</body>
</html>

文档声明
在<html>前，要写文档声明语句: <!DOCTYPE HTML>，当然也可以用小写表示<!doctype html>。文档声明的作用是告诉浏览器该文档遵循html规范。
标题
一般情况下，我们都会设定html文档的标题。这样的作用是使用户看起来感觉友好。标签为<title></title>,标签内放标题名称。
页面编码
编码的种类有多种，但常用的是utf-8和gb2312。utf-8为多国语言编码,也是最常用的编码方式，gb2312为中文简体编码。对于编码的详细问题，可以浏览博客。设置网页编码的语句为<meta charset= "utf-8" />，是在<head></head>标签内定义的。
页面关键字，内容
我们可以在文档中设置一些关键词，内容介绍。这样的好处是，当我们的网页发布在网上，用户可以通过在搜索框中输入关键字，找出一些比较符合的网页。这样一来，我们的网页便可以更容易地被别人访问。

5.常用标签*

1.文本标签

<p>一段文本</p>

2.标题标签

<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>

3.小文本标签

<span>普通文本</span>
<b>定义粗体文本</b>
<i> 定义斜体文本 </i>
<del>定义删除文本</del>
<sup>定义上标字</sup>
<sub>定义下标字</sub>

4.列表标签

//无序列表
<ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
</ul>
//无序列表
<ol>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
</ol>
//li标签必须包含在ul标签或者ol标签里面

(1) 可以通过改变ul的‘type’属性来改变无序列表的类型详见这里
(2)同理可以通过改变 ol的‘type’属性来改变有序列表的类型详见这里
5.超链接标签

<a href="http://www.baidu.com">点我跳转到百度</a>
<a href="http://www.baidu.com"  target="_blank">点我跳转到百度（在新窗口中打开）</a>

(1) a标签有个非常重要的独有属性href，通过这个属性可以设置点击后跳转到哪个页面。
(2) 可以通过设置a标签的target属性为"_blank"来使得本次跳转在新窗口中打开。
6.图像标签

<img src ="/i/eg_cute.gif">
<h2>可以设置图像和文字的对齐方式</h2>
<p>图像 ![](/i/eg_cute.gif) 在文本中下对齐</p>
<p>图像 ![](/i/eg_cute.gif) 在文本中中间</p>
<p>图像 ![](/i/eg_cute.gif) 在文本中上对齐</p>
![](/i/eg_goleft123.gif)

(1) img标签有个非常重要的独有属性src，这个属性的值为所选图片的路径。
(2) 可以通过设置align属性来设置图片和文字究竟是上对齐，中间对齐还是，下对齐，默认为下对齐
(3) 可以通过设置alt属性来设置当图片加载失败的时候显示一定的文字。
(4) 中还有一些width等属性，不过这些属性在一般的项目中都是通过css来设置，在事迹使用中较少，所以在此不多赘述。
7.表单标签*

<form action="" method="">
      这是个文本输入框:<br>
      <input type="text" name="firstname" value="Mickey"><br>
      这是个文本输入框（密码）:<br>
      <input type="password" name="psw"><br>
      这是个按钮:<br>
      <input type="buttom" name="lastname" value="button"><br>
      这是个单选框:<br>
      <input type="radio" name="sex" value="male" checked>Male
      <input type="radio" name="sex" value="female">Female<br>
      这是个多选框:<br>
      <input type="checkbox" name="a" value="apple" checked>apple
      <input type="checkbox" name="a" value="pear">pear
      <input type="checkbox" name="a" value="apple" checked>banana
      <input type="checkbox" name="a" value="pear">watermelon<br>
      这是个选择框:<br>
      <select name="cars"><br>
          <option value="volvo">Volvo</option><br>
          <option value="saab">Saab</option><br>
          <option value="fiat">Fiat</option><br>
          <option value="audi">Audi</option><br>
      </select><br>
      这是个大文本框:<br>
      <textarea name="message" rows="10" cols="30">
      The cat was playing in the garden.
      </textarea><br>
      这是个文件选择按钮:<br>
      <input type="file" value=""><br>
      这是个提交按钮:<br>
      <input type="submit" value="Submit"><br>
</form>

(1) form表单有个action个，定义表单向哪里提交数据，默认值为当前页面。
(2) form表单还有个method属性，定义提交数据的方式，一般主要是post，get。两种提交方式详情点击这里
(3) form表单内可以包含各种输入框（input ，textear，select），可以通过设置input标签的"type"属性来设置输入框的样式，通常有:text（文本框）,password（密文框）,radio（当选框）,checkbox（多选框）,buttom（按钮）,submit（提交按钮），file（文件选择）
(4) 文本框有个value属性，可以说设置文本框里面的内容
(5) select标签有个有个value属性，可以说设置选择框所选择的内容，只要对应其option标签的value就可以选定当前标签。
(6) 单选和多选框都可以设置一个checked属性来设置选定当前选项
(7) 点击submit提交按钮之后就会将form表单内的内容提交到action属性对应的地址，此时必定跳转页面。
(8) 表单元素可以说是html最重要的元素之一，以上总结的只是常用到的一些知识，但是要真正掌握，需要更加详细的学习，点击这里详细学习表单元素。
8.div标签

<div></div>

(1) div标签没有什么独特的属性，但却是目前web应用中应用最多的标签之一，因为在目前流行的盒子模型里面，经常用div标签来标识一个个页面模块。
9.table标签

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

6.最后关于html的一些小话

1.html是一种标签之间可以互相嵌套的语言，也就是标签里面可以嵌套标签，这也正是它的强大之处。
2.不得不说，html里面的标签实在是太多了，想要全部记住，基本不可能，但是以上列出来的标签可以说是用得比较多的，必须得记住。当然还有一些h5新出的标签例如媒体标签audio，画布canvas......等等。
3.很多初学者刚刚开始打代码的时候会觉得代码需要一个个字母去敲很麻烦而懒得去敲代码，但是代码光是看是记不住的。所以笔者推荐用一些具有较为强大提示功能的ide去打html的话入门会比较简单。这里推荐一款国内的ide叫做Hbuilder，虽然subline（笔者目前正是用这个），webstorm都是很优秀的工具，可是对于初学者的话我还是首推Hbuilder 点击这里下载。
4.这篇文章只是总结性的文章，如果需要更加详细去学习html，请移步这里
5.随着h5的出现，html诞生了很多新特性，新的接口，新的标签，点击这里学习html5

html知识总结