HTML+CSS的基本知识

最新推荐文章于 2024-06-17 13:37:03 发布

一屁小肥咩

最新推荐文章于 2024-06-17 13:37:03 发布

阅读量487

点赞数 1

分类专栏： HTML+CSS 文章标签： html css 标签 w3c

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/u011271894/article/details/45030923

版权

HTML+CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.HTML的最基本知识
   开头文档的声明:
       <! DOCTYPE html PUBLIC ""-//W3C/DTD XHTML 1.0 TRANSITIONAL//EN" "http://www.w3.org/1999/XHTML">
   HTML的基本结构
       <html>
           <head>
               <meta http-equiv="Content-Type" content="text/html" charset="gb2312"/>
               <meta name="keywords" content="搜索的关键字" />    //摘要标签
               <meta name="description" content="详细描述" />
               <title></title>   //主题标签
           </head>
           <body>               //主体部分.内容标签
           </body>
       </html>
2.HTML的标签
   1.标题标签 <h1-h6></h1-h6>
   2.段落标签 <p></p>
   3.水平线标签   <hr/>
   4.有序列表标签   <ol><li></li></ol>
   5.无序列表标签   <ul><li></li></ul>
   6.定义列表标签   <dl></dl>
   7.标题术语   <dt></dt>
   8.描述术语   <dd></dd>
   9.表格标签   <table></table>
   10.表格行   <tr></tr>
   11.表格列   <td></td>     rowspan="" --跨行 columns=""--跨列
   12.分区标签   <div></div>
   13.输入内容标签 <input name="" type="" value=""/>
       文本框:text
       单选按钮:radio
       复选按钮:checkbox
       密码框:password
   14.下拉标签   <select name=""><option value=""></option></select>    //当在select里面指定size="1"时.combox即可转换成ListBox
   15.图像标签   <img src="" alt="当图片无法加载时候出现的文本" title="当鼠标悬停在图片上时显示的文本" />
   16.范围标签   <span></span>
   17.换行标签   <br/>
   18.上标记标签   <sup></sup>
   19.下标记标签   <sub></sub>
   20.多行文本   <textarea cols="" rows=""></textarea>
   21.分组列表/GroupBox
           <html>
           <head>
               <title>GroupBox在网页中的表现方式</title>
           </head>
           <body>
               <fieldset>
                   <legend>常用工具</legend>
                   姓名:<input type="text" name="name"/><br/>
                   性别:<input type="radio" name="gender"/>男  
                       <input type="radio" name="gender" />女  
                       <input type="radio" name="gender" />保密<br/>
                   学历:<input type="checkbox" name="xl">小学  
                       <input type="checkbox" name="xl">初中  
                       <input type="checkbox" name="xl">高中<br/>
                   <lable>婚否:</lable>
                  <input type="radio" name="self"/>已婚
                   <input type="radio" name="self"/>未婚<br/>
               <fieldset>
           </body>
           </html>
3.表单的基本语法
   <form action="表单提交地址" method="提交方法"></form>      //表单的提交方法:post--安全更高     get--
   表单的基本元素:
       1.文本框         <input type="text" value="文本框中的值" name="文本框的名字" size="可输入文本的长度" /
       2.密码框   <input type="password" size="可输入密码的长度" name="密码框可输入的长度" />
       3.提交按钮   <input type="submit" value="提交" name="button" />
       4.取消按钮   <input type="reset" value="取消" name="reset" />
       5.普通按钮   <input type="button" value="" name="button" />
       6.图形提交按钮   <input type="image" src="图片的路径" />
       7.单选按钮   <input type="radio" name="" value="" checked="checked" />
       8.复选框   <input type="checkbox" name="" value="" checked="checked" />
       9.文件域   <input type="file" name"" />
       10.下拉列表   <select name="" ><option value=""></option></select>
       11.多行文本   <textarea name="" cols="" columns="" ></textarea>
       12.隐藏域   <input type="hidden" name="" value="" />
4.表格的高级用法
   1.表格标题    <caption></caption>
   2.表格的表头   <th></th>
   3.表格的分组标签
       1.标题.页眉    <thead></thead>
       2.主体       <tbody></tbodu>
       3.页脚       <tfoot></tfoot>
5.框架集的使用
   1.窗体的分割     <frameset cols="25%,*"></frameset>
   2.窗体分割后的结构   <frame src="" name="" />
   3.框架集的边框   frameborder="1"
   4.框架的标识名   name=""
   5.是否显示滚动条 scrolling="no"
   6.是否允许调动框架窗口的大小   noresize="noresize"
   7.窗口页面的引用   <iframe src="引用页面的地址" name="框架的标识名" frameborder="边框的宽度" scrolling="是否有滚动跳"></iframe>
6.CSS样式表-普通样式
   1.各种选择器的权限范围       ID选择器>类选择器>标签选择器
       1.ID选择器   id="name" #name{}
       2.类选择器   class="name" .name{}
       3.标签选择器   div{}
   2.常用的样式修饰
       1.文本和字体属性
           1.行高            line-height
           2.文本的对齐方式   text-align
           3.字符间距       letter-spacing
           4.文本修饰       text-decoration
           5.文字的格式       font/font-size/font-family/font-weight    文字的大小/字体/粗细
           6.背景属性       background/background-color/background-image/background-repeat/background position   背景颜色/北京图片/背景的平铺方式/背景出现的初始位置
               1.平铺的方式-横向   repeat-x
               2.平铺的方式-纵向   repeat-y
               3.不重复平铺       no-repeat
           7.列表的常用属性   list-style
               1.去掉修饰符号   none
               2.实心圆   disc
               3.空心圆   circle
               4.实心正方圆   square
               5.数字       decimal
           8.浮动           float
               1.左浮动   float:left
               2.右浮动   float:right
               3.不浮动   float:none
           9.浮动的清除       clear:left/right/both/none     左/右/两边/默认不清除
7.CSS样式-盒子样式
   1.边框       border
       1.边框的颜色   border-color
       2.边框的宽度   border-width
       3.边框的样式   border-style
       4.上下左右边框   border-top/right/bottom/left
       5.border: width style color    //大小.风格.颜色
   2.内边距   padding
       1.padding-top:
       2.padding-right:
       3.padding-bottom:
       4.padding-left:
   3.外边距   margin
       1.margin-top:
       2.margin-right:
       3.margin-bottom:
       4.margin-left:
8.CSS样式表-超链接伪类
   1.超链接伪类       <a></a>
       1.未单击时的样式   a:link
       2.单击后的样式       a:visited
       3.选中时的状态       a:hover
       4.点击中的状态       a:active
   2.样式的三种应用方式
       1.行内样式
       2.内部样式
       3.外部样式   <link rel="stylesheet" type="text/css" href="文件的路径" />
9.图片框的页面居中特效
   #main{
       position:absolute;
       top:50%; left:50%;
       margin:-150px 0 0 -200px;
       width:400px; height:300px;
       border:1px solid red;
   }