黑马程序员_java基础笔记(09)...HTML基本知识

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

基本标签(a、p、img、li、table、div、span)、表单标签、iframe、frameset、样式

 Html Hypertext Markup Language内容  是超文本标记语言的简写,是最基础的网页语言。②是通过标签来定义的语言,代码都是由标签所组成。③代码不用区分大小写。④代码由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成。⑤头部是给Html页面增加一些辅助或者属性信息,它里面的内容最先加载。⑥体部分是真正存放页面数据的地方。

Ⅰ:多数标签都是有开始标签和结束标签,其中有个别标签因为只有单一功能,或者没有要修饰的内容可以在标签内结束。

Ⅱ:想要对被标签修饰的内容进行更丰富的操作,就用到了标签中的属性,通过对属性指的改变,增加了更多的效果选择。

Ⅲ:属性与属性值之间用"="连接,属性值可以用双引号或者不用引号,一般都会用双引号。或公司规定书写规范。

Ⅳ:格式:<标签名 属性名 = ‘属性值‘> 数据内容 </标签名>

     <标签名 属性名 = ‘属性值‘ />

Ⅴ:操作思想:

  为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作,就是在不断的改变容器的属性值。

常用标签的使用

 

1:字体标签<font>

  例:<font size=5 color=red>字体标签示例</font>

  注:简单颜色可以直接写对应的英文,复杂颜色用16进制表示,表现形式#FF0000两个数为一组,按红,绿,蓝排列,如:00FF00表示绿色。建议用工具选取。

2:标题标签:<h1><h2>......<h6>

  因为标题是文本中常用的内容,为了方便操作而定义的。其实就是某个字号和粗体的组合。

3:特殊字符:

  如果要在网页上显示一些特殊符号,比如<> & 等。因为这些符号在代码中会被浏览器识别并解释,所以用一些特殊的方式来标识。

  &lt;    <    &gt;    >      &amp;    &

  &quot;    "    &req;    ?      &copy;    ?

  &trade;     ?    &nbsp;   空格              

   注:在Dreamweaver8中都有联想功能。

 

4:列表标签:<dl>

  <dt>:上层项目

  <dd>:下层项目

  例:

  <dt>游戏名称</dt>

    <dd>星际争霸</dd>

    <dd>红色警戒</dd>

  <dt>部门名称</dt>

    <dd>技术部<dd>

    <dd>培训部<dd>

  </dl>

  效果:

  游戏名称

    星际争霸

    红色警戒

  部门名称

    技术部

    培训部

   列表中项目符号对应的标签

  <ol>:数字标签(a  A  1  i  I)

  <ul>:符号标签( ο ?

  <li>:具体项目内容标签。此标签只在<ol> <ul>中有效。

  通过type属性更改项目符号,如果想做出效果更好的列表,如:黑色圆点用图片表示,就用到css

 

5:图像标签:<img>

  例:<img stc="1.jpg" align=" middle" border="3" alt="图片说明文字"/>

  align:属性定义图片的排列方式,border用来设置图像的边框。src连接一个文件。

6:图像地图:<map>

  应用:当要在图像中选取某一部分作为连接的时候。如:中国地图每个省所对应的区域。

 

  map标签和img标签联合使用。Href是超链接

  <img src="Sunset.jpq" alt="图片说明文字" usemap="#Map /">

  <map>

    <area shape="rect" coords="50,59,116,104" herf="1.heml" />

    <area shape="circle" coords="118,203,40" herf="2.heml" />

  </map>

 

7:表格标签<table>

  组成:标题标签:<caption>,给表格提供标题

     表头标签:<th>,一般对表格的第一行或者第一列进行格式化,就是粗体显示。并不常用。

     行标签:<tr>

     单元格标签:<td>,加载行标签的额里面。可以简单理解为先有行,在行中在加入单元格。

  格式:

  <table border="1" width="40%"><!-width 值为百分比可以让表格的宽度随浏览器窗口的大小变化 第一行 第二行 href 属性值可以是url,也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。很多空行以制造网页过长的效果 -->

  <a href="#标记">返回标记位置</a>

  注:使用定位标记时一定在href值的开始加入#标记名。

 

9.框架标签:<frameset>   

  注:框架标签不可以放到<body>,一般为了代码的可读性,会到<head>和<body>之间。

 

10.画中画标签:<iframe>

  <iframe sre="1.html">

  很遗憾,画中画你没有看到,因为你的浏览器不支持iframe标签。

  </iframe>

  框架标签现在不是很常用,布局都用dir+css+table.框架很少用了。

 

 11:表单标签<form>

   表单标签是最常用的标签,用于与服务器端的交互。

  <input>:输入标签:接受用户输入信息。

  其中的type属性指定输入标签的类型。

    ①文本框text。输入的文本信息直接显示在框中。

    ②密码框 password。输入的文本以原点或者星号的形式显示。

    ③单选框 redio 如:性别选择。

    ④复选框 checkbox 如:兴趣选择。

    ⑤隐藏字段 hidden 在页面上不显示,但在提交的时候随其它内容一起提交。

    ⑥提交按钮 submit 用于提交表单中的内容。

    ⑦重置按钮 reset 将表单中填写的内容设置为初始值。

    ⑧按钮 button 可以为其自定义事件。

    ⑨文件上传 file 后期扩展内容,会自动生成一个文本框,和一个浏览按钮。

    ⑩图像 image 它可以替代 submit 按钮。

  <select>:选择标签 提供用户选择内容。如:用户所在的省市。size 属性为显示项目个数。

  <option>:子项标签 属性 selected 没有属性值,加在子项上,其中一个子项,子项就变成默认被选项。

  <textarea>:多行文本框。如:个人信息描述。

    for 属性:指定快捷键作用的表单元素。必须与作用的表单元素的id值相同。

    accesskey 属性:指定快捷键,此快捷键需要和alt建结合使用。

    例:

    <label for="user" accesskey="u">用户名(u)</label>
    <input type="text" id="user"  />
 

    表单提交:

     1.先定义form表单中的action属性值,指定标点数据提交的目的地(服务端)。

     2,明确提交方式,通过指定method属性值。如果不定义,那么method的值默认是get。

     get和post这两种最常用的提交方式的区别:

      1,get提交将数据现在的地址栏,对于敏感信息不安全。

        post提交不显示在地址栏。

      2,地址栏中存放的数据是有限,所以get方式对提交的数据体积有限制。

        post可以提交大面积数据。

      3,对提交数据的封装方式不同:

        get将提交数据封装到消息头前,请求行中。

        post将提交数据封装到消息头后,数据体中。

      注意:通常表单使用post提交,因为编码方便。

         对于Tomcat服务器端,默认的解码方式是ISo8859—1,那么中文会出现乱码。

         通过post提交,可以使用request.setCharacterEncoding("GBK");来解决乱码问题,该方法只对数据体有效。

         如果是get提交,request.setCharacterEncoding("GBK");该方法对乱码解决不了,必须先进行ISO8859-1编码,然后在进行GBK的编码。这种方式虽然对post提交的乱码也通用,但是麻烦,所以建立表单提交使用post。

 

头标签  都放在<head></head>头部分之间。包括:title base meta link

12.<title>:指定浏览器的标题栏显示的内容。

 

13.<base>:

  href属性:指定网页中所有的超链接的目录。可以是本地目录,也可以是网络目录。注意值的结尾处一定要用/表示目录。只作用于相对路径的找链接文件。

  target属性:指定打开超链接的方式。如_blank表示所有的超链接都用新窗口打开显示。

 

14.<mata> 

  name 属性:网页的描述信息。当取keywords时,content属的内容就作为搜索引擎的关键字进行搜索。

  http-equiv属性:模拟HTTP协议的响应消息头。

  例:

  <meta heet-equiv="refresh" content="3;url=heep://www.sina.com.cn"/>

  表示打开此页面3秒后自动转到新浪页面。

 

15.<link>:

  rel 属性:描述目标文档与当前文档的关系。

  type 属性:文档类型。

  media :指定目标文档在哪种设备上起作用。

  例:

  <link  rel="stylesheet"  type="text/css"  media="screen,ptint"  href="a.css"/>

 

16.<marquee>让内容动起来

  direction 属性:left right down up

  behavior 属性:sceoll alternate slide

 

17.<pre>:可以将文本内容按在代码区的样子显示在页面上。

 

XHTML和XML

XHTML是可宽展的超文本标记语言(Extensible HyperText Markup Language)。

  ①w3c组织在2000年的时候为了增强HTML推出的,本来是想替代HEML,但是发现Internet上用HTML写的网页太多,未遂。可以理解为他是HTML一个升级版(HTML4.01)

  ②HTML的代码结构更严谨,是基于XML的一种应用。

XML是可扩展标记语言(Extensible Markup Language)

  ①是对数据信息的描述。HTML是数据显示的描述。

  ②XML代码规定的更严格,如:标签不结束被视为错误。

  ③XML规范可以被更多的应用程序所解释,将成为一种通用的数据交换语言。

  ④各个服务器,框架都将XML作为配置文件。

 

 

总结:

黑马程序员_java基础笔记(09)...HTML基本知识

黑马程序员_java基础笔记(09)...HTML基本知识

黑马程序员_java基础笔记(09)...HTML基本知识

黑马程序员_java基础笔记(09)...HTML基本知识

黑马程序员_java基础笔记(09)...HTML基本知识黑马程序员_java基础笔记(09)...HTML基本知识

黑马程序员_java基础笔记(09)...HTML基本知识

 

 

 

 

 

 
    

 

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

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

黑马程序员_java基础笔记(09)...HTML基本知识

上一篇:jsp乱码问题


下一篇:【CSS进阶】伪元素的妙用--单标签之美