tofacebook.com -专业IT技术社区 常用的HTML标签 Web程序 - tofacebook.com-专业IT技术社区
134°

常用的HTML标签 Web程序

标签:提交   color   后台   set   cell   一起   技术   name   效果   

p&br&hr

p表示自然段落,默认上下会有行间距

br是换行,自闭合标签

hr是横线

 

a标签

1.可添加超链接标签

2.有锚的作用,相当于页内定位

 

select标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <h1>单选</h1>
    <select name="">
        <option value="1">Jay</option>
        <option value="2">范特西</option>
        <option value="3" disabled="true">我不能选</option>
        <option value="4" selected="selected">我是默认选项</option>
    </select>

<h1>多选</h1> <select multiple="multiple" size="6"> <option value="1">七里香</option> <option value="2">依然范特西</option> <option value="3">十二新座</option> <option value="4">惊叹号</option> </select>

<h1>分组</h1> <select name=""> <optgroup label="第一组"> <option value="1">我是第一组的1号</option> <option value="2">我是第一组的2号</option> </optgroup> <optgroup label="第二组"> <option value="1">我是第二组的1号</option> <option value="2">我是第二组的2号</option> </optgroup> </select> </body> </html>

技术分享图片技术分享图片技术分享图片

效果如图

在单选中,通过 disabled="true" 和 selected="selected"来控制是否可选和默认显示项

在多选中,通过multiple来设置多选,size=$i 控制初始显示几个选项

分组中,用<optgroup  label="第一组">来进行设置

 

 

 Input系列标签

  • Checkbox:多选框;
  • radio:单选框
  • text:明文输入信息
  • password:密文输入信息
  • button:按钮
  • submit:提交
  • reset:重置
  • textarea:备注信息框
  • form:表单,设置submit、reset数据的范围,一般在一个form里的数据会被一起提交
  • ul:带点的列表
  • ol:带序号的列表
  • dl:递归的列表
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>注册表单</title>
</head>
<body>
<form action="http://hello.php" method="post"> #action为提交的后台地址,方式为post <label>Username:</label> <input type="text" name="username" /><br /> #name为显示在From data里面的key <label>Password:</label> <input type="password" name="pwd" /><br /> <label>Gender:</label> #name一致才能单选,默认选择使用checked="checked" <input type="radio" id="male" value="male" name="sex" /><label></label> <input type="radio" id="female" value="female" name="sex" checked="checked"/><label></label><br /> <label>Hooby:</label>#name为key,value为值,禁用disabled="disabled",默认checked="checked" <input type="checkbox" name="hooby" id="hobby1" value="养花" disabled="disabled"/>养花(禁用) <input type="checkbox" name="hooby" id="hobby2" value="养草" checked="checked"/>养草(选中) <input type="checkbox" name="hooby" id="hobby3" value="养猫" />养猫 <input type="checkbox" name="hooby" id="hobby4" value="养狗" />养狗 <br /> <label>Birth</label> <select name="year"> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990" selected="selected">1990</option> </select> <select name="month"> <option value="January" selected="selected">January</option> <option value="February">February</option> <option value="March">March</option> </select> <br /> <label>自我介绍</label><br />#禁止拉动style="resize: none; 默认文字placeholder=“” <textarea name="myself" rows="10" cols="50" style="resize: none;" placeholder="学前端的小学生~"></textarea><br /> <input type="submit" value="submit"/> <input type="reset" value="reset" /> </form> </body> </html>

效果如下

技术分享图片技术分享图片

 

table标签

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Table</title>
    <style type="text/css">
  #css样式,table边框合并
table{ border-collapse: collapse; } td{ text-align: center; } </style> </head> <body> <table border="1px" cellspacing="" cellpadding=""> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>英语</th> <th>物理</th> <th>化学</th> </tr> <tr> <td>小明</td> <td>90</td> <td>98</td> <td>78</td> <td>85</td> <td>89</td> </tr> <tr> <td>小西</td> <td>91</td> <td>92</td> <td>73</td> <td>84</td> <td>85</td> </tr> </table> </body> </html>

效果如下

技术分享图片

tr 全称 table row 意为 “表行”
th 全称 table header cell 意为“表头单元格”
td 全称 table data cell 意为“表中的数据单元”

 

常用的HTML标签

标签:提交   color   后台   set   cell   一起   技术   name   效果   

原文地址:https://www.cnblogs.com/ronyjay/p/8707711.html


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: