HTML第一天

最新推荐文章于 2024-09-12 19:13:21 发布

Dxmly

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量35

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Dxmly/article/details/131998610

版权

认识HTML

HTML是超文本标记语言-----（网页）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="50">
  <tr>
    <td>姓名</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>120</td>
    <td>120</td>
    <td>130</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>102</td>
    <td>123</td>
    <td>120</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>122</td>
    <td>120</td>
    <td>130</td>
  </tr>
</table>
</body>
</html>

表单

表单标签<form>

<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>

method 有get和post两种（post保密性较好，get会在地址上显示出输入的东西）

表单控件 <input type="控件类型"/>

type属性为<input>控件最基本的属性，用来指定不同的控件类型

<!--文本输入框控件-->
                <input type="text" name="username"/>
<!--密码输入框控件-->
                <input type="password" name="password">
<!--性别选择控件-->
                <input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="famale">女
<!--复选框、多选框-->
                <input type="checkbox" name="hobby" value="sing">唱歌
                <input type="checkbox" name="hobby" value="dance">跳舞
                <input type="checkbox" name="hobby" value="code">敲代码
<!--文件-->
                <input type="file">
<!--提交按钮-->
                <input type="submit" value="注册">
<!--重置按钮-->
                <input type="reset" value="重置">

表单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" name="登录界面">
    <table border="0" align=center cellpadding="10">
        <tr >
            <td align="right">用户名:</td>
            <td>
                <!--文本框-->
                <input type="text" name="username">
            </td>
        </tr>
        <tr >
            <td align="right">密码:</td>
            <td>
                <!--密码框-->
                <input type="password" name="password">
            </td>
        </tr>
        <tr >
            <td align="right">性别:</td>
            <td>
                <!--单选框-->
                <input type="radio" name="gender" value="male">男
                <input type="radio" name="gender" value="female">女
            </td>
        </tr>
        <tr >
            <td align="right">爱好:</td>
            <td>
                <!--复选框、多选框-->
                <input type="checkbox" name="hobby" value="sing">唱歌
                <input type="checkbox" name="hobby" value="dance">跳舞
                <input type="checkbox" name="hobby" value="code">敲代码
            </td>
        </tr>
        <tr>
            <td align="right">头像</td>
            <td>
                <!--文件-->
                <input type="file">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <!--提交按钮-->
                <input type="submit" value="注册">
                <!--重置按钮-->
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

写在标签内的小方法

align对齐方式

align=center
align=right
一般默认为向左对齐

cellpadding内容距边框距离

border 边界

cellpadding="4"
border="6"
此处的4   6  是像素

例子

<table border="0" align=center cellpadding="10">

</table>

文本域

文字域标签<textarea cols=" " rows=" "></textarea> 可以输入文字的文本框 cols列数 rows行数

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post" name="commentForm" align=center>
<textarea cols="30" rows="20" >
  请文明评论
</textarea>
  <br />
  <input type="submit" value="提交" name="textArea">
</form>
</body>
</html>