HTML标记语言，网页制作的第一步。

什么是HTML呢？查百度

基础语法

常用标签

HTML是超文本标记语言，HTML不用编译，直接在浏览器中执行，HTML是一个文本文件。

HTML基本结构，标签，元素，属性，注解

  1. <html>
  2. <head>
  3.  <title>标题</title>
  4. </head>
  5. <body>
  6. </body>
  7. </html>

标签属性格式：

  1. <标签名 属性名=“属性值”></标签名>

文档类型声明：

  1. <!DOCTYPE> 声明必须放在html文档第一行，不是html标签

编码文件

  1. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

标题标签，段落标签，预格式化标签，水平线

  1. <h1></h1> <p> <pre></pre> <hr/>
  3. <i></i>
  4. <b></b>
  5. <ins>
  6. <del>
  7. <sub>
  8. <sup>

无序列表：

  1. <ul>
  2.  <li></li>
  3. </ul>
  5. disc 圆点
  6. square 正方形
  7. circle 空心圆

有序列表:

  1. <ol>
  2.  <li></li>
  3. </ol>
  1. <dl>
  2. <dt>
  3. <dd>
  4. </dl>

结构，表现，行为

图片标签

  1. <img src="" alt=""/>

相对路径，绝对路径

超链接标签：

  1. <a href=""> 内容 </a>
  2. href target title name
  3. _self _blank _top _parent

定义锚：

  1. <a href="#锚名"></a>
  2. <a name="锚名" ></a>

邮件链接：

  1. <a href="mailto:邮件地址"></a>

下载：

  1. <a href="xxx.rar"></a>

表格的基本结构，操作表格，属性，跨行，嵌套

  1. <table>
  2. <tr>
  3. <td>
  5. <table>
  6.  <tr>
  7.   <td></td>
  8.  </tr>
  9. </table>

添加标题

  1. <caption></caption>

加载过长，内容过多

表格分：表头，主体，脚注

  1. thead tbody tfoot
  3. <table>
  4.  <caption><caption>
  5.  <thead>
  6.  <tr>
  7.   <th></th>
  8.  </tr>
  9.  </thead>
  10.  <tbody>
  11.  <tr>
  12.  <td></td>
  13.  </tr>
  14.  </tbody>
  15.  <tfoot>
  16.  </tfoot>
  17. </table>

表格属性

width表格宽度，align对齐方式，border表格边框的宽度，Bgcolor表格背景颜色，cellpadding内容之间的空白，cellspacing单元格之间的空白，frame和rules。

跨列属性: colspan

跨行属性: rowspan

表格嵌套：

  1. <table>
  2.  <tr>
  3. <td></td>
  4. <td>
  5. <table>
  6. <tr>
  7. <td></td>
  8. <td></td>
  9. <tr>
  10. </table>
  11. </td>
  12. </tr>
  13. </table>

表单结构，表单常用元素，表单交互属性

语法：文本域，单选框，复选框，按钮，列表

  1. <form>
  2. ...
  3. </form>
  5. input
  6. select
  7. option
  8. textarea
  9. optgroup
  11. <input type="" name=""/>
  12. text password file checkbox radio button submit reset hidden image
  14. name maxlength size value placeholder
  1. <input type="image" name="" src="imageurl" />
  3. <input type="hidden" name="" value="" />
  4. 传输给服务器

下拉菜单和列表标签

  1. <select>
  2.  <option value=""></option>
  3.  <option value=""></option>
  4. </select>
  6. name multiple可以多选 size显示条目
  8. <option>标签属性
  9. selected value

分组下拉菜单

  1. <select name="">
  2.  <optgroup label="组1">
  3.   <option value=""></option>
  4.  </optgroup>
  5.  <optgroup label="组2">
  6.   <option value=""></option>
  7.  </optgroup>
  8. </select>

多行文本域

  1. <textarea name="" rows="" cols="">
  2. </textarea>
  4. name placeholder rows cols
  1. <form action="" method="" name="" >
  2. </form>
  4. action method name target enctype

