黑马程序员——Web——HTML

---------  android培训、java培训、期待与您交流！ ----------

HTML

 

 

-------------------------------------------------------------------------------------------------------------------

HTML简介

 

1.Html就是超文本标记语言的简写，是最基础的网页语言

 

2.Html是通过标签来定义的语言，代码都是由标签所组成，因为可以通过标签中的属性值的改变对封装内数据进行操作。

 

3.Html代码不用区分大小写

 

4.HTML代码：    //开始    

                            //结束

                           //头部分，定义的是网页的属性信息

                           //体部分，是网页的显示内容

                           例：↓

                           

 

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

 

6.body体部分是真正存放网页显示数据的地方

 

7.文件扩展名也是.html

  

 

8.HTML是一个非严谨性语言，写成这样也能运行

 

或者这样也能

 

 

综合例子：

   

         

              

         

         

              这是我的网页

         

 

 

--------------------------------------------------------------------------------------------------------------------

标签

 

●标签一定要成对出现：< >

 

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

   如：
：结束标签，
这么写也好使，但是按照HTML规范必须闭合

           

---

 ：水平线

           

           

 

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

 

●属性与属性值之间用”=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范

 如果是不确定的数据下，双引号下可以嵌套单引号，如 ”’a’” 

 公司规定书写规范：标签名大写

                        属性名小写

                        属性值必须用双引号来引

                        table（空格）不一样↓

                                    

 

●标签格式：<标签名 属性名=’属性值’>数据内容

                      <标签名 属性名=’属性值” />

 

●操作思想：为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器，对容器中的数据进行操作，就是在在不断的改变容器的属性值。（这个思想一定要记住）

 

--------------------------------------------------------------------------------------------------------------------

常用标签：↓↓↓↓↓↓↓↓↓↓

--------------------------------------------------------------------------------------------------------------------

字体

 

1.字体标签：

例：字体标签示例 

          //”5”：可以单引也可以双引‘5’，按照自己公司的规范来写

         注：简单颜色可是直接写对应的英文，复杂颜色用16进制表示，表现形式#FF0000两个数为一组，按红，绿，蓝排列，如：#00FF00表示绿色。建议用工具选取。因为区别于它不是一个英文单词，所以都加#

#0000ff表示蓝色

#ffff00表示黄色

#ffffff表示白色

#000000表示黑色

 

         //如自己调不出好看的颜色，可以在以后的学习中看到某些好看的颜色就记住他们的代码，自己用时复制粘贴即可

   

2.标题标签：

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

 

3.特殊字符：

    如果要在页面显示一些特殊符号，防止浏览器解析需要进行转义，比如< > & 等。因为这些符号在代码中会被浏览器识别并解释，所以用一些特殊的方式来表示。

    

        注：在Dreamweaver8中都具有联想功能 或者叫 随笔录入。

        //必须掌握

       例：这是我 要修饰的文字

-------------------------------------------------------------------------------------------------------------------

列表

列表标签：

                   

：上层项目

                   

：下层项目

 

例：

   

          

上层项目

          

下层项目

   

 

列表中项目符号标签：

：无序列表，符号标签（○●■），
：有序列表，数字标签（a A 1 i I），有缩进效果
1. ：具体项目内容标签。

             此标签只在

    
   中有效 / 上面两个标签中的列表项都由
   • 标签封装

 

              //通过type属性更改项目符号，如果想做出效果更好的列表，如：黑色圆点用图片表示，就用到CSS（层叠样式表），用于专门丰富HTML显示效果

 

--------------------------------------------------------

例1：

 

        

        

        

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

        

        

        

        

        

        

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

            

sdfasdfsddsadf

        

 

------------------------------------------------------------

                例2：

   

游戏名称

       

星际争霸

       

红色警戒

   

部门名称

       

技术部

       

培训部

                   

 

--------------------------------------------------------------

                例3：

                  

                      

游戏名称

                         

                             

星际

                             

红警

                        

                      

游戏内容

                        

                             

攻略

                             

秘籍

                        

                  

                                            

 

-------------------------------------------------------------------------------------------------------------------

注释

 

             例：↓

             

-------------------------------------------------------------------------------------------------------------------

图像

 

1. 图像标签：

 

例1：

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

 

例2：

 

