[前端基础]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 如<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>

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

[前端基础]HTML知识总结

一、html 概述和基础语法#

二：html 文档的创建#

三、文本标记#

四、图像和链接#

五、列表： ul ol li#

六、表格：显示网格数据、布局#

七、表单#

八、浮动框架#

相关阅读

Shell脚本学习参考

UI自动化浏览器及驱动下载

常见应用在Centos下配置开机启动的方法

评论（0）