【黑马程序员】7. HTML+CSS

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

一、     什么是HTML

HTMLHyper Text Mark-up Language)超文本标记语言。它不是一种编程语言,而是一种描述性的标记语言,用于网页中内容的显示样式。标记就是用来描述网页内容的一些特殊符号。

二、     网页的分类

网页大体可以分为两大类:静态页面和动态页面。

静态页面:有一个HTML页面文件保存在网站服务器上,当浏览器请求要这个页面时服务器就把这个页面文件发给浏览器,这样浏览器就可以显示用户想要的页面了。

动态页面:浏览器上没有用户想要浏览的页面,而是服务器动态的从数据库中提取数据来动态生成的HTML页面发送给浏览器。

三、     HTML页面结构

Visual Studio是新建Web项目的方法:新建WebèASP.Net Web应用程序;

新建HTML页面的方法:右击项目名称==>添加==>新建项==>Web==>HTML页。

HTML页面基本结构:



    	页面标题


	页面主体


结构说明:

1、所有内容都写在<html>html>标签内;

2、<head>head>内放的是页面的头部信息,是对页面的描述信息,不会直接显示在页面中;<title>title>中设置页面标题,<title>只能放在<head>中;

3<body>body>中放的是页面的主体内容,网页的大部分内容都定义在这个标签中,<body>标签的bgcolor属性可以设置网页背景色。

4、所有页面都应该至少包含这些标签。

四、     HTMLXML的联系和区别

1、         格式标签:在HTML中有一些标签是可以不关闭的,
就是一个,而在XML中要求所有的标签都必须关闭,开始即关闭的标签可以简写为:
。在HTML中为了遵循XHTML规范,推荐像XML一样严格关闭。

2、         属性:在HTML中属性的值既可以用单引号括起来,也可以用双引号括起来,甚至可以不用引号(不推荐),但在XML中要求属性值必须用双引号括起来。引号要成对出现。

3、         相同点:HTML和XML中使用注释的方法相同,

特殊字符:HTML中<和>是有特殊含义的,像这种有特殊含义的字符需要有特定表示方法,如:“< ”:表示小于号,“> ”:表示大于号,“ ”:表示一个空格,表达式中的分号千万不能丢。

五、     HTML常用标签(标记)

1、        文本格式标签

      
:回车换行

      


:水平线,

	

      :字体加粗

       :字体样式标签,

	黑马程序员

      

:居中对齐

h 标签:HTML中定义了

……

六个h标签,分别表示不同的字体大不,h1最大,h6最小。

:以用户定义的格式来显示,当输入多个空格时会全部显示出来。

2、        超链接标签

URL:统一资源定位器,表示资源在网络中的地址。

:超链接

target属性设定为”_blank”就可以在新窗口中打开超链接了。

实现站内跳转:用name属性为起名字,这里是顶部 ,这样可以通过跳转到顶部 来实现站内跳转的效果。

3、        图片标签

<img src="a.jpg" />注意图片是链接进来的,不是插入的,所以如果src指向的图片不存在了,网页内也就看不到该图片了。

alt属性:图片无法显示时显示的说明文本。

border属性:指定边框大小,border=”0” 不显示边框。

width,height:表示图片的宽度和高度,需要在style属性中指定,

注意:最好手动指定图片的width和height,哪怕是原始尺寸,这样做的好处是,加载网页时就算图片没有加载完成,也会先把图片的空间占上,当网页加载完成后不会使网页总局乱掉。

4、        列表标签

    :无序列表(unordered list)

           语法:

    • 111
    • 222
    • 333

     

      :有序列表             

      1. aaa
      2. bbb
      3. ccc

      输出:1.  aaa

         2.  bbb

         3.  ccc

      5、        表格标签

      :创建行

      中创建单元格,colspanrowspan用于合并单元格

      border属性:表格边框,

      表头的

      :在
      可以用代替,这样表头为粗体,居中对齐方式

      如:

            

      姓名年龄性别
      john36
      lily25
      tom20保密
      合并单元格 一个


      输出:                                           

      姓名

      年龄

      性别

      john

      36

      lily

      25

      tom

      20

      保密

      合并单元格

      一个

      6、        表单标签

      
         
         黑马
         
         
         
         
         
      


      说明:

      action:表示把表单提交给谁

      method:是指提交的方式,有两种:getpostpost方法允许传送大量信息,get只接受低于1K的信息。

      是主要的表单元素,其type属性的可选值有:submit(提交按钮)button(普通按钮)checkbox(复选框)file(文件选择框)hidden(隐藏字段)image(图片按钮)password(密码框)radio(单选按钮)reset(重置按钮)text(文本框)

      表单元素详解

      :点击submit按钮表单会被提交到action属性指向的服务器,可以设置value属性修改按钮显示的文本。

      :普通文本框,size属性为文本框的宽度,value为显示的文本内容,maxlength为可以输入的最大长度,readonly只读。

      :复选框,checked属性表示复选框是否被选中。

      :单选按钮,使用name属性对radio进行分组,相同name的为一个组,不同的radio设定不同的value值,这样通过取指定name的值就可以知道谁被选中了,不用单独判断,可以实现组内互斥。

      :文件选择框,使用file则

      enctype属性设为" multipart/form-data" method属性设为"post"

      :图片按钮,使用src属性指定图片的地址,它是一个按钮。

      7、        select标签

      用来创建类似于winform中的ListBoxComboBox,创建的到底是ListBox还是ComboBox是由select标签的size属性来决定的,size是指列表框显示列表项的条数,如果size属性的值大于1创建的就是ListBox,否则就是ComboBox

      selected属性:默认选定某一项

      输出:

      :对option项进行分组,使用label=""属性设置组名。

      如:

      输出:


      8、        label标签

      前可以写普通的文本修饰,但是单击修饰文本的时候input元素不会获得焦点,而使用

      如:

       此时点击“用户名:”修饰文本时,文本框就可以得到输入焦点。

      9、        textarea标签

      多行文本框,cols属性:列数,rows属性:行数

      如:

      
      

      输出:

      【黑马程序员】7. HTML+CSS_第1张图片

      10、        fieldset标签

      将多个控件放到一个区域里,效果类似于wimform中的GroupBox

      爱好:

      输出:

      六、     CSS(层叠样式表)

      CSS是用来美化页面用的,可以对页面元素进行更精细的设置,样式主要描述元素的字体颜色、背景色、边框样式等。简单的可以理解为组网页换皮肤。

      CSS的使用方式有三种:元素内联,页面嵌入,外部引用。

      1、        元素内联

      元素内联就是直接将样式写入元素的style属性中。如:

      输出: 

      2、        页面嵌入

      CSS样式写在中,这样页面内所有指定的元素均显示为定义的样式。适用于样式利用,减小页面空间


      表示页面中所有的input标签都采用这个样式。

      3、        外部引用

      CSS样式写入.css的样式表中,然后在页面中引用.css样式表文件。

      如:新建一个.css文件,并起名为css1.css,向样式表文件中添加如下样式:

      input
      { 
          background-color:Gray;
          border-color:Yellow;
          color:Blue
      }
      p
      { 
          color:Red;
          font-size:xx-large
      }


      定义完样式表后,在页面中引用样式表,在中加入如下代码:

      这样就把样式表定义的样式链接到了页面中。

      通过这种方法可以实现页面换肤的效果。

       

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

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

      你可能感兴趣的:(黑马程序员)