【HM】第1课:HTML+CSS

技术小胖子 2017-10-17

css 浏览器 字符集 html type

<pre>

W3C:World Wide Web Consortium,万维网联盟

HTML

html:Hyper Text Markup Language,超文本标记语言。


书写规范:XHTML

   标签要正确关闭,包括呼应关闭与自关闭。

      常见自关闭标签有:<hr/><br/><input/><img/><area/>,它是不需要修饰和装饰其它的

      标签或文本的。

   标签名和属性名必须小写

   属性值要引号括起来,””’’

   标签要正确嵌套

        

<marquee behavior=”alternate”></marquee>      

标签的作用:说明内容的功能

属性的作用:描述内容的特征

 

html注释:<!--注释内容 仅此一种-->

 

下面总结下常见标签,只总结它们的特有属性。

颜色表示方法:单词,6个十六进制字符、rgb(m,n,k)

排版标签

    p:段落标签:如果p标签中包裹了内容,那么p标签内容的上下会各空出1行。

                如果P标签没有内容,那p标签就相当于一个空行。

                如果是两个p标签连续出现,它们之间也只会空一个空格,而不是两个。

              注意与br标签的区别br只是换行,并不会空出1行。而p标签不但换行而且还空出1行。

        

     hr:水平线标签:

        属性

            size:粗细

            width:宽度

                  

     div:块级标签,会自动换行。如phrh1-h6也是块级标签。

     span:行级标签,不会自动换行。如br是行级标签,它换行之后不会再换行。

        

字体标签

     h1-h6:从大到小的6个级别的标题文字,没有size属性。注意字体是块级标签。

     font:

         属性

            face:字体类型

            size:字体大小(从1-7的数字,默认是3),绝对值表示是1-7,相对值表示是相对

            于3(-2到+4之间)。

                           

