[前端基础]HTML知识总结

  baikapala

一、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、特殊文本----转义字符:



空格    &nbsp;
<    &lt;
>    &gt; 



2、标题: h1---h6

<h1></h1>---一号标题 

3、段落:<p></p>----段落间距

4、换行:<br /> 

5、分组元素:

<div></div>:独占一行

<span></span>:不会影响原有的布局

6、块级(block)元素和行内(inline)元素:

块级元素:独占一行的元素,比如 h1/p/div

行内元素:和其他元素在同一行上,比如 span/a 


四、图像和链接

1、图像标记  <img /> 

相对路径:<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>

当前页面上嵌入其他页面,常用于广告页面



以前,我总以为自己是菜鸟,也总想着早起的鸟儿有虫吃。直到有一天我想飞,才愕然的发现自己没有翅膀和羽毛,我竟然是菜虫!早起的虫儿被鸟吃……原来,百足应该厚积薄发!