//如果图片不存在，就显示成这样

                

 

2. 图像地图：

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

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

 

  

    

    

       

----------------------------------------------------------------------------------------------------------------------

表格

 

表格标签：

    作用：格式化数据，是最常用的标签。

    组成：标题标签：

                单元格标签：

     

     

  

  

     

  

，给表格提供标题。

                表头标签：

，一般对表格的第一行或者第一列进行格式化，就是粗体和居中显示的特点，但并不常用。                 行标签：
，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。       表格由行组成，行由单元格组成  ↓     ---------------------------------- 表格语法格式
单元格内容;	单元格内容
单元格内容	单元格内容

 

Table:表格标签

border：边框

bordercolordark：边框颜色

cellspacing：单元格间距

cellpadding：单元格边距

：表格的行

：单元格（列）

--------------------------------------

行标签：

单元格标签：，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。

 

    示例代码：↓

 

例1：  

      单元格一

         单元格二

       

       

         单元格一

         单元格二

       

 

   

      单元格一

      单元格二

   

      

       

       

       

       ：加粗标签 ->

       

 

例2：  

 

例3：    ↓

              

例4：    ↓

              

      例5：  ↓

              

------------------------------------------

表头标签：，一般对表格的第一行或者第一列进行格式化，就是粗体和居中显示。并不常用。

 

  例：

    单元格一

    单元格二

                                             ↓

                   

------------------------------------------

标题标签：，给表格提供标题。

 

示例：

表格标题

 

-----------------------------------------

表格的跨行和跨列

  1.colspan：跨列/跨列数/合并列/合并列属性

  2.rowspan：跨行

 

    示例：

      

         单元格一

         单元格二

      

 

      

         单元格一

         单元格二

      

---------------------------

表格的THEAD、TFOOT和TBODY元素

 

每个表格可以有一个表头、一个表尾和一个或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示。

 

   1.THEAD包含关于表格列的信息，只能定义一个。

 

    2.TFOOT包含关于表格列的信息，只能定义一个。

 

    3.TBODY作用是：多定义多个，可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的的内容全部下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间。）

       TBODY目的：可以使得这些包含在内的代码不用在整个表格都解析后一起显示，就是说如果有多个行，那么如果得到一个TBODY行，就可以先显示一行。

       TBODY这个标签可以控制表格分行下载，当表格内容很大时比较实用，在需要分行下载处加上和。

       表格中默认都有一个TBODY标签，它下面才是tr，tr里面才是td，这个层次关系必须知道，只有了解它才能进行DOM编程 ，所以说表格的下个标签是tbody                ↓

-------------------------------------------

示例代码：

 

   格式1：↓

       表格标题

       

                姓名

                年龄

       

       

                张三

                23

     

 

   效果：↓

 

   格式2：↓

    

   

       

         

         个人信息

       

       

       

              张三

              23

       

       

       

 

   效果：↓

-------------------------------------------------------------------------------------------------------------------

超链接

 

超链接标签：

 

  两种用法：↓

 

   一：超链接

     例1：新浪

         当被点击后，会启动引擎对应解析程序

           1.先找本地主机的hosts文件，如果没有找到该主机对应的ip地址

           2.去公网DNS服务器上找对应的ip地址

         href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。 

 

     例2：联系我们

         当点击超链接时，就会出现邮件相关联的解析程序，本机默认的是outlook

 

例：

新浪网站

 

唐山大地震

 

联系我们

---

 

 

   二：定位标记

一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。

   注：定位标记要和超链接结合使用才有效。

例：

标记位置

…….

返回标记位置

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

 

            例1：顶部位置  

                                 

             

                          获取那个位置 //不加#走的是默认的文件引擎 

                                   

 

                                     回到顶部位置 //#是一个标记，表示走的本页面的位置

                                          →      

       

      例2：新浪网站

               

 

      例3：

                 分析真假地址1：下载地址是手点的图标一定是假的地址

                  

               分析真假地址2：注意任务栏的www.xxxx.com，地址不对，所以是假的就别点了。

         

-------------------------------------------------------------------------------------------------------------------

框架

 

框架标签：

注：框架标签不可以放到，一般为了代码的可读性，会到和之间。

例：

         

         

                 

                 

         

             这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html

             效果：

              

注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。

                        在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

 

 