图像标签

    img:

         属性

            src:图片路径

            title:鼠标悬停在图片上时的提示文字,其实几乎每个标签都有这个功能。

            alt:当图片不存在时的提示文字

    map:必须要定义name属性,因为它要被图片img引用,在img中定义属性usemap=”#mapname”来引

         用。

        子标签area:

             属性

                 shape:形状

                 coords:参数,相对于图片(如果shapecircle的话,是x,y,r;如果是矩形的话,

                        是两个点的坐标。

                 href:点击了area之后跳转的链接,可以是网页,也可以是图片。

                 title:当鼠标移动到坐标限定的范围时提示的文字。

                 

清单标签(olul、极其子标签li

     共有属性

          type:对于ol,取值可以是Aa和及罗马数字I、i以及阿拉伯数字,共有5种。默认是阿拉伯数

                字。如果不想从第一字母或数字开始,可以再加个start属性,指定偏移量。

 

               对于ul,取值可以是disc(实心点)、square(实心矩形)、circle(空心点),但实

                际发现ul也可以使用oltype属性值。默认的是实心点

超链接标签a

     属性

          href:跳转目标路径,一定要这个路径,如果不想跳转用#。否则文本不会有这个标签的特有

                显示效果。

          target:跳转方式,取值_self(默认)  :在本窗口打开。                                                               _blank :在新窗口打开

                               _parent  

                               _top

表单标签

    form标签:收集用户信息,将信息传递到指定的服务器

        属性:

             action:表单数据提交的目标位置。

             method:提交方式

                 get:(默认)明文提交,不安全。数据量有限制,不超过1k

                 post:暗访提交,安全。可以提交大的数据,数据量没有限制。

         input子标签:真正地采集用户信息

               语法:<inputtype=”” name=”” value=”” />

 

               type:input标签的类型(一共有10种)

                    text:文本框

                    password:密码框

 

                    radio:单选按钮

                    checkbox:复选框

                    checked=”checked”默认被选中

 

                    submit:提交按钮   

                    button:普通按钮

                    reset:重置按钮

                    image:图片按钮 作用同submit

                                    

                    file:文件上传

                    hidden:隐藏域:既不想让用户看到,又要将数据提交到服务去。

                                    

               value:标签中的内容,供服务器接收数据的。

               name:

                    》供服务器接收数据的。

                    》给相同类型的标签分组,如radio

下拉列表标签select

        option:下拉列表项

            selected=”selected”默认被选中

        语法:<select>

                  <option>一般第1option写标题</option>

                  <optionvalue=””>一般与value值一样</option>

                  <optionvalue=””>一般与value值一样</option>

               </select>

文本域标签textarea

        属性

            cols:显示的列数

            rows:显示的行数  

            readonly:标记文本只读,取值readonly。防止用户修改内容。

        

表格标签table

       属性

           cellspacing:单元格之间的距离

            cellpadding:单元格与内容的距离

                  

        caption标签:表格标题,写在table标签的首行。

                  

        thead:页眉

        tbody:主体

        tfoot:页脚

        可以用这些标签在操作多个tr

                  

        子标签tr:

 

        子标签td:

              属性

                  colspan:跨列,从左往右合并。

                  rowsapn:跨行,从上往下合并。

                                    

         th:列头,与td同级别。

CSS

CSS:Cascade Style Sheet,层叠样式表。

          

CSS的好处:

    1.网页内容和样式分离,有利于团队开发。

    2.提高代码的复用性,有利于后期维护。

    3.功能强大,实现更美观的效果。

        

CSS基本语法:

    1.行内样式,定义在标签内,作用于当前标签。

          <p style=”color:red”><p>

    2.内嵌样式,作用于当前页面。

          <style type=”text/css”>           表示标签内容为样式代码

              /*CSS注释,仅此一中*/

              选择器{

                  属性名:属性值;        

                  属性名:属性值;

                  ...

               }

           </style>

        注意格式:

             》属性名与属性值用:分隔,属性名与html标签属性名并不完全相同。

             》属性值没有引号

             》每个规则以;结束。

     3.外部样式,作用于多个页面。

        <link rel="stylesheet" type="text/css" href="theme.css" />

CSS选择器:

      标签选择器:标签名,同类标签具有相同风格时使用。

      类选择器:.类名,同类标签中部分标签有其它的风格时。

      ID选择器:#ID名,通常与div结合使用。


    选择器优先级:ID>类>标签    

      值得注意的一点:CSS选择器的样式只适用于选择器代表的标签本身,并不适用于它的子标签。

          如table标签如果在标签中设置了border为实线红色,所有的单元格的border都是实线红色

          。但是如果只在选择器中设置了table,那么只有table的border会变成实线红色,table中

          单元格border不会发生任何改变。同理tr也一样,如果在css中设置了tr的样式,td的样式

          不会随之改变。    

CSS常见属性:

      字体:font属性

               font-xxx:子类属性

      文本:

               text-xxx系列

                   text-decoration:可以设置下中下划线或无线。

      列表属性:list-style属性

                   list-style-xxx:子类属性

                       list-style-image:url(“图片路径”);        //自定义列表符号

      背景属性:background属性

                     background-xxx:子类属性

                            background-attachment:设置背景是否随着页面的其余部分滚动。

                            background-color:

                            background-image:url(“图片路径”);

                            background-repeat:属性设置是否及如何重复背景图像。

                            background-position:设置背景图片的起始位置,相对于父容器的xy

                                                距离。

      定位属性:

                浮动定位

                     float:流式布局(浮动),取值left  right 2

                     clear:清除浮动,取值 left rightboth none 4

                position

                      absolute:绝对定位,一般和topleft属性配合使用。

                      relative:相对定位

                z-index:取值是整数,默认0。越大越靠近上面。    

                                    

CSS盒子模型:

       任何一个标签都是一个盒子模型,所以每个标签都有下面这些属性。

        内边距padding

                 padding-left

                 padding-right

                 padding-top

                 padding-bottom

              padding:10px  30px  50px 30px  表示上         左(从上开始顺时针旋转)

              padding:30px   80px   //  30表示上下          80表示左右

                                             

        外边距margin

                 margin-left

                 margin-right

                 margin-top

                 margin-bottom

               margin:0  auto       //水平居中

               margin:auto    0     //垂直居中

           外边距合并:取较大者。


         边框border

               border-style

               border-width

               border-color

               border-left

                  border-left-color

                  border-left-style

                  border-left-width

                  border-right

               ...

     CSS:通过属性即使给标签设置了什么东西,如图片,它是属于这个标签的,并没有创建一个新的

          对象。

         假如想给div设置一张图片,图片距离div的上边距是10px,那么应该设置divpadding-top

         为10px,且应在div中嵌套一个<img/>标签。不能投机取巧,使用CSS中的

         background:url()no-repeat来设置,这个属性只是给div设置了背景图片,但是这个图片并不

         是它的子元素,仅仅只是一个属性,所以padding对它无效。

                           

伪类:

    a:link {color: #FF0000}               /* 未访问的链*/

     a:visited {color: #00FF00}     /*已访问的链接 */

     a:hover {color: #FF00FF}       /*鼠标移动到链接上 */

     a:active {color: #0000FF}      /*选定的链接 */

     当然,在选择器还可以定义其它的属性,而且属性是会反弹的。比如在

     hover中设置了一个字体大小属性,当鼠标移到链接上时字体会改变,

     但当鼠标挪走之后又会恢复原来的大小。

 

    注意:定义是有顺序的,某些伪类也适用于非a标签。比如hover在css2.0中可以用于几乎所有其它的标签上。

    拓展:利用伪类来实现表格行高亮显示,也正体现伪类的属性会反弹的特性。如果用js来做出这个效果,要费不少的功夫,但是伪类就很方便了。

    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  <!-- 伪类选择器 -->
  <style type="text/css">
     .c1 {
        background-color:blue;
     }
     .c2 {
        background-color:gray;
     }
     tr:hover{
        background-color:yellow;
     }
  </style>
 </head>
 
 <body
    <table width="50%" border="1">
        <tr >
            <th>姓名</th>
            <th>年龄</th>
            <th>住址</th>
        </tr>
        <tr class="c1">
            <td>王泽</td>
            <td>30</td>
            <td>北京</td>
        </tr>
        <tr class="c2">
            <td>王泽</td>
            <td>30</td>
            <td>北京</td>
        </tr>
        <tr class="c1">
            <td>王泽</td>
            <td>30</td>
            <td>北京</td>
        </tr>
        <tr class="c2">
            <td>王泽</td>
            <td>30</td>
            <td>北京</td>
        </tr>
    </table>
 </body>

    效果:

    wKioL1Wig4Wypg3eAABdIW3PPj8273.jpg


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

最后,作一下总结,HTML就是用来显示内容的,而CSS用来定义样式,就是美化内容的显示。


HTML标签和CSS样式非常多,怎么学?

    抓住重点,特性,记忆重点,其它的就去查API文档。

 </pre>

                  


javaEE补充:

i_f45.gif其它html标签:

  1. 框架集(iframe)

 用于页面布局,现在已经被抛弃,只能在IE上运行良好。   

2.域(fieldset)、域标题(lengend)

 源码:

1
2
3
4
5
6
7
<fieldset>
            <legend>
                那天风刀霜
            </legend>
            发的手机费拉风的但是;分啊方法的身份; <br/>
            <input type="button" value="雨木林风"/>
        </fieldset>

 效果图:

 

wKioL1WicKygCVuBAABNYcey1to255.jpg

i_f45.gif编解码问题:

html用浏览器打开乱码,原因:html保存时的编码与浏览器解码html采用的字符集不一样。浏览器采用的是系统默认的字符集GBK,而html在保存的时候可能是其它的编码。

解决1:在html保存的时候,指定文件保存的编码方式(不同的文本编辑器可能采用的方式不一致,一般在软件里设置),也可以利用记事本另存为指定保存的编码方式。

解决2:在html中加上一个头标签,当浏览器读取到这个头标签的时候,浏览器会这个标签指定的字符集来解码。这个标签的内容是:

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

   meta标签是没有结束标签,它是模拟响应头信息的,给浏览器一些附加信息。 

   meta是一个头标签,头标签还有title、base、link等,都放在<head></head>之间。

解决3:打开html乱码,手动改变浏览器解码采用的字符集。(不提倡)




HTML实际问题

1)CSS:<ul>的左边为什么有40px的距离呢?

  https://zhidao.baidu.com/question/199133186.html

2)最简单的折叠菜单

  http://www.51xuediannao.com/js/texiao/zhedie.html




      本文转自屠夫章哥  51CTO博客,原文链接:http://blog.51cto.com/4259297/1665222,如需转载请自行联系原作者



登录 后评论
下一篇
云栖号资讯小编
11591人浏览
2020-07-13
相关推荐
HTTP服务简介
3898人浏览
2017-10-26 15:19:00
JQuery ztree 异步加载实践
28696人浏览
2017-12-04 12:24:00
第 3 章 docbook-xsl
1503人浏览
2018-01-02 14:37:00
【HM】第7课:Servlet
947人浏览
2017-11-15 22:54:00
【HM】第4课:MySQL入门
1123人浏览
2017-11-16 22:56:00
HTTP服务原理
1301人浏览
2017-10-26 15:19:00
JQuery课堂学习笔记
873人浏览
2017-11-01 12:46:29
0
0
0
1048