HTML学习总结&基础篇

何为坚持？一个“勤”，一个“忍”。

年前给自己定的目标，今年一定要坚持多逛园子，多看一些大佬的帖子，然后自己也尽量能够分享自己学习的收获，让自己进步快些，但是多逛园子是做到了，写博客这个东西，今年好像还没分享了一篇，想想真是惭愧。仔细想想，主要原因是自己懒，文笔差，感觉自己技术掌握的东西太少了，对学习到的东西理解不深入，不知道该写些啥......，所以就没有去做，不过在接下来，自己也反复思考，觉得还是希望自己能够勤快点，通过博客记录自己学习的东西，多和大家讨论学习。

今天主要分享的是自己这两天学习HTML的一些知识点，由于自己在学校没有好好学，导致前端的知识点学的是一团糟，所以想趁着最近项目不是很赶，找点时间来补补重新去学习一下。

1.0何为HTML?

HTML（超文本标记语言）是一种用于创建网页的标准标记语言，HTML不需要编译，可以直接由浏览器执行，它的解析依赖于浏览器的内核。它不是一种编程语言，而是一种标记语言。

2.0HTML骨架

<!DOCTYPE>       //文档声明头

<html>                //html标签

<head>               //head标签的开始

<meta charset="utf-8"> //meta标签，设置编码，编码种类有很多，但是常见的是utf-8和gb2312

<title>HelloWord</title> //title标签

</head>              //head标签结束

<body>              //body标签开始，主要是包含了可见页面内容

</body>             //body标签结束

</html>             //html标签结束

3.0两类标签

1、容器级标签，代表：h系类标签,h标签有六种h1,h2,h3,h4,h5,h6

2、文本级标签，代表p标签

4.0图片标签

HTML的图像是通过标签<img>来定义的。

语法: <img src=”01.jpg” />

src 图片地址 alt图片无法显示时显示文字 title 悬停文字, 当鼠标停在图片上禁止不动时, 出现的补充说明

5.0图片的相对路径

一、图片和html文件在同一个文件夹中, 则src="01.jpg" 或者src=”./01.jpg”

二、图片在上一层文件夹中, 则 src=”../01.jpg”

三、图片在下一层文件夹中, 则 src="./images/01. jpg"

四、图片在上一层的上一层文件夹中, 则 src=”../../01.jpg”

注意：超链接的相对路径和图片的相对路径基本一样

6.0给图片添加超链接的语义

意思就是我们点击一张图片可以跳转到一个网页

<a href=”http://www.taobao.com”><img src=”./images/02.jpg” /></a>

7.0页面内的锚点

回到顶部：<a href=”#” >回到顶部</a>

8.0无序列表

无序列表是一个组合标签（缺一不可）

<ul>

<li>语文</li>

<li>数学</li>

<li>英语</li>

</ul>

9.0有序列表

有序列表是一个组合标签（缺一不可）

<ol>

<li>冠军</li>

<li>亚军</li>

<li>季军</li>

</ol>

10.0自定义列表

<dl>

</dl>

11.0 div和span

HTML可以通过<div>和<span>将元素组合到一起。

div是一个块级元素，可以包含段落，表格等内容，用于放置不同的内容。一般我们在网页通过div来布局定位网页中的每个区块。
span是一个内联元素，没有实际意义，它的存在纯粹是为了应用样式，给一段内容加上<span></span>标记可以通过在span上定义样式来设定其内容的样式。

12.0表单元素

表单主要获取用户填写的数据，然后通过浏览器向服务器传送。

表单使用的标签（<form></form>）

12.1文本框

<form>

<input type="text" name=”username”>

</form>

Input 就是输入的意思 type是类型 text就是文本 name是元素的名称 value是input元素的值

12.2密码框

<form>

<input type=”password” name=”pwd”>

</form>

Input 就是输入的意思 type是类型 password就是密码,密码字段不会以明文形式显示，而是以星号或者原点代替

12.3单选框

<form>

<input type="radio" name="sex"  value=”male”>男

<input type="radio" name="sex"  value=”female”>女

</form>

要实现单选功能, 必须使用name属性, 让该属性具有相同的值, 那么就成组, 就可以实现单选功能。

12.4复选框

<form>

<input type="checkbox" name="hobby” value="basketball">打篮球

<input type="checkbox" name="hobby” value="football">踢足球

</form>

12.5 label标签

<form>

<input type="checkbox" name="sex" id=”male” value="1"><label for=”male”>男</label>

</form>

12.6下拉列表

<form>

<select>

<option>C#</option>

<option>Java </option>

<option>PHP</option>

</select>

</form>

12.7多行文本域

<form>

<textarea cols=”20” rows=”10” name=”content”></textarea>

</form>

name 是元素的名称 rows是指定文本框的高度 cols 是指定文本框的宽度

12.8隐藏域

<form>

<input type="hidden” name="id” value="1”/>

</form>

12.9上传文件

<form>

<input type="file” name="image"/>

</form>

利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。

multiple 控制是否上传多文件

12.10三种按钮标签

普通标签

<form>

<input type="button" value="登录" />

</form>

提交按钮

<form>

<input type="submit" value="提交"/>

</form>

重置按钮

<form>

<input type="reset" value="重置"/>

</form>

13.0 <iframe>内嵌框架

语法：<iframe src="url" name="框架名"></iframe>

<iframe src="http://www.taobao.com" name="taobao" height="800" width="1080"></iframe>

主要属性:

width 指定框架的宽度属性值：px ,%

heigh 指定框架的宽度属性值：px ,%

scrolling 是否显示滚动条属性值：yes,no,auto

frameborder 是否显示边框属性值：1, 0

14.0表格

表格是由<table>标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）

15.0杂项

15.1文本格式，设置文本字体元素

<br />换行

<hr />水平线

15.2注释

主要功能是用于解释说明代码，让阅读起来更方便

语法：

<table border="1">

    <tr>

        <td>12</td>

        <td>12</td>

    </tr>

    <tr>

        <td>21</td>

        <td>21</td>

    </tr>

</table>

这就是这两天学习总结的内容，也许写的不好，希望大家能够谅解和指正。路漫漫其修远兮，吾将上下而求索.