HTML+CSS的基本知识

「爱情、让人受尽委屈。」 2022-08-07 13:46 176阅读 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"/>男&nbsp;&nbsp;  
                        <input type="radio" name="gender" />女&nbsp;&nbsp;  
                        <input type="radio" name="gender" />保密<br/>  
                    学历:<input type="checkbox" name="xl">小学&nbsp;&nbsp;  
                        <input type="checkbox" name="xl">初中&nbsp;&nbsp;  
                        <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;      
    \}