zoukankan      html  css  js  c++  java
  • Web前端——html 基本标签

    基本标签

    文件标签

    构成html最基本的标签

    html:html文档的根标签

    head:头标签,用于指定文档的一些属性,引入外部资源

    title:标题标签

    body:体标签

    !DOCTYPE html :html5中定义该文档是html文档

    文本标签

    <!DOCTYPE html>
    <html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>文本标签</title>
    </head>
    <br>
        <!-- 标题标签 -->
        <h4>定风波</h4>
        <h4>苏轼</h4>
        <!--换行-->
    <i>三月七日,沙湖道中遇。雨具先去,同行皆狼,余独不觉,已而遂,故作此。</i></br><!-- i->斜体-->
        莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。</br>
    料峭春风吹酒醒,微冷,山头斜照却相迎。回首向来萧瑟处,归去,<b>也无风雨也无晴</b><!-- b->黑体-->
        <!--显示一条水平线-->
        <hr color="red" size="10" align="left" >
        <!--段落标签-->
        <p>看过这样一个故事:一对小夫妻开了个小店卖馒头,就一张红纸写了店名贴在门口。一个电蒸锅,一天也蒸不出几屉馒头。邻居都替他们发愁,这日子可咋过呢?</p>
      <p>谁知过了几个月,来买馒头的人越来越多,红纸上便添了几个字,开始卖花卷、糖三角和发糕。又过了几个月,又添了煮黏苞米、
        自制大酱、咸鸭蛋和咸菜……</p>
     <p>作者写到,这家人“就像雨后抖动的一株草”。是的,这株草虽然柔弱,但却有一种令人感动的生命力。一对普通的小夫妻,通过一天天踏实的努力,生活越来越好。然而,也有一些人, 感觉自己没有握住一手好牌,便早早放弃了。</p>
       <hr color="green" size="5" align="center" width="50%">
        <!--字体标签-->
        <center>   <!--居中标签-->
            <font color="black" size="20" face="宋体"> 加油!</font>
        </center>
    </body>
    </html>

    属性定义 color:1.英文单词:red、green等;

    2.rgb(值1,值2,值3):值的范围:0~225(rgb为三原色的缩写)

    3.#值1值2值3:值的范围:00~FF之间(取色器)

    width:1.数值:例如:width=“20”,默认单位是像素;

    2.数值%:占比相对于父元素的比例

    图片标签

    <!--展示一张图片-->
    <img  src="图片路径.jpg"  alt="图片没有正确展示" width="50" height="50"/>
    <!--
    相对路径
        *以.开头的目录
            ./代表当前目录
            ../代表上一级目录
    -->

    列表标签

    <!-- 有序列表 -->
    <ol type="A" start="3">
        <li>睡觉</li>
        <li>吃饭</li>
        <li>学习</li>
    </ol>
    <!-- 无序列表 -->
    <ul type="circle/square/disk" >
        <li>睡觉</li>
        <li>吃饭</li>
        <li>学习</li>
    </ul>

    链接标签

    <!--超链接 a-->
    <a href="http://www.baidu.com">百度</a><br>
    <a href="http://www.baidu.com" target="_blank">百度2</a>
    </br><a href="./Demo2.html">图片标签</a></br>
    <a href="http://www.baidu.com"><img src="为图片设置超链接.img"></a></br>
    
    属性:href:指定访问资源的URL(统一资源定位符)
        target:-self(默认):在当前界面打开;
                -blank:在空白页面打开

    表格标签

    table:定义表格 caption::定义表格名

    tr:定义行 thead:定义表格的头部分

    tb:定义单元格 tbody:定义表格的体部分

    th:定义表头单元格 tfoot:定义表格的脚部分

    <table border="1" width="30%">
        <caption>学生信息表</caption>
        <!--
        border:边框;width:宽度 cellspacing:定义单元格之间的距离
        cellpadding:定义内容和单元格之间的距离 bgcolor:定义背景色-->
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01</td>
                <td>小明</td>
            </tr>
            <tr>
            <td>02</td>
            <td>小红</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td >colspan="2"备注</td>
               <!-- 属性:该单元格占两列(rowspan=“2”,单元格占两列)-->
            </tr>

    <td >colspan="2"备注</td>
    <!-- 属性:该单元格占两列(rowspan=“2”,单元格占两列)-->
    </tr>
    </tfoot>
    </table>

     

    表单标签

    表单:用于采集用户输入数据的,用语和服务器进行交互。

    标签:form

    <!--
    from:用于定义表单,可以定义一个范围,范围代表采集数据的范围
    属性:action:指定提交数据的URL
          method:指定提交方式
          分类:共有七种,常用两种
          get:1.请求参数在地址栏中显示
               2.请求参数有大小限制
               3.不太安全
          post:1.请求参数在不会地址栏中显示,会封装在请求体中
                2.请求参数没有大小限制
                3.比较安全
     表单项中的数据要想被提交,必须指定其name属性
    -->

    表单项标签

    input:可以通过type属性值改变元素的展示样式

    select:下拉列表 textarea:文本域

    <form action="#" method="post">
        <lable for="usernaem"> 用户名:</lable><input type="text"  name="username" placeholder="请输入用户名" id="usernaem"><br>
        //label标签for后的内容与输入内容的id相同,可以定位光标
        密码:<input tupe="password" name="password" placeholder="请输入密码"><br>
        //type为密码类型可以隐藏输入
        性别:<input type="radio" name="gender" value="male" checked><input type="radio" name="gender" value="female"><br>
        //type为radio单选框,应保证name后面的内容相同
        爱好:<input type="checkbox" name="hobby"  value="game">游戏
        <input type="checkbox" name="hobby"  value="ball">篮球
        <input type="checkbox" name="hobby"  value="chess" checked>象棋<br>
        //type为checkbox复选框,应保证name后面的内容相同
        上传图片:<input type="file" name="file"><br>
        隐藏域:<input type="hidden" name="cc" value="aa"><br>
        取色器:<input type="color" name="color"><br>
        日期:<input type="date" name="data1"><br>
            <input type="datetime-local" name="data2"><br>
        邮箱:<input type="email" name="email"><br>
        定义数字:<input type="number" name="number"><br>
        按钮:
        提交按钮:<input type="submit" value="登录">
        按钮效果:<input type="button" value="这是一个按钮">
       图片提交:<input type="img" src="图片路径">
        下拉框:<select name="select">
                    <option value=""> 请选择</option>
                    <option value="1"> 1</option>
                    <option value="2"> 2</option>
                </select><br>
        文本域:<textarea cols="10" rows="20" name="text"></textarea>
  • 相关阅读:
    路径变量@PathVariable/请求参数@RequestParam的绑定以及@RequestBody
    JSR303后端校验详细笔记
    创建ssm项目步骤
    利用 R 绘制拟合曲线
    在 Linux 中将 Caps 根据是否为修饰键分别映射到 esc 和 Ctrl
    Master Transcription Factors and Mediator Establish Super-Enhancers at Key Cell Identity Genes
    Genomic Evidence for Complex Domestication History of the Cultivated Tomato in Latin America
    Variation Revealed by SNP Genotyping and Morphology Provides Insight into the Origin of the Tomato
    The genetic, developmental, and molecular bases of fruit size and shape variation in tomato
    微信支付jsapi
  • 原文地址:https://www.cnblogs.com/susexuexi011/p/14551594.html
Copyright © 2011-2022 走看看