原创

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

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

正文到此结束
本文目录