用一张图总结为：
HTML学习笔记（更新时间：20190531） | |||||
序号 | 名称 | 说明/代码 | 标签属性 | 属性值 | 备注 |
1 | html中英文名称 | 超文本标记语言Hypertext Markup Language | |||
2 | html发展史 | GML→SGML→HTML2.0（W3C）→HTML3.0→HTML4.0（xhtml）→HTML5 | |||
3 | html编辑软件 | 记事本、dreamweaver、webstorm | |||
4 | html拓展名 | .html .htm | |||
5 | html语法 | 单标签：<标签名 属性1="属性值" 属性2="属性值2"> 双标签：<标签名 属性1="属性值1" 属性2="属性值2"></标签名> | 1)英文状态下的双引号 2)空格分隔 3）双标签以斜杠结束 | ||
6 | html的代码结构 | <html> <head> <meta http-equiv="Content-Type" content="text/html charset=utf-8"> <title>网页的名字</title> </head> <body> <!--这里输入的网页的内容--> </body> </html> | |||
7 | 注释标签 | <!--注释内容--> | |||
8 | 元标签 | <meta/> | |||
9 | 标题标签 | <hn align="left\center\right">标题内容</hn> 示例： <h1>一级标题</h1> <h2>二级标题</h2> ………… <h6>六级标题</h6> | align="属性值" （文字对齐方式） | left（默认）、center、right | |
10 | 段落标签 | <p align="left\center\right">段落内容</p> | align="属性值" （文字对齐方式） | left（默认）、center、right | |
11 | 样式标签 | <b>内容加粗</b> | |||
<strong>内容加粗</strong> | |||||
<i>内容倾斜</i> | |||||
<u>内容下划线</u> | |||||
<font color="颜色" size="大小">文字内容</font> | |||||
<center>居中标签</center> | |||||
<br/> 换行 | |||||
12 | 特殊字符 |  ； 空格 >； > <； < | |||
13 | 横线标签 | <hr align="位置" size="高度" width="宽度" color="颜色"/> | align="属性值" （对齐方式） size="属性值" （高度，粗细） width="属性值" （宽度） color="属性值" （颜色） | align：center（默认）、left、right size：10px | |
14 | 网页中的图片 | <img src="路径" alt="图片提示文字" width="宽度" height="高度" border="线框" align="位置（中左右）" title="图片提示文字" /> | src="属性值" （图片路径） alt="属性值"（不搜索引擎友好） width="属性值" （宽度） height="属性值" （高度） border="属性值" （线框宽度） align="属性值" （对齐方式） title="属性值"（鼠标经过的时候提示的名字） | <![if !supportLists]>1）<![endif]>相对路径： . . /文件/11.jpg 去另一个文件中 文件/22.gif 在本文件夹下面 <![if !supportLists]>2）<![endif]>align：center（默认）、left、right | 单独修改，图片等比例放大缩小 |
15 | 超链接标签 | <a href="超链接路径，或者#表示空" target="属性值" name="锚点">内容</a> | href="属性值" （路径） target="属性值"（打开超链接的方式） name="属性值" | 1）herf： <![if !supportLists]>① <![endif]>超链接路径，或者#表示空（#可以直接返回页顶部） <![if !supportLists]>② <![endif]>href="#锚点的名称" 链接到当前页面的锚点指定位置eg： 点击超链接到达指定位置 <a href="#first">第一点</a> （用#锚点名称设置超链接，点击直达） <a name="first">第一点</a> （name的属性值设置为锚点名称） <p id="first">第一点</a> （普通标签用id设置锚点） 2）target：_self 在原窗口打开 _blank 在新窗口中打开，原窗口仍然存在 | 锚点用#开头 |
16 | 无序列表标签 | <ul type="circle、disc、square"> <li>列表项内容</li> <li>列表项内容</li> <ul> | type="属性值" （顷目符号） | circle（圆）、disc（实心圆）、square（方块） | |
17 | 有序列表标签 | <ol type="circle、disc、square" start="起始值"> <li>列表项内容</li> <li>列表项内容</li> </ol> | type="属性值" （顷目符号） start="起始值" | circle（圆）、disc（实心圆）、square（方块） | |
18 | 自定义列表 （图文混排） | <dl> <dt></dt> <dd></dd> <dd></dd> </dl> | |||
19 | 表格标签 | <table > <tr> （行标签） <th>表格内容</th> （表头标签） <td>表格内容</td> （单元格标签） <td>表格内容</td> </tr> </table> | <table></rable>标签属性 border="属性值" （边框） bordercolor="属性值" （边框颜色） width/height="属性值" （宽、高） cellspacing="属性值" （单元格之间的距离） cellpadding="属性值" （文字距离边框的距离） align="属性值" （表格自身的对齐方式） bgcolor="属性值" （背景颜色） background="属性值" （背景图片） | 边框宽度为1像素的表格制作技巧： <![if !supportLists]>1） <![endif]>table: border="1" cellspacing="1" bgcolor=" 边 框颜色" <![if !supportLists]>2） <![endif]>bgcolor="单元格颜色" 原理：通过单元格之间的缝隙漏出背景色，最终看到边框 | |
<tr></tr>行标签属性 align="属性值" （文字的对齐方式） valign="属性值" （文字垂直对齐方式） bgcolor="属性值" （背景颜色） | valign：top、middle、bottom | ||||
<td></td>单元格属性标签 colspan="属性值" 水平合并 rowspan="属性值" 垂直合并 | 单元格标签的宽度就决定了表格列的宽度，所以只设置第一行单元格的就可以了 | ||||
<table> <thead> <tr> <td></td> </tr> </thead> 表格头部 --------------------------------------------- <tbody> <tr> <td></td> </tr> </tbody> 表格主题 --------------------------------------------- <tfoot> <tr> <td></td> </tr> </tfoot> 表格脚步 </table> |
20 | 表单标签 | <form action="表单提交的地址"> ---------------------------------------------------------------- <input type="" name="" value=""/> <!--表单元素input--> <label for=""></label> <!--表单元素label--> ----------------------------------------------------------------- <select mutiple="mutiple" size="属性值" name="属性值"> <option value="属性值" selected="selected"></option> <option></option> </select> <!--下拉菜单--> ----------------------------------------------------------------- <textarea cols="属性值" rows="属性值" name="属性值"></textarea> <!--文本域--> ----------------------------------------------------------------- <button></button> <!--按钮标签--> ----------------------------------------------------------------- </form> | <form></form>表单标签属性 action="属性值" 表单提交的地址 target="属性值" 设置打开方式 value="属性值" 默认显示的文字 name="属性值" 表单的名称 method="属性值" 表单提交的方式 表单元素指的是丌同类型的 input 元素、复选框、单选按钮、提交按钮等等 | <![if !supportLists]>1）<![endif]>target="属性值" target="_blank" target="_self" <![if !supportLists]>2）<![endif]>method="属性值" 使用 GET 时，表单数据在页面地址栏中是可见的 POST 的安全性更加，因为在页面地址栏中被提交的数据是丌可见的 | |
21 | 表单元素标签 | <input type="属性值" value="属性值" size=" 属性值" maxlength="属性值" checked="属性值" name="属性值" disable 丌可用 checked="checked" /> | type="属性值" value="属性值" size=" 属性值" maxlength="属性值" checked="属性值" name="属性值" disable 丌可用 checked="checked" | <![if !supportLists]>1） <![endif]>type="text" （文本输入框） value="属性值" （文本框中显示的文字） size="属性值" （文本框的宽度） maxlength="属性值"（输入最多字符的个数） <![if !supportLists]>2） <![endif]>type="password" （密码输入框） ---- 标签属性和TEXT一致 <![if !supportLists]>3） <![endif]>type="radio" （单选框） name="组名" value="设置值" checked （标记默认选顷） 4）type="checkbox" （复选框） name="组名" value=“设置值” checked（标记默认选顷） disable 丌可用 <![if !supportLists]>5）<![endif]>type="file" （文件域） <![if !supportLists]>6）<![endif]>type="submit"（提交按钮，提交到form中action指定的路径） value="属性值"（按钮上的文字） 7）type="reset" （重置按钮） value="属性值"（按钮上的文字） 8）type="button" 普通按钮（功能需要js去开发） value="属性值"（按钮上的文字） 9）type="image" 图片按钮（自带提交属性） src="图片路径"（必须设置） 10） type="hidden" 隐藏域 value="设置值" | <![if !supportLists]>1）<![endif]>单选必须有name <![if !supportLists]>2）<![endif]>name中的名字是选顷的组名 |
22 | 文字标签 | <label for="属性值" ></label> <!--在 label 元素内点击文本，就会触发此控件> | for="属性值" | <input name="A"><label for="A"></label> | |
23 | 下拉菜单标签 | <select mutiple="mutiple" |
