天天看点

黑马程序员-HTLM知识点总结

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流! ----------------------

Html

     Html就是超文本标记语言的简写,是最基础的网页语言。

     Html是通过标签来定义的语言,代码都是由标签所组成。

     Html代码不用区分大小写。

     Html代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。

     头部分是给Html页面增加一些辅助或者属性信息,它里面的内容会最先加载。

   体部分是真正存放页面数据的地方

1HTML注释与特殊字符

    用<!--注释-->这种格式加入注释

    常用特殊字符表:

 HTML编码 显示或处理结果

 &lt      <

 &gt      >

 &amp     &

 &quot    "

 &reg     ®

 &copy    ©

 &trade   ™

 &nbsp    空格字符

2 body标签的属性

    text属性用于设置网页中文本的颜色

    link属性用于设置一般超链接文本的显示颜色

    alink属性用于设定鼠标移动到超链接上方时超链接文本的颜色

    vlink属性用于设定访问过的超链接文本的显示颜色

    leftmargin属性用于设定显示画面与浏览器左边缘的间隙,单位为像素

    topmargin属性用于设定显示画面与浏览器上边缘的间隙,单位为像素

3 格式标签

    <p></p> 段落标签

    <br> 换行标签

    <nobr></nobr> 防止因为文本过长浏览器自动换行

    <blockquote></blockquote> 以缩进的方式显示文本

    <center></center> 将内容居中显示

    <marquee></marquee> 滚动标签 属性 direction= left right up down

          behavior=slide 滚动一次

          behavior=scroll 循环滚动

          behavior=alternate 来回滚动

    <ol><li></ol>有序列表 

    <ul><li></ul>无序列表

    <pre></pre>预格式文本标签

4 文本标签

    <b></b>粗体字

    <i></i>斜体

    <u></u>下划线

    <sub></sub>下标

    <sup></sup>上标

    <tt></tt>打印机风格显示文本

    <cite></cite>引用方式显示文本

    <em></em>强调的文本

    <strong></strong>加重的文本

    <font></font> 属性(face:字体  size:大小 color:颜色)

5 超链接标签

    <a href = "url"></a>

    <a href = "mailto:....." subject="主题"><a>

    <a name = "name"><a href ="#name">同一页面的跳转

    URL(Uniform Resource Locator)统一资源定位

    url的基本组成:协议    主机名      端口号 资源名

                HTTP://www.baidu.com:8080/index.html

6 图像标签

    <image>标签 属性src ="url" alt align borderwidth height

    图像超链接 <a href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><imgsrc="logo.gif"></a>  

    图像地图:一副图像分成多个区域,每个区域指向不同的url地址,区域称为热点

    怎样产生图像地图:

        (1)首先必须定义出图像的各个热点的形状、位置坐标、及其指向的URL地址,这过程叫做热点映射,图像热点映射需要使用<map name=mapname></map>标签对进行说明

        (2)图像映射中的各个区域用<area>标签进行说明,<area>标签的格式为<area shape="形状"           coords="坐标" href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >,href也可用nohref进行替换,表示在该区域点击鼠标无效,<area>

        标签还有一个target属性,用来指明浏览器在哪个窗口或者帧中显示href指向的资源

        (3)定义好图像热点映射后,就在<img>中加入一个名为usemap的属性设置,usemap属性指定该图像被用作图像地图,值为图像热点映射名称,例如<img src="china.jpg"usemap="#mymap">

    sharp属性设置说明:

        rect 矩形 coords属性设置其左上角和右下角的坐标

        poly 多边形 coords属性设置其各个顶点的坐标

        cicle 圆  coords属性设置其圆心的坐标及其半径

1 表格基础

  <tr>行标签

  <td>单元格标签

  <td>中的nowrap属性防止因单元格内文本过长而自动换行

  <th></th>跟<td>作用差不多,其中文本为黑体居中,一般作为表头使用

  <caption></caption> 说明表格的信息

  每个表格可以有一个表头、一个表尾和一个或多个表体(即正文),分别以THEAD、TFOOT和TBODY元素表示。TBODY作用是:可以控制表格分行下载,从而提高下载速度。(网页的打开是先表格的的内容全部下载完毕后,才显示出来,分行下载可以先显示部分内容,这样会减少用户等待时间。)

2帧标签

  <frameset>标签对不能放在<body>标签中 border属性用来定义边框宽度 framebarder用于定义边框是  否显示,可以为0,1,no,yes

  <frame>属性 src表示初始url地址 name属性表示帧窗口的名字 scrolling 是否显示滚动条

  noresize边框是否允许移动

  <a href="" target="_blank" rel="external nofollow" >中的target属性:

       _blank 新启动一个窗口打开链接

        _self  在同一个窗口中打开,默认

        _parent在父窗口即上一级窗口中打开

        _top   在整个浏览器窗口中打开

  <noframes>标签对 如果使用的浏览器不支持frameset可在<noframes>标签对嵌套<body>输出这是个带  框架的网页但你的浏览器不支持

  <iframe>标签对可以不嵌套在<frameset>中,属性跟<frame>类似,创建了一个单独的帧窗口,实现画中画的效果

3 表单元素

  <form>用来创建一个表单,具有action,method,target,title,enctype

      action 用来设置接受的处理浏览器的表单内容的服务器程序的url,为空时默认为当前服务器

      method 取值为get,post

      target 用来指定服务器返回结果显示的目标窗口或者目标帧

      title 用来设置当网站访问者鼠标停留在表单任意位置几秒后浏览器用黄色小浮标显示的文本,一般为表单的名称或者描述

      enctype 指示浏览器使用哪种编码方式将表单数据传送给www服务器,取值:application/x-www-        form-urlencoded(默认 将上传的数据转换为URL编码)和multipart/form-data(使用表单上传文件使用)

   <input type="hidden"> 在表单中创建一个隐藏的表单元素,在向服务器提交时一并提交

   <input type ="file">  创建一个文本输入区域,并在旁边显示一个浏览按钮

   <input type="image" name="map"> 在表单中创建一个图像元素,在单击图像时可以实现跟提交按钮相同的功能,并提交鼠标单击处的X坐标Y坐标map.x map.y

   <select><option></option></select> 创建列表框

     <select的属性> multiple允许按ctrl选中多个列表项

    size 设置列表框中列表项显示的行数 默认为1

  <option>的属性 valueselected

   <textarea>标签对用于创建多行文本区域

  属性:cols列数rows行数

---------------------- ASP.Net+Android+IOS开发、.Net培训、期待与您交流! ----------------------

详细请查看:http://edu.csdn.net

继续阅读