HTML

2017-11-13 本文已影响3人 CoderHong

HTML概述

HTML是一种超文本标签语言。用来展示内容。

超文本
- 超越了一般的文本，描述了文本的字体、颜色、图片。
标签
- 既标记。有特殊含义的。<></>
  书写一个简单的.html文件

<!DOCTYPE html>
<html>
<head>
    <title>HTML学习</title>
        <!-- 防止中文乱码 -->
    <meta charset="utf-8">
</head>
<body>
    <h1>标题1</h1>
</body>
</html>

列表页面展示

标准的单元格书写：

<table border="1" cellpadding="0" width="200px" height="100px" align="center" bgcolor="#ffff00"> 
        
        <!-- tr 行 -->
        <tr align="center"> 
            <!-- td 列 -->
            <td>用户名</td>
            <td>密码</td>
        </tr>

        <!-- tr 行 -->
        <tr>
            <!-- td 列 -->
            <td>coderhong</td>
            <td>1234</td>
        </tr>
    </table>

单元格合并

跨行合并colspan="行数"
跨列合并rowspan="行数"

<!DOCTYPE html>
<html>
<head>
    <title>列表页面的展示</title>
    <!-- 防止中文乱码 -->
    <meta charset="utf-8">
</head>
<body>
    <h align="center">标题1</h1>


    <table border="1" cellpadding="0" width="200px" height="100px" align="center" bgcolor="#ffff00"> 
        
        <!-- tr 行  第一行-->
        <tr align="center"> 
            <!-- td 列 -->
            <td>用户名</td>
            <td colspan="2">密码</td>
            
        </tr>

        <!-- tr 行 -->
        <tr>
            <!-- td 列  第二行-->
            <td rowspan="2">coderhong</td>
            <td>1234</td>
            <td>1234</td>
        </tr>
        <tr>
            <!-- td 列  第三行-->
            <td>1234</td>
            <td>1234</td>
        </tr>

    </table>
</body>
</html>

Snip20171113_14.png

表单

表单标签<form></form>,用来从浏览器收集用户提交的数据。
常见的子标签：

input
select 下拉选
textarea 文本域

input常见的属性：

type:
常见的属性
- text 文本框
- password 密码框
- radio 单选框
- checkbox: 多选框
- file: 文件框
- submit: 提交
- reset：重置
- button：普通按钮
- hidden：隐藏域隐藏在页面上提交的时候数据可以被提交到服务器。
- image：图片提交
name属性
- 可以将几个单选框(复选框设置为一组)
- 要想将数据提交到服务器必须有name属性 ⭐️⭐️⭐️

<!DOCTYPE html>
<html>
<head>
    <title>表单</title>
    <meta charset="utf-8">
</head>
<body>

    <h1>个人资料</h1>
    <form method="" target="">
        
        姓名：<input type="text" name="username"> <br>
        密码：<input type="password" name="password"> <br>
        性别：<input type="radio" name="sex" value="1" checked="checked">男 
            <input type="radio" name="sex" value="0">女
        <br>
        爱好: <input type="checkbox" name="hobby" value="eat" checked="checked">吃
             <input type="checkbox" name="hobby" value="drink">喝
             <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
        <br>

        头像: <input type="file" name="photo"><br>
        籍贯: <select name="pro">
                <!-- select要想有内容 必须有option标签 -->
                <option value="001">北京</option>
                <option value="002">上海</option>
                <option value="003" selected="selected">广州</option>
                <option value="004">杭州</option>
            </select>

            <select name="city">
                <!-- select要想有内容 必须有option标签 -->
                <option value="00101">朝阳</option>
                <option value="00102">崇文本</option>
                <option value="00103" selected="selected">广东</option>
                <option value="00104">西湖</option>
                <option value="00105">余杭</option>
                <option value="00106">下沙</option>
            </select>
            <br>
        自我介绍:
        <!-- cols 设置宽  rows设置高 -->
            <textarea name="intr" cols="40" rows="4">
                helloworld！！
            </textarea> 
            <br>

            <input type="submit" value="保存">        
            <input type="reset">
            <input type="button" value="普通按钮">
    </form>


</body>
</html>

浏览器打开如下：

Snip20171113_15.png

提交的内容是需要注意：

对于文本框 、密码框、手写的内容可以传递过去
对于单选框和多选框却没有把值传递过去 必须设置value属性
若下拉选框要想把选中的内容值传递过去，请加上value

默认值的设置：

  文本框、 密码框只需要添加value属性
  单选框多选框 添加 checked="checked"
  对于下拉选： 添加select="select"
  文本域： 标签体

默认提交只提交当前页面。如果提交到指定路径，就需要设置<form></form>属性

action:信息提交的路径默认是当前页面
method: 表单的提交方式
- get（默认）
- post

GET请求跟POST请求区别

1. GET会把所有的参数追加在地址栏上，post不会。
2.get请求参数有大小限制，post请求参数大小没有限制
3.post相对于get请求安全些。

扩展：
设置输入框不可输入
- 设置属性为readonly="readonly"
举例：

<input type="text" name="username" readonly="readonly" value="coderhong "><br>

HTML

HTML概述

列表页面展示

表单

GET请求跟POST请求区别

猜你喜欢

热点阅读