画中画标签：

框架标签现在不是很常用，布局都用div+css+table。框架很少使用了。 

   

-------------------------------------------------------------------------------------------------------------------

表单（重点掌握）

 

表单标签：

：表单标签是最常用的标签，用于与服务器端的交互a

                    ：输入标签 ：接收用户输入信息。该标签因为type属性的值的不同，所对用的组件也不一样。

 

                          name属性和value属性：表单组件通常都需要定义它俩，因为要将数据发送给服务端，服务端只有知道了该name的值才可以对提交的数据进行分别获取

 

                          type属性：指定输入标签的类型。↓

l 文本框 text：输入的文本信息直接显示在框中。 输入的文本可见

     例：用户名：

                                    

l 密码框 password：输入的文本以原点或者星号的形式显示/非明文，输入的文本不可见

         例：密码：

                                    

l 单选框 radio ：如：性checkbox 别选择。

                                    注意，要被选中，必须要给单选框定义一个属性name。

                                   当有多个单选框是，只能有一个别选中，那么这些单选框的name值必须相同

    例：性别：男女

          //注意：name属性将多个单选按钮封装到一个组里

                                     

l 复选框 checkbox ：如：兴趣选择。对多个数据进行同时选中时

   例：技术：java

             html

              jsp

                                      

l 文件上传 file ：会自动生成一个文本框，和一个浏览按钮。可以进行文件选择的组件，通常用于附近和文件上传

       例：上传文件：

                                      

l 按钮 button ：可以为其自定义事件。自定义一个按钮默认是没有任何效果的，可以同通过注册事件并加入自定义效果 

     例：按钮：

                                      

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

     例：

                                      → 

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

      例：

                →  

l 隐藏字段 hidden ：隐藏组件，封装隐藏信息，在页面上不显示不需要用户看到，但在提交的时候随其他内容一起提交。（其定义的name和value可以提交到服务端） 

     例：

                                        

         " />  //可以算出里面公式的结果发生初期

    

l 图像 image ：图像组件，它可以替代submit按钮，为了避免提交按钮的难看，可以通过image的src属性连接一个好看的按钮图片完成提交效果

     例：

                                           

 

：选择标签 /下拉菜单 ，提供用户选择内容。如：用户所在的省市。

         size 属性：显示项目个数

              multiple属性：多选

 

 例：选择下拉菜单：↓

     

        --选择国家--

        中国

        英国

        美国

     

                  

     ：子项标签 属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。 

   例：  

             国家：

             

             

                --选择国家--

                中国

                英国

                美国

                

              

          

                        

：多行文本框 / 文本区域 ，如：个人信息描述。</span></span></p> <p><span style="color:#330033"><span style="font-family:Microsoft YaHei">例：<textarea cols="30" rows="10"></span></span></p> <p><span style="color:#330033"><span style="font-family:Microsoft YaHei">             

             

 

 

 标签将表单内容的一部分打包，生成一组相关表单的字段。

 

元素为fieldset元素定义标题

    例： 

            

注册区域

         

     

--------------------------------------------

表单提交：

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

           action：指定数据提交的目的地

            例：  

                     

  

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

      例：

             

 

             

             

 

4.：（给HTML页面关联一些指定文件进来）
   rel属性：描述目标文档与当前文档的关系

  

  

  加载这个1.css样式表，但在只限制在打印机上，在网页上看不到功能

 

  

  加载这个1.css样式表，但在页面上看到（屏幕显示）

 

  

       加载这个1.css样式表，在页面和打印机能看到效果

-------------------------------------------------------------------------------------------------------------------

XHTML   XML

-----------------------------------------------------------

 XHTML是可扩展的超文本标记语言（Extensible HyperText Markup Language）。

    

l XHTML是w3c组织在2000年的时候为了增强HTML推出的，本来是想替代HTML，但是发现Internet上用HTML写的网页太多，未遂！可以理解为它是HTML一个升级版（HTML4.01）。

    //W3C：万维网路联盟（World Wide Web Consortium）

 

l XHTML的代码结构更为严谨，是基于XML的一种应用。（HTML是非严谨的，怎么写都可以！）

------------------------------------------------------------------------------

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

：根标签