网页结构：

  1. <body>
  2. // 头部
  3. <div></div>
  4. // 主体
  5. <div></div>
  6. // 页脚
  7. <div></div>
  8. </body>
  10. <div>
  11. <dl>
  12. <dt></dt>
  13. <dd></dd>
  14. <dd></dd>
  15. </dl>
  16. </div>

总结：

html表单，表单应用场景，表单工作原理

  1. <input type="" name="" />
  2. text password file checkbox radio button submit reset hidden image
  3. <form>
  4. <input type="text" name=""/>
  5. </form>
  7. name, maxlength, size, value, placeholder
  8. <form>
  9. <input type="password" name=""/>
  10. </form>
  12. <form>
  13. <input type="file" name=""/>
  14. </form>
  16. <form>
  17. <input type="radio" name="" value="" checked/>
  18. </form>
  20. <form>
  21. <input type="checkbox" name="" value="" checked/>
  22. </form>
  24. <input type="button" name="" value=""/>
  25. type="submit"
  26. type="reset"
  27. <input type="image" name="" src="imageurl"/>
  29. <input type="hidden" name="" value=""/>
  31. html表单
  32. input select option optgroup textarea
  34. <select>
  35.  <option value=""></option>
  36. </select>
  38. name multiple size
  39. selected value
  41. <textarea name="" rows="" cols="" >
  42. </textarea>
  44. name placeholder rows cols
  46. <form action="" method="" name="">
  47. </form>
  48. action method name targer enctype
  49. url get,post form_name _blank,_self,_parent,_top
  50. text/plain
  51. multipart/form-data

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.      <!-- 网页头部内容 -->
  5. <title>标题</title>
  6. </head>
  7. <body>
  8.      <!-- 网页主体内容 -->
  9. </body>
  10. </html>

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

作者简介

达叔，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

感谢！承蒙关照！您真诚的赞赏是我前进的最大动力！

这是一个有质量，有态度的公众号

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

HTML基础系列的更多相关文章

  1. 【Basics of Entity Framework】【EF基础系列1】

    EF自己包括看视频,看MSDN零零散散的学了一点皮毛,这次打算系统学习一下EF.我将会使用VS2012来学习这个EF基础系列. 现在看看EF的历史吧: EF版本 相关版本特性介绍 EF3.5 基于数据 ...

  2. C#基础系列——Attribute特性使用

    前言:上篇 C#基础系列——反射笔记 总结了下反射得基础用法,这章我们来看看C#的另一个基础技术——特性. 1.什么是特性:就博主的理解,特性就是在类的类名称.属性.方法等上面加一个标记,使这些类.属 ...

  3. C#基础系列——小话泛型

    前言:前面两章介绍了C#的两个常用技术:C#基础系列——反射笔记 和 C#基础系列——Attribute特性使用 .这一章来总结下C#泛型技术的使用.据博主的使用经历,觉得泛型也是为了重用而生的,并且 ...

  4. C#基础系列——委托实现简单设计模式

    前言:上一篇介绍了下多线程的相关知识:C#基础系列——多线程的常见用法详解,里面就提到了委托变量.这篇简单介绍下委托的使用.当然啦,园子里面很多介绍委托的文章都会说道:委托和事件的概念就像一道坎,过了 ...

  5. C#基础系列——委托和设计模式（二）

    前言:前篇 C#基础系列——委托实现简单设计模式 简单介绍了下委托的定义及简单用法.这篇打算从设计模式的角度去解析下委托的使用.我们知道使用委托可以实现对象行为(方法)的动态绑定,从而提高设计的灵活性 ...

  6. C#基础系列——再也不用担心面试官问我“事件”了

    前言:作为.Net攻城狮,你面试过程中是否遇到过这样的问题呢:什么是事件?事件和委托的区别?既然事件作为一种特殊的委托,那么它的优势如何体现?诸如此类...你是否也曾经被问到过?你又是否都答出来了呢? ...

  7. C#基础系列——异步编程初探：async和await

    前言:前面有篇从应用层面上面介绍了下多线程的几种用法,有博友就说到了async, await等新语法.确实,没有异步的多线程是单调的.乏味的,async和await是出现在C#5.0之后,它的出现给了 ...

  8. C#基础系列——一场风花雪月的邂逅：接口和抽象类

    前言:最近一个认识的朋友准备转行做编程,看他自己边看视频边学习,挺有干劲的.那天他问我接口和抽象类这两个东西,他说,既然它们如此相像, 我用抽象类就能解决的问题,又整个接口出来干嘛,这不是误导初学者吗 ...

  9. 2015年12月28日 Java基础系列（六）流

    2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流2015年12月28日 Java基础系列(六)流

  10. c#基础系列（转）

    转:http://www.cnblogs.com/landeanfen/p/4953025.html C#基础系列——一场风花雪月的邂逅:接口和抽象类 前言:最近一个认识的朋友准备转行做编程,看他自己 ...

