html、css的初级认知

HTML ——超文本标记语言（Hyper Text Markup Language ）

W3C——万维网联盟

我眼中的Doctype：用于声明文档使用哪种规范（html、xhtml）

                    分类：严格     过渡

HTML 与 XHTML：html为web网页设计语言

                             xhtml为基于xml的置标语言

1.语法格式：

 

 

2.标签

                 width="宽" height="高" >块状元素

                                       

段落

                         

一级标题

              

二级标题

              

三级标题

              

四级标题

              

                                              


                 

• 无序列表

              

               href="链接地址">链接标签                   行内元素

              

                   下拉菜单

              

               summary="表格摘要" >

                    表格标题

                   

                        width="表格列宽" />

                   

                   

                        表头

                   

                   

                        表格正文

                   

                   

                       

                   

              

3.表单元素

           action="请求方式 - post/get" target="链接显示位置">

                 type="表单类型-text文本；button按钮；radio单选按钮；checkbox多选按钮；submit提交；image图片"  value="按钮提示文字"  />

         

         留言板cols="行宽限制字数" cols="行宽限制字数">

4.分割窗口

          rows="行分割 - *,*"/cols="列分割 - *,*,*" frameborder="边距 - 0" framespacing="间距 - 0" >

               src="链接要显示的页面"  scrolling="滚动条 - yes必出滚动条；auto自适应；no不出滚动条" norsize="锁定框架大小 - norsize" />

              

         

5.图片

         src="图片地址" alt="替换文本" title="提示文本" />

CSS——层叠样式表（CascadingStyle Sheets）

1.嵌入方式：

          (1) 内联    

               

                   

                   

         (2) 外链（外部链接一个css文件）

              

                    rel="声明是样式表 - stylesheet"  type="声明是css样式表 - text/css"  />

                

         (3) 内嵌（在html标签内嵌入）

               

         (4) 导入（将几个css文件导入到一个新的css文件中）

              @import url( "要导入的css文件" );

              @import url( "要导入的css文件" );

2.选择器：

          (1)派生选择器 -- 通过上下级关系

              ul li { width：80px; height：60px;}               

          (2)id选择器

              #manv { width：900px; margin：0 auto;}  /*一个id名在一个页面只能用一次  外边距margin：上 右 下 左；*/

              

          (3)类别选择器

               .list1 { width:300px;  }  /*类别选择器支持派生，可多次调用*/

               

                     




                

          (4)属性选择器 -- 拥有指定属性

              input[type="text"] { width:150px;}

          (5)通用选择器 -- 定义整个页面标签属性

              * { margin:0;}

        【优先级】   ID选择器的优先级高于类别选择器，一个class里可以调用多个类名，有自己的样式执行自己的，

                               没有自己的执行离它最近的，后面的样式覆盖前面的，行内样式高于内部和外部样式

3.css常用属性：

     基本语句构成： 选择器{ 属性1：值1；属性2：值2；}

     (1) 盒模型 ：内填充 padding：上 右 下 左；

                         边框 border：边框宽度 边框类型 边框颜色； /* 四个边框：top、right、bottom、left； 边框类型：实线solid;点状dotted;双线double;虚线 dashed*/                         

                   { margin：20px； 【border：3px[padding：10px；（width：100px；）]】}

                   /*可操作大小：width+padding

                   内容：width

                   该div距其他div的距离：margin*/

     (2)背景：背景颜色 background-color：#fff；/*#fff为背景颜色 也可以写成white*/

                   背景图片 background-image：url(”背景图片链接“) 重复类型；  /* 重复类型：no-repeat不重复；repeat-x横向重复；repeat-y纵向重复 repeat 重复 */ 

      (3)关于字体： 字号 font-size                                                            字体样式 font-style / font-weight

                            下划线 text-decoration                                              对齐方式 text-align

                            首行缩进 text-indent                                                  行间距 line-height

      (4)列表样式：list-style

      (5)定位：position：/* 默认的,没有定位static;绝对的absolute"分层";相对的relative;相对于浏览器窗口的绝对定位fixed;继承父级inherit */ ;

                    距左侧：left：0；距上方：top：0;距右侧：right：0；距下方：bottom：0；

                    显示在第几层：z-index : 2;

     (6)浮动：float：/* 左浮动left; 右浮动right; */；

                 清除浮动：clear：/* both; left; right;*/；

     (7)显示属性：display：/* 隐藏none; 行内显示inline; 块状显示block; */；

     (8)规定当内容溢出元素框时发生的事情： overflow：/*自适应,溢出则出滚动条auto;溢出隐藏hidden;溢不溢出都有滚动条scroll*/；

     (9)链接（伪类）：a:link {color: #FF0000}     /* 未访问的链接 */
                   a:visited {color: #00FF00}  /* 已访问的链接 */
                   a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
                   a:active {color: #0000FF}   /* 选定的链接 */

                   【注意】a:hover 必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后