HTML&CSS基础知识总结

HTML

       </span>网页标题<span style="font-family:'Times New Roman';">

网页内容

 

标签放在需要修饰的内容的两边

属性放在左标签里、单标签就放在单标签里

 

       属性:bgcolor/background/

 

文字:

       属性:size(-7~+7之间)/color/face(字体)

 

       加粗加粗

       倾斜下划线

      

居中

 

段落

一级标题

            (有 h1 h6)自带加粗放大居中功能

          ---预设格式,代码中是什么格式,浏览器显示的就是什么格式

 

 

图片:" />

       属性:width/height/border/align="top/bottom/center"/alt="鼠标放在图片上时显示的描述信息"/hspace(水平方向的距离)/vspace(垂直方向的距离)

 

内容滚动:内容

       --属性:direction="up/down/right/left",  srolldelay=""值越大,速度越小,behavior="alternate"来回滚动

              οnmοuseοver=this.stop( );   οnmοuseοut=this.start( );

 

 

超链接:">

 

       锚标记:例如在网页的底部点击返回顶部,则可以返回底部

             

             

 

特殊字符:        空格

©    版权号

                    <       小于 <

                    >       大于 >

 

 

 

表格:表格里可以放几乎所有内容,包括文字、列表、图片等等

      

                 --表示一个表格

             

               --表示一行

                    

       --表示一个单元格,显示为标题

             

             

               --表示一行

                    

       --表示一个单元格

             

      

 

       属性:

              表格:bgcolor/background/border/bordercolor/width/height/

cellspacing/cellpadding/align="left/center/right"(表格中浏览器的位置)

              行:bgcolor/background/height/align(该行文字位置)

              单元格:bgcolor/background/width/rowspan="2"(合并2)colspan="2"(合并2)align(单元格文字位置)

                    

 

表单:

" method="提交方式">
提交方式有两种:get 提交方式不安全,post:提交方式安全

              把这句加到body里面包含整个表单内容,点击提交按钮是可以提交表单内容。

       表单内容:文本框      属性:size/value/readonly/disanbled/maxlength

              密码区

              单选:每个单选项都要写选项 每个选项的name必须一致。 checked="checked"表示默认

              多选:每个单选项都要写选项 checked="checked"表示默认

              下拉列表:

              上传文件:

              按钮:      属性中加上value=""更改按钮中默认的文字

                     ">

              文本区:

 

列表:

       无序列表:

      可以写type设置列表样式,不写type时默认实心点。

                        

  • 列表内容
  •         ----加上 style="list-style:none"去掉列表选项前的标记

                 

       有序列表:

    默认样式1,2,3...   加上start="5"表示编号从5开始,5必须是阿拉伯数字表示

                        

  1. 列表内容
  2.              

 

 

 

外部框架:用来分割整个浏览器             (以下代码放在 head 标签里)

      

              " noresize="noresize"(禁止调整大小) scrolling="yes/no/auto"(是否显示滚动条)>

             

                     ">

                     ">

                     ">

             

      

 

       怎么实现框架中点击左页面,右页面发生效果改变:

              左:">

              右:">    (可有可无)

 

                           可以设置窗口链接的显示位置 target

                                   _blank/_self/_top/_parent

 

 

 


     
换行


      水平线   属性:width/size/color/align

margin:外边距

padding:内边距

 

行元素:使用该标签后不换行   如:font

块元素:该标签有换行功能      如:p/h1~h6

       块元素才有 align属性

 

 

CSS

背景:

       背景色:background-color: red           ---可以不写 -color-image,系统会根据后面接的内容判断是颜色还是图片地址

       背景图:background-image: url()

       背景图的平铺:background-repeat: no-repeat/repeat/repeat-x/repeat-y

       背景图的偏移:background-position:左右上下;(值可正可负)

 

 

文字:font-size:123px;

       color/font-size/family(字体)/weight(粗细,不用px)/line-height:

 

       text-align:/text-decoration:none(去除下划线)/letter-spacing

 

CSS HTML控制格式

 

HTML 中链接 CSS 的方式:

       1. 连接样式(首选/推荐)  ">

       2. 导入样式          @import "css文件地址"

       3. 内嵌                就是直接放在 html 文件中 head里的

       4. 行内样式表

 

选择器:符号与别名之间不加空格,别名不用中文,不要数字开头

       1. id选择器   html文件中在标签里用 id="别名"接收,css 文件里用 #别名{设置格式}

       2. 类选择器   class="" 接收,用 .别名{ }设置。

       3. 标签选择器      css 文件中用标签名 { }设置           对贴了该标签的所有内容都生效

              标签里只能接收一个 id 选择器,可以接收多个类选择器。当一个标签里有多种选择器时,优先级为 id选择器 > 类选择器 >标签选择器

       4. 伪类选择器     一般用在超链接中

              a linked: blue;链接状态(一开始显示颜色)

              a hover: red;  悬浮状态(鼠标放在链接位置)

              a active: yellow;    激活状态(鼠标点击)

              a visited: grey;      访问后状态

 

                    其他:如       table tr:

                           

 

floatleft

display: block 显示为块状

你可能感兴趣的:(HTML&CSS)