HTML的入门及一些常用标签与其属性

<html><!--html文档的根标签-->
    <head><!-- 头标签-->
        <title>peizeng</title><!--标题标签-->
    </head>
    
    <body><!-- 体标签-->
        <font color='red'>Hello world</font><br/> <!-- br/换行标签-->
        <font color='green'>Hello world</font><br/>
        <h1>防火工作</h1> <!-- h1到h6依次为标题的大小 -->
        <p>
        一、高度重视冬季防火工作。目前已进入冬季,风干物燥,用火、用电、用油、用气增加,元旦、春节即将来临,人流、物流集中,
        各种庆祝集会和传统民俗文化活动频繁,火灾事故隐患增多,防控难度加大,消防安全形势将更加严峻。
        各县市区、各部门、各单位负责人要针对本地区、本部门、本单位消防工作存在的薄弱环节,组织制定各项防范措施,坚决防止重特大火灾事故的发生。
        </p>
        <p>
        二、严格落实消防安全责任制。各县市区人民政府全面负责本地区消防工作,政府主要负责同志为第一责任人,分管负责同志为主要责任人。
        要层层落实责任,把任务分解到部门、单位和个人。各单位负责人对本单位消防安全工作负总责,进一步落实消防安全责任制和岗位责任制。
        要加大火灾事故责任追究力度,实行责任倒查和逐级追查,做到事故原因不查清不放过、事故责任者得不到处理不放过、整改措施不落实不放过、教训不吸取不放过。
        发生重大火灾事故的,除追究单位主要负责人和实际控制人责任外,还要追究地方负责人和上级单位主要负责人的责任;
        触犯法律的,依法追究单位主要负责人、单位实际控制人和上级单位负责人的法律责任。
        </p>
        <p>
        三、认真组织开展消防安全大检查活动。
        </p>
        <!--段落标签 p-->
        <!--hr标签 显示一条水平线-->
        
        <hr color='red'>
        <h2>文本标签</h2>
        <!--b标签 加粗-->
        白日依山尽<br/>
        <b>白日依山尽</b><br/>
        <!--i标签 斜体-->
        黄河入海流<br/>
        <i>黄河入海流</i><br/>
        <!--font标签 字体标签-->
        欲穷千里目<br/>
        <font color='red' size='3'>欲穷千里目</font><br/>
        
        <!--center居中标签-->
        更上一层楼<br/>
        <center>
        更上一层楼<br/>
        </center>
        
        <!--
        其中font与hr标签各有一定的属性
        hr有color,width,size,align(对齐方式center居中,left居左,right居右)
        font有color,size,face(字体)
        属性的取值:
            color:
                1.直接接颜色单词
                2.rgb(值1,值2,值3),值的范围0~225
                3.#值1值2值3:值的范围00~FF之间。
            width:
                1.数值:width=‘20’。单位为像素
                2.数值%:相当于屏幕的一个比例。例:50%。
        -->
        
        <!--
            加载图片使用img标签。
            <img src=”相对路径.jpg“>
        -->
        <hr color='red'>
        <h2>列表标签</h2>
        <!--
            *有序列表
                *<ol>
                *<li>
            *无序列表
                *<ul>
                *<li>   
        -->
        <ol>
            <li>白日依山尽</li>
            <li>黄河入海流</li>
            <li>欲穷千里目</li>
            <li>更上一层楼</li>
        </ol>
        <ul>
            <li>白日依山尽</li>
            <li>黄河入海流</li>
            <li>欲穷千里目</li>
            <li>更上一层楼</li>
        </ul>
        
        <hr color='red'>
        <h2>链接标签</h2>
        <!--
            a:定义一个超链接
                属性:
                    href:指定访问资源的URL(统一资源定位符)
                    target:指定打开资源的方式
                        _self:默认值,在当前页面打开
                        _blank:在空白页面打开  
        -->
        <a href='https://www.cnblogs.com/pzbangbangdai/'>这是一个超链接</a><br>
        <a href='https://www.cnblogs.com/pzbangbangdai/' target='_blank'>这还是一个超链接</a>
        
        <hr color='red'>
        <h2>表格标签</h2>
            <!--
                *table:定义表格
                *tr:定义行
                *td:定义单元格
                    *colspan:合并列
                    *rowspan:合并行
                *th:定义表头单元格
                *caption:表格标题
            -->
            <table border='1' width='50%' cellpadding='0' cellspacing='0'>
                <caption>学生信息表</caption>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>成绩</th>
                </tr>
                
                <tr>
                    <td>01</td>
                    <td>张三</td>
                    <td>70</td>
                </tr>
                
                <tr>
                    <td>02</td>
                    <td>李四</td>
                    <td>80</td>
                </tr>
            
            </table>
        <hr color='red'>
        <h2>表单标签</h2>
        概念:用于采集用户输入的数据
        
        <!--
            form :用于定义表单。可以定义一个范围,范围代表采集用户数据的范围
                属性:
                    action:指定提交数据的URL
                    methon:指定提交方式。常用的两类:
                        get:请求参数会在地址栏中显示
                        post:请求参数不会在地址栏中显示
                        
                要想数据被提交,必须指定name属性
        
        -->
        <form action='#' method='get'>
            用户名:<input name='username'><br>
            密码:<input name='password'><br>
            <input type='submit' value='登录'>
        
        </form>
        
        <hr color='red'>
        <h2>表单项标签</h2>
        <!--
            *input:可以通过type属性值,改变元素展示的样式
                *type属性:
                    *text:文本输入框
                        *placeholder:输入提示信息
                    *password:密码输入框
                    
                    *radio:单选框
                        *注意如果有多个单选框则name属性值必须一样
                        *每一个单选框的value属性一般指定被选择中提交的值
                        *通过添加checked属性指定其为默认选项
                        
                    *checkbox:多选框
                        *每一个单选框的value属性一般指定被选择中提交的值
                        *通过添加checked属性指定其为默认选项
                        
                    *file:文件选择框
                    *submit:按钮
                    
                    *hidden:隐藏域,用于提交一下信息
                    
                    
                *label:指定输入框的文字描述信息(即点击一个框的文字信息光标就会跳转至其框中)
                    *注意label的for属性值要与input的id属性值对应
            *select:下拉标签
                *子元素:option,指定列表项
                
            *textarea:文本域
                *cols:指定列数
                *rows:指定行数
        -->
        <form action='#' method='post'>
            <table border='1' width='500' align='center'>
                <tr>
                    <td><label for='username'> 姓名</label></td>
                    <td><input name='username' type='text' id= 'username'></td>
                </tr>
                
                <tr>
                    <td><label for='password'> 密码</label></td>
                    <td><input name='password' type='password' id= 'password'></td>
                </tr>
                
                <tr>
                    <td><label for='email'> 邮箱</label></td>
                    <td><input name='email' type='email' id= 'email'></td>
                </tr>
                
                <tr>
                    <td><label > 性别</label></td>
                    <td><input name='gender' type='radio' value='male'>男
                        <input name='gender' type='radio' value='female'>女
                    </td>
                </tr>
                
                <tr>
                    <td><label for='birthday'> 生日</label></td>
                    <td><input name='birthday' type='date' id= 'birthday'></td>
                </tr>
                
                <tr>
                    <td colspan='2' align='center'><input type='submit' value='注册'> </label>
                                  </td>
                </tr>
        
            <table>
        
        </form>
        
         
    </body>



</html>

猜你喜欢

转载自www.cnblogs.com/pzbangbangdai/p/11621780.html