[前端基础]HTML知识总结
一、html 概述和基础语法
- 1、html 是一种编写网页的解释性的标记语言，结合 CSS 和 JS 实现功能复杂的页面
- 2、解释性：翻译，非编译---代码有错误，可能导致效果错误
- 3、标记：用一对 <> 括起来的，显示时候会有特定的效果;
封闭类型：成对出现，也叫双标记，比如<h1></h1>;
非封闭类型：只有一个标记，也叫单标记，比如<br />（建议） 或者<br>;
属性：出现在开始标记里，用空格隔开，属性名称="属性值"或者一对单引号<br/>、 <img />,比如<h1 align="center" xx="">sss</h1>; - 4、术语：元素----标记;
- 5、显示页面：用浏览器---IE、Google、Firefox、Opera、Safari
二：html 文档的创建
1、文档的标准结构
版本信息<html> <head></head> <body></body> </html>2、版本：严格型、传统型、框架型
3、head为页面头元素---包含和页面整体信息相关的内容:
title：为页面定义标题 meta：元数据 style：样式 script：脚本代码4、body：文档的主体---各种文本以及各种标记
三、文本标记
- 1、特殊文本----转义字符：
空格 、< <、> > - 2、标题： h1---h6 如---一号标题
- 3、段落：----段落间距
- 4、换行：
- 5、分组元素：
<div></div>：独占一行 <span></span>：不会影响原有的布局 - 6、块级(block)元素和行内(inline)元素：
块级元素：独占一行的元素，比如 h1/p/div 行内元素：和其他元素在同一行上，比如 span/a
四、图像和链接
- 1、图像标记
相对路径：<img src="images/a.jpg" /> 绝对路径：<img src="http://ssss/a.jpg" /> - 2、超级链接
<a href="">click me</a> <a href="users/login.html"></a> href="http://www.xxx." target="_blank" - 3、同一个页面的不同部分之间的
<a href="#">XXXx</a>---回到顶端 - 4、锚点的定义和使用
实现选择性的在页面的不同位置之间跳转<a name="xxx"></a>---锚点 <a href="#xxx">To XXX</a>
五、列表： ul ol li
经常会使用嵌套的列表实现导航菜单 ---配合链接，实现导航目录效果
<ul>
<li>
电器
<ul>
<li>小家电</li>
<li>白色家电</li>
</ul>
</li>
<li>
图书
<ul>
<li>考试用书</li>
<li>儿童读物</li>
</ul>
</li>
</ul>
六、表格：显示网格数据、布局
- 1、表格的基本结构：自上而下，从左到右
<table> <tr>---table row <td>---单元格 table defination - 2、常用的属性
table：border/width/height/cellspacing/cellpadding td：width/height/align/valign - 3、表格的其它
为表格添加标题： <caption> 行分组：thead/tbody/tfoot 复杂分组的时候，可以有多个 tbody - 4、不规则表格：设置 td 的跨行或者跨列
colspan = "3"---横着 rowspan = "3"---竖着 - 5、表格的嵌套：实现复杂布局时，比如table 写在 td 里
七、表单
- 1、表单：承载表单上元素（如文本框、按钮等），数据的录入和交互，提交到服务器端
其他数据 <form action="login.jsp" method="post"> 保存 </form> 其他数据 - 2、表单上的元素
- 3、input ：输入框---type取值的不同，不同类型
<input type="text" /> <input type="password" /> <input type="radio" />--互斥的单选效果 <input type="checkbox" />--多选 <input type="submit" />--提交按钮 <input type="reset" />--重置，恢复到初始状态 <input type="button" value="普通按钮" /> <input type="file" />---选择本地文件，备于上传 <input type="hidden" />--隐藏域，不显示----常用来记载不希望用户看见的关键数据，隐秘数据（加密完毕再存入） - 4、input 元素的属性
name 属性：提交数据用，名称 value 属性：提交的值--文本框（初始值）、单选或者多选框（提交的值） 名值对：提交数据到服务器端，比如：second.html?uu=john&sex=m&role=sa - 5、label标记：使用for属性和某个元素发生关联，for的值必须是关联控件的 id 值
- 6、select：下拉框或者列表框 size="n"，option元素：选项
- 7、textarea：多行文本域
- 8、表单控件的分组元素：fielsetset/legend
八、浮动框架
<iframe src="其他页面的URL"></iframe>
当前页面上嵌入其他页面，常用于广告页面
正文到此结束
