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

*这是一个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>

原文地址:https://www.cnblogs.com/pzbangbangdai/p/11621780.html

时间: 2024-10-07 08:29:17

HTML的入门及一些常用标签与其属性的相关文章

HTML超文本标记语言(二)-HTML中几个常用标签及属性

HTML中几个常用标签及其属性 一.HTML链接标签:<a></a> 1.herf属性:创建指向另一个文档的标签(超链接) 语法结构:<a href=url">Link Text</a> 注意: "链接文本"不必一定是文字,图片或其他HTM元素也可以成为链接. 2.name属性:规定锚的名称,用于创建文档内的书签(锚) 语法结构如下. 命名锚:<a name="tip">基本的注意事项-有用的提示

Web前端——Html常用标签及属性

html 常用的标题等标签就不记录了,只记录一下比较少见的标签以及属性 表格 table td 单元格 tr 表的行 th 表头 td或th可以下面的两个属性达到跨行或跨列 表格跨行 rowspan 表格跨列 colspan 例子: <!--cellspacing 单元格间距 cellpadding单元格边距 --> <table border="1" cellspacing="0" cellpadding="0"> &l

css常用标签及属性

css样式表常用的形式有三种,一.行内样式表.二.内部样式表.三.外部样式表 一. <p style="color:red;">nice to meet you</p> 二. 在head中写入 <style type="text/css"> p{ color:red; } .myclass{ color:blue; font-size:2em; } #idname{ color:red; } </style> 三.外部

html中一些常用标签及属性

html中标签分为块级标签和行级标签 块级标签常用的有 <div> <p> <h1><hr><pre><table><ul><ol> 行级标签常用的有 <span> <strong> <i> <em><b><sub><sup><br> 一.字体设置 <font></font> 属性有size设

简单的常用标签以及属性(随时补充)

HTML类别 table  表格  属性:1.cellpadding  单元格内部与边框的距离   2.cellspacing  每个单元格之间的间距 td 表中的单元格     属性 colspan="值"   将单元格横向合并指定值 input 输入框  属性:1.type="text"  常用输入框 ,可获取数字,符号,文字,字母等 2.type="password"  密码输入框,显示内容为点或者星号,实际内容不变 3.type=&quo

常用标签与属性

resultMap标签 desc:使返回结果与vo类对应,可以用于接收对象集合与单个对象<resultMap id="demoClass" type="cn.bohely.dolphin.domain.pack.DemoClass"> <result property="id" column="ID"/> <result property="属性" column="字

4.HTML 常用标签及属性

1. 链接 标签: <a></a> 属性: href:链接地址 target:打开方式 _blank:新标签页打开 _self:当前页面打开(默认) title:链接提示 2. 文本标记 标题元素 <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 文本样式 斜体: <

html的常用标签和属性

今天在云和学院学习了html. html:超文本标识(标记)语言 页面格式: 标签名 标签属性 页面内容: 文本 媒体 ?HTML基本结构  <html></html> ?段落标签  <p></p> ?空格标签  &nbsp ?标题标签  <h#>: #=1~6 ?图片标签  <img src=“…” /> ?注释标签  <!--   --> ?HTML水平线  <hr /> ?HTML拆行  <

HTML常用标签元素属性名英文书写

头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:cop