HTML学习总结&基础篇
Posted erhao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
<dt></dt>
<dd></dd>
<dd></dd>
<dd></dd>
</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> 标签定义）
语法：
<table border="1"> <tr> <td>12</td> <td>12</td> </tr> <tr> <td>21</td> <td>21</td> </tr> </table>
以上是关于HTML学习总结&基础篇的主要内容，如果未能解决你的问题，请参考以下文章
Python学习笔记——基础篇第五周——json & pickle 模块