HTML 标签
2018-06-24 02:01:57来源:未知 阅读 ()
1. 段落
- 占整行
p 段落之间有间距
br,换行,但是还在这个段落里面,没有间距(<br />)
h 一般用于标题 h1,h2,h3,h4,h5,h6 大小 h1最大h6最小
div 仅仅占一行
2. 内容
span 不分段,只是分行,只占自己的位置 (对个div是多行,多个span都在一行里面)
3. 输入
input (get 会把内容放在url中)
1 <form action="http://localhost:1234/index" method="get"> 2 <input type="text" name="user"/> 3 <input type="password" name="pwd"/> 4 <input type="button" value="login"/> 5 <input type="submit" value="submit"/> 6 </form>
1 <form action="http://localhost:1234/index" method="post">
2 <input type="text" name="user"/> 3 <input type="password" name="pwd"/> 4 <input type="button" value="login"/> 5 <input type="submit" value="submit"/> 6 </form>
百度搜索
1 <!--去百度搜索--> 2 <form action="https://www.baidu.com/s"> 3 <input type="text" name="wd" value="cloud"/> 4 <input type="submit" value="search"/> 5 </form>
<form enctype="multipart/form-data"> <div> <p>select gender</p> <!--radio 圆的选择框, 加上相同的name后只能单选,checked 默认被选中 --> male: <input type="radio" name="gender" value="male" checked="checked"/> female: <input type="radio" name="gender" value="female"/> <p>hobby</p> <!--checkbox 方的选择框,可以多选--> football: <input type="checkbox" name= hobby value="football" checked="checked"/> basketball: <input type="checkbox" name= hobby value="basketball" checked="checked"/> ping-pong: <input type="checkbox" name= hobby value="ping-pong"/> <input type="submit" value="submit" name="gender"/> <p>upload file</p> <!--上传文件 relay on enctype--> <input type="file" name="file"/> <input type="text" name="user" /> </div> <!--reset--> <input type="reset" value="reset" /> <input type="submit" value="submit" /> </form>
多行文本输入
<form> <div> <!--把default值放在中间--> <textarea name="meno">asdsada</textarea> </div> <input type="submit" value="submit" /> </form>
label,点击label也可以输入
1 <fieldset> 2 <legend>login</legend> 3 <label for="username">username:</label> 4 <input id='username' type="text" name="username" /> 5 <br /> 6 <label for="passwd">password:</label> 7 <input id='passwd' type="text" name="passwd" /> 8 </fieldset>
下拉框 select,optgroup
1 <form> 2 <!--下拉框 size框的大小,默认为1,只显示一个 加上multiple可以多选--> 3 <p>select your city</p> 4 <select name="city" size="5" multiple="multiple"> 5 <option value="Peking">Peking</option> 6 <option value="QD" selected="selected">QD</option> 7 <option value="Shanghai">Shanghai</option> 8 </select> 9 <br /> 10 <p>select your city from province</p> 11 <select name="optgroup" size="5"> 12 <!--optgroup中的不能选中,只有option里面的可以选中--> 13 <optgroup label="Shandong Province"> 14 <option value="QD">QD</option> 15 <option value="Jinan">Jinan</option> 16 </optgroup> 17 <optgroup label="Heilongjiang Province"> 18 <option value="Harbin">Harbin</option> 19 <option value="Mudanjiang">Mudanjiang</option> 20 </optgroup> 21 </select> 22 <input type="reset" value="reset" /> 23 <input type="submit" value="submit" /> 24 </form>
4 图片 img
ie 会默认加边框,最好把border设置为0
1 <body> 2 <!--点击图片跳转--> 3 <a href="https://www.baidu.com"> 4 <!--alt 图片失效显示的文件,title为鼠标悬浮时显示的--> 5 <img src="1.jpg" style="height: 200px; width: 200px" alt="car" title="car"/> 6 </a> 7 </body>
5 列表 ul,ol,dl
1 <body> 2 <!--列表 点为开头--> 3 <ul> 4 <li>aaa</li> 5 <li>aaa</li> 6 <li>aaa</li> 7 <li>aaa</li> 8 </ul> 9 <!--列表 数字为开头--> 10 <ol> 11 <li>aaa</li> 12 <li>aaa</li> 13 <li>aaa</li> 14 <li>aaa</li> 15 </ol> 16 <!--列表 标题和分层--> 17 <dl> 18 <dt>aaa</dt> 19 <dd>bbb</dd> 20 <dd>bbb</dd> 21 <dt>aaa</dt> 22 <dd>bbb</dd> 23 <dd>bbb</dd> 24 </dl> 25 </body>
6.表格 table
1 <body> 2 <table border="1"> 3 <!--行--> 4 <tr> 5 <!--列--> 6 <td>11</td> 7 <!--表格中的跳转, 也可以加多个跳转--> 8 <td> 9 <a href="https://www.baidu.com">12</a> 10 <a href="https://www.baidu.com">12</a> 11 </td> 12 <td>13</td> 13 </tr> 14 <tr> 15 <td>21</td> 16 <td>22</td> 17 <td>23</td> 18 </tr> 19 </table> 20 </body>
thead,tbody 以及合并单元格
1 <table border="1"> 2 <!--header--> 3 <thead> 4 <!--行--> 5 <tr> 6 <!--列--> 7 <th>header1</th> 8 <th>header2</th> 9 <th>header3</th> 10 <th>header4</th> 11 </tr> 12 </thead> 13 <!--body--> 14 <tbody> 15 <tr> 16 <td>11</td> 17 <td>12</td> 18 <td>13</td> 19 <td>14</td> 20 </tr> 21 <tr> 22 <td>21</td> 23 <!--占2列,去掉右面的--> 24 <td colspan="2">22</td> 25 <td>23</td> 26 <!--<td>24</td>--> 27 </tr> 28 <tr> 29 <!--占2行,去掉下面的--> 30 <td rowspan="2">31</td> 31 <td>32</td> 32 <td>33</td> 33 <td>34</td> 34 </tr> 35 <tr> 36 <!--<td>41</td>--> 37 <td>42</td> 38 <td>43</td> 39 <td>44</td> 40 </tr> 41 <tr> 42 <td>51</td> 43 <td>52</td> 44 <td>53</td> 45 <td>54</td> 46 </tr> 47 </tbody> 48 </table>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash