[前端基础]HTML知识总结

最新推荐文章于 2021-01-12 16:40:32 发布

白卡pala

最新推荐文章于 2021-01-12 16:40:32 发布

阅读量110

点赞数

本文链接：https://blog.csdn.net/xuwangcheng14/article/details/106025065

版权

一、html 概述和基础语法
二：html 文档的创建
三、文本标记
四、图像和链接
五、列表： ul ol li
六、表格：显示网格数据、布局
七、表单
八、浮动框架

一、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>

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

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

白卡pala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
[前端基础]HTML知识总结

一、html 概述和基础语法二：html 文档的创建三、文本标记四、图像和链接五、列表： ul ol li六、表格：显示网格数据、布局七、表单八、浮动框架一、html 概述和基础语法 1、html 是一种编写网页的解释性的标记语言，结合 CSS 和 JS 实现功能复杂的页面 2、解释性：翻译，非编译---代码有错...
复制链接

扫一扫