html之基础知识学习

html常用标签
<!DOCTYPE html>
<html>
<head>
<title>Learn test html</title>
<meta charset='utf8'/>
<style> p {background-color:red;width:200px;height:40px;position:fixed;bottom:0;right:0}</style><!--内部样式-->
<link> </link><!-- <link rel="stylesheet" type="text/css" href="mystyle.css"> 外部样式-->
</head>
<body>

    <!-- <div id='d1' style="background-color:red;width:200px;height:40px;position:fixed;bottom:0;right:0"> 内联样式 -->
    <div id='d1' >
        <p>div 属性</p>
    </div>

    <!--form 表单-->
    <form action='#',method='post'>
    <!--:method 属性:get post 
        浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法:POST 方法和 GET 方法。
        如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。
        在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
        另一种情况是采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
        一般浏览器通过上述任何一种方法都可以传输表单信息,而有些服务器只接受其中一种方法提供的数据。可以在 <form> 标签的 method (方法)属性中指明表单处理服务器要用方法来处理数据,使 POST 还是 GET。
    -->
    username:<input type="text" name='name'/><br/>
    password:<input type="password" name='password'/><br/>
    <input type="button" name='button1' value='提交'/><br/>
    <input type="submit" name='submit1' value='提交'/><br/>
    <br/>
    <!---->
    live:<input type='radio' name='单选框' value='live'>
    dead:<input type='radio' name='单选框' value='dead'>
    <!--复选框-->
    <br/>
    <br/>
    <input type="checkbox" name='复选框' value='value1'>复选框</input>
    <input type="checkbox" name='复选框' value='value2'>复选框1</input>
    <br/>
    <br/>
    <!--下拉框-->
    <select id='select1' name='start'>
    <option>商丘</option>
    <option selected>郑州</option> <!--selected 制定预选值-->
    <option>喀什</option>
    </select>
    <br/>
    <br/>

    <!--文本框-->
    <textarea id='textarea1' rows='10',cols='30'>
    文本框。
    </textarea>
    </form>
    <br/>
    <!--表格-->
    <table border='2'>
    <caption>表格</caption>
        <tr>
            <td width='200px'>1</td>
            <td>2</td>
        <tr>
        <tr>
            <td width='200px'>3</td>
            <td width='200px'>4 </td>
        <tr>
    </table>

    <ol><!---ol 标签定义了一个有序列表. 列表排序以数字来显示。-->
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

    <ol start="50">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

</body>
</html>
css样式介绍:
/*  注释内容  */
/*  css样式: 
    有2种选择器:id 和 class  
    id选择器可以为标有特定的html标签是定样式,html的标签以id属性来设置选择器,css中id选择器以'#'来定义 */

/* id选择器 */
#id{
    background-color:red;
    width:200px;
    height:40px;
    position:fixed;
    bottom:0;
    right:0

}
/*   class   */

/* calss 选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用。class选择器在html 中以class 属性表示,在css 中,类选择器以一个'.'号显示*/
.class {
    color:red;
    text-align:center;
}

** html使用外部css样式

<!DOCTYPE html>
<html>
<head>
<title>Learn test html</title>
<meta charset='utf8'/>
<link rel="stylesheet" type="text/css" href="css.css"/> <!-- <link rel="stylesheet" type="text/css" href="css.css"> 外部样式-->
</head>
<body>

    <!-- <div id='d1' style="background-color:red;width:200px;height:40px;position:fixed;bottom:0;right:0"> 内联样式 -->
    <div id='id' >
        <p >div 属性</p>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/q936889811/article/details/80045628
今日推荐