例：

       

 

   //DOCTYPE html ：HTML文档类型

   //PUBLIC：大型国际化组织很多规范定义的关键字

   //W3C//DTD XHTML 1.0 Transitional：W3C按照DTD方式以XHTML 1.0 的过渡版所制定的，默认都是这个过渡版

   //EN：英文

 

 xhtml1-transitional.dtd：一种规范规则的文件，代码都要约束并按照它的格式来写。

                            Dreamweaver中可以新建没有规范约束的HTML模板（新建文档→文档类型（无）→创建）

 

 http://www.w3.org/TR/xhtml1/DTD/：命名空间，xhtml1-transitional.dtd属于这个名称空间

     

 ：html 属于这个空间（http://www.w3.org/1999/xhtml）

  xmlns：名称空间

 

-------------------------------------------------------------------------

XML是可扩展标记语言（Extensible Markup Language）

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

 

l XML代码规定的更为严格，如：标签不结束被视为错误。

 

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

 

l 各个服务器（如tomcat），框架都将XML作为配置文件。所以以后要重点学习一下。

    

2种配置文件

   properties加载的键值对信息（ini文件）

   XML

他们有什么区别？

   properties加载的键值对信息（ini文件）：用于简单数据描述，作为基本配置文件描述

   XML：用于复杂的信息描述，更为通用一些，国际流行的软件都用它。

                                                                     头标签结束   ↑

--------------------------------------------------------------------------------------------------------------------

正则表达式

 

正则表达式说明：↓

是一种专门用于操作字符串的规则。

通过一些符号来表示，简化对字符串的复杂操作。

弊端：阅读性较差

正则表达式地址：↓ 

          

常用的操作：

      1.匹配：String matches(reges)

         

 

      2.获取（查找）：Pattern，Matcher

         Pattern p =Pattern.compile(regex) //正则表达式封装成对象

         Matcher m = p.matcher(String);

 

         while(m.find())

         {

               System.out.prinln(m.group());

         }

                   

 

       示例：获取文档中连续的数字

             String regex = “\\d{5,};

             Pattern p =Pattern.compile(regex);

             Matcher m =p.matcher(String);

           

             while(m.find())

             {

                    String s = m.group();

                    s.replaceAll(regex,”#”);

             }

         

       3.切割：String split(regex);

 

       4.替换：String replaceAll(regex,str);

网页爬虫：通过网络以及IO读取网页的源文件，并通过规则获取网页中的符合规则的数据。

               简单的说就是：人为编写的一个自动化程度。比如搜索引擎的原理，它会派蜘蛛程序在一定的时间里去网上抓取网页，如果网站不被搜索引擎（百度）收录，那么就搜不到。

               比如：mail爬虫

例：获取Email地址↓

String mailreg = “[a-zA-Z0-9_]{6,12}@[a-zA-Z0-9]+(\\.[a-zA-Z]+)+”;

 

正则表达式中组的含义：将部分进行封装以便重用，\\num反向引用指定组

示例：IP地址排序

----------------------------------

正则表达式的构造摘要 

字符类
[abc]	a、b 或 c（简单类）
[^abc]	任何字符，除了 a、b 或 c（否定）
[a-zA-Z]	a到 z 或 A 到 Z，两头的字母包括在内（范围）
[a-d[m-p]]	a到 d 或 m 到 p：[a-dm-p]（并集）
[a-z&&[def]]	d、e 或 f（交集）
[a-z&&[^bc]]	a到 z，除了 b 和 c：[ad-z]（减去）
[a-z&&[^m-p]]	a到 z，而非 m 到 p：[a-lq-z]（减去）

比较重要的两组正则表达式

预定义字符类
.	任何字符（与行结束符可能匹配也可能不匹配）
\d	数字：[0-9]
\D	非数字： [^0-9]
\s	空白字符：[ \t\n\x0B\f\r]
\S	非空白字符：[^\s]
\w	单词字符：[a-zA-Z_0-9]
\W	非单词字符：[^\w]

 

Greedy 数量词
X?	X，一次或一次也没有
X*	X，零次或多次
X+	X，一次或多次
X{n}	X，恰好 n 次
X{n,}	X，至少 n 次
X{n,m}	X，至少 n 次，但是不超过 m 次

//用正则表达式一定全面测试，否则会出问题

---------  android培训、java培训、期待与您交流！ ----------