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>
  • 相关阅读:
    2020软件工程作业05
    2020软件工程作业00--问题清单
    2020软件工程作业03
    2020软件工程作业02
    2020软件工程作业01
    软件工程个人作业06
    软件工程作业04
    软件工程作业05
    软件工称作业03
    2020软件工程作业02
  • 原文地址:https://www.cnblogs.com/susexuexi011/p/14551594.html
Copyright © 2011-2022 走看看