zoukankan      html  css  js  c++  java
  • html 基础 (9.19 第八天)

    一、HTML:超文本标记语言,是一种标签语言,不是编程语言,显示数据有双标签<body></body> 和单标签<img src=# / >, 标签大小写都可以
    通过浏览器解析HTML代码,在<body>标签中数据会被显示出来

    复制代码
    <IDOCTYPE html>
    <html>
        <head>
            title></title> 标题
        </head>
        <body>
            显示数据
        </body>
    </html>  
    复制代码

    二、HTML常用的标签

    复制代码
    <h1> ------> <h6>标题
        例:<h1>这是标题1<h1>
    <hr>                横线
    <br>                换行
    <title></title>  标题头
    <meta charsent="utf-8">   使用utf-8字符编码
    <script type="text/javascrpe">   在网页弹出窗口
        alert("你被攻击了")
    </script>
    <p></p>         段落标签,会换行
    <a></a>   链接标签 例:<a href="https://www.baidu.com">百度一下</a>
    <img />     图片标签 例:<img src="图片地址" /> </img>
    <img src=# width= "1000" height="1000">  改变图片大小
    <!-- -->      注释标签
    复制代码

    三、表格

    复制代码
    <table border="1" cellspacing="10" cellpadding="10">
        <!--width       表示表格的宽度
            border      表示外边框的粗细
            cellspadding   内边框与外边框间距的大小
            cellpadding     内边框与数据内容的距离
        -->
        <tr>
            <th><!--表头(会加粗居中)-->
            </th>
        </tr>
        <tr><!--表示行-->
            <td style="
                font-synthesis: ; 字体
                font-size: ;字号
                color:; 字色
                border-bottom:1px dashed #ccc; 加一条虚线"><!--表示列-->
    
                这是表格
    
                &nbsp    表示空格
    
            </td>
        </tr>
    </table>        
    复制代码

      1、合并列

    复制代码
    <table border="1">
        <tr>
            <td colspan="2">1</td><!-- colspan 用于合并列 -->
            
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>    
    复制代码

      2、合并行

    复制代码
    <table border="1">
        <tr>
            <th>name</th>
            <th>age</th>
            <th>addr</th>
        </tr>
        <tr>
            <td>张三</td><!-- rowspan 用于合并行 -->
            <td rowspan="2">24</td>
            <td>qwe</td>
        </tr>
        <tr>
            <td>李四</td>
            
            <td>asd</td>
        </tr>
    </table>
    复制代码

      3、列表的有序无序

    复制代码
    <table>
        <ul><!--无序列表-->
            <li>第一</li>
            <li>第二</li>
        </ul>
    
        <ol><!--有序列表-->
            <li>第一</li>
            <li>第二</li>
        </ol> 
    </table>   
    复制代码

      4、表单

    复制代码
    表单:搜集用户的信息<br>
    <form name="input_data" action="index.php" method="get">
        <!--
            action:表示数据提交到哪个页面
            method:提交数据的方式,get(数据参数拼接url),post(数据参数放在请求内容中,在url中看不到发送的数据)-->
        <label>姓名:</label>
        <input type="text" name="name"><!--文本域-->
        <br>
        <label>密码:</label>
        <input type="password" name="pwd">
        <br>
        <input type="radio" name="gender" value="1">男<br>  <!--按钮-->
        <input type="radio" name="gender" value="0">女<br>
        <input type="radio" name="gender" value="01">不知道<br>
    
        爱好:<br>
        <input type="checkbox" name="aihao" value="lanqiu">篮球<br>
        <input type="checkbox" name="aihao" value="zuqiu">足球<br>
        <input type="checkbox" name="aihao" value="pingpangqiu">乒乓球<br>
    
        提交:
        <input type="submit" name="sub" style="" value="提交"><br>
    </form>
  • 相关阅读:
    17111 Football team
    Train Problem I (HDU 100题纪念)
    迷宫问题
    图形点扫描
    看病要排队(stl)
    水果
    Prime Ring Problem
    N皇后问题
    2^x mod n = 1
    Queuing
  • 原文地址:https://www.cnblogs.com/liujizhou/p/11571700.html
Copyright © 2011-2022 走看看