随机推荐

  1. LESS的简单介绍

    对于一些布局和样式比较复杂的网页,如何构建一个健康.优雅的CSS文件是一个很令人苦恼的问题.在书写静态页面的时候,我总是遇到布局结构累赘和重复样式复用性不高的问题,当然,对于这些问题归根究底还是要多联 ...

  2. Centos6.5DRBD加载失败，系统更换yum源（国内163）

    我安装的系统是centos6.5的,要在系统上安装DRBD镜像软件,安装完后,无法加载modprobe drbd. 需要更新kernel. 1,首先,先把yum源更换成国内的,不然无法更新kernel ...

  3. ES的基本用法

    ES的基本概念 1> 集群和节点 一个es集群是由一个或多和es节点组成的集合 每一个集群都有一个名字, 如之前的wali 每个节点都有自己的名字, 如之前的master, slave1, sl ...

  4. JQUERY获取loaded 宽高这么变态

    JQUERY获取loaded 宽高这么变态: $('<img/>').attr('src',img.src).load(function() { img.Owidth = $(this). ...

  5. Linux时间子系统之五：低分辨率定时器的原理和实现

    专题文档汇总目录 Notes:低精度timer在内核中的数据结构以及API接口:低精度timer精巧高效的分组,使用cascade进行定时器移位,组内Timer FIFO:低精度Timer的初始化流程 ...

  6. 关于数据库报Packet for query is too large (1986748 > 1048576)(mysql写入数据过大)的解决办法

    方法2 (很妥协,很纠结的办法) 进入mysql server 在mysql 命令行中运行 set global max_allowed_packet = 2*1024*1024*10 然后关闭掉这此 ...

  7. 『网络の转载』关于初学者上传文件到github的方法

    说来也惭愧,我是最近开始用github,小白一个,昨天研究了一个下午.终于可以上传了,所以今天写点,一来分享是自己的一些经验,二来也是做个记录,万一哪天又不记得了:) 废话不多说,直接来,这次主要介绍 ...

  8. 一类SG函数递推性质的深入分析——2018ACM陕西邀请赛H题

    题目描述 定义一种有根二叉树\(T(n)\)如下: (1)\(T(1)\)是一条长度为\(p\)的链: (2)\(T(2)\)是一条长度为\(q\)的链: (3)\(T(i)\)是一棵二叉树,它的左子 ...

  9. bzoj 4565 状压区间dp

    我还以为我状压很好...... 噗!!! 果然我区间很差... f[i][j][s]表示i~j段,合并后的状态为s所得的最大收益 枚举i,j,k,s. f[i][j][s<<1]=max( ...

  10. bzoj 1189 紧急疏散 网络流

    二分答案,网络流判断 将每个门拆点,每个人连向每个门的dis~当前解 然后跑最大流,如果等于人数,即为可行解 #include<cstdio> #include<iostream&g ...