Ronny 's Blog
坚持!
Toggle navigation
Ronny 's Blog
Home
About Me
Archives
Tags
03--html基础之各种标签详解
html
2018-10-31 23:16:07
38
0
0
haiyang
html
 # 01. a标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网站的编码--> <title>jack网站</title> <!--网站的标题--> <link rel="shortcut icon" href="test.ico"> <!--网站标题前面的图标--> </head> <body> <!--标签一般分为两种：块级标签 和 行内标签--> <!--块级标签和行内标签的区别--> <!--谷歌或者360浏览器，右键审查元素，点击左上角的放大镜后，鼠标移动到页面元素，点击元素，占一行的是块级标签，占指定长度的是行内标签--> <!--span,a,select,label,input,form,img等 行内标签 --> <!--div、h、p 等 块级标签--> <!--各种符号--> <!-- 空格--> <!--http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html--> <!--p 和 br--> <!--p表示段落，默认段落之间是有间隔的！--> <!--br 是换行--> <p>段落 段落<br>段落换行</p> <!--a标签--> <!--< a href="http://www.autohome.com.cn"> </a>--> <!--1、target属性，_black表示在新的页面打开--> <!--2、锚--> <!--3、可以跳转到外网百度，也可以跳转到同级目录别的页面-自定义--> <a href="http://www.baidu.com">百度</a> <!--a标签主要用于网站链接跳转--> <!--1、不带target属性,表示在原来的页面打开--> <a href="http://www.baidu.com" target="_blank">百度1</a> <!--1、target属性，_black表示在新的页面打开--> <!--a标签是行内标签，不能独占一行--> <div> <a href="http://www.baidu.com" target="_blank">百度2</a> </div> <!--div是块级标签 独占一行--> <div> <a href="02被跳转.html">02跳转</a> <!--跳转到同级目录别的页面--> </div> <a href="#tt">第二章</a> <div style="background-color: red;height: 2000px;">第一章</div> <div id="tt" style="background-color: yellow;height: 2000px;">第二章</div> <!--锚跳转，应用场景：书的目录，点击目录后，跳转到对应章节--> </body> </html> ``` # 02. h和img标签使用详解： ```html CTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>h1标签</h1> <h2>h2标签</h2> <h3>h3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6> <!--h1-h6是标题标签，大小从大到小依次递减--> <!--id、style是所有标签都可以定义的属性--> <!--a标签特有的属性:href target--> <div> <img title="图片tips" src="test_img.png"/> <!--图片的原始大小--> <!--这里的title指的图片的tips，src值图片的名字（同一级目录就直接写名字，不是同一级目录，就带上路径）--> </div> <div> <img title="图片tips" src="test_img.png" style="height: 30px;width: 30px;"/> <!--图片按照指定大小增大或者缩小--> </div> <!--DIV和span的区别--> <!--2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;--> <!--span是内联元素~可以与其他元素位于同一行~--> </body> </html> ``` # 03. select标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--下拉菜单-普通版 默认选中第一项--> <select> <option>北京</option> <option>上海</option> <option selected="selected">广州</option> <option>深圳</option> </select> <!--下拉菜单- 修改默认 默认选中第三项--> <select size="2"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--下拉菜单 可以一次显示2个城市--> <select size="12" multiple="multiple"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--下拉菜单 下拉菜单长度是12 允许ctrl多选--> <select> <optgroup label="一线城市"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </optgroup> <optgroup label="二线城市"> <option>武汉</option> <option>成都</option> <option>苏州</option> <option>哈尔滨</option> </optgroup> </select> <!--下拉菜单，有分组--> </body> </html> ``` # 04. input标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>复选框</h3> <div> 篮球：<input type="checkbox" checked="checked"/> <!--checked这个属性是默认选中的意思--> </div> <div> 足球：<input type="checkbox"/> </div> <div> 排球：<input type="checkbox"/> </div> <!--复选框--> <h3>单选框</h3> 男：<input name="gender" type="radio" checked="checked"/> <!--checked这个属性是默认选中的意思--> 女：<input name="gender" type="radio"/> <!--单选框 这里name必须一样，否则就没有单选效果--> <h3>普通输入框</h3> <input type="text"/> <h3>普通输入框，默认值</h3> <input type="text" value="普通输入框"/> <h3>密码输入框</h3> <input type="password"/> <input type="button" value="确定"/> <input type="submit" value="提交"/> <!--value是指按钮上的字，在form中，只有submit类型可以提交数据，button类型无法提交数据--> <!--input是行内标签，可以在外围加上div变成块标签--> <hr/> <!--分割线--> <input type="file"/> </body> </html> ``` # 05. form标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>form</h2> <form action="http://127.0.0.1:8000/django_form/" enctype='multipart/form-data' method='POST'> <!--这里action指的是后台接受数据的地址，这里指本机8000端口的django框架--> <div> 主机名:<input name="host" type="text"/> </div> <div> 端口:<input name="port" type="text"/> </div> <div> 类型:<input name="type" type="text"/> </div> <div> 用户名:<input name="user" type="text"/> </div> <div> 用户名:<input name="file_name" type="file"/> </div> <!--enctype='multipart/form-data' method='POST'--> <!--提交文件，必须加上上述的一段代码到form的属性中 9行，否则上传不了文件--> <input value="提交" type="submit"/> <input value="取消" type="submit"/> </form> <!--form中必须用submit类型的按钮才行，button类型的按钮无法提交数据--> <!--form中text类型的普通输入框，必须加上name属性才行，前台传到后台收到数据是{name:输入值}键值对的形式--> </body> </html> ``` # 06. textare标签、label标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <textarea> 默认大文本框，可以多行输入 </textarea> <textarea style="width:500px;height: 200px;">支持多行输入</textarea> <h3>普通输入框，默认值</h3> <input type="text" value="普通输入框"/> <h3>label</h3> <div> 姓名：<input type="text"/> <!--鼠标必须点击到输入框才行，点击到姓名汉字，鼠标光标是不会定位到输入框--> 婚否:<input type="checkbox"/> <!--鼠标必须点击到复选框才行，点击到婚否汉字，鼠标光标是不会勾选复选框--> </div> <div> <label for="cb2">姓名:</label> <input id="cb2"type="text"/> <!--鼠标点击到姓名汉字处，鼠标默认到输入框，这里label后面的for需要和input后面的id相等才行--> <label for="cb1">婚否</label> <input id="cb1"type="checkbox"/> <!--鼠标点击到婚否汉字处，鼠标就会自动勾选复选框，这里label后面的for需要和input后面的id相等才行--> </div> </body> </html> ``` # 07. ul ol dl编号标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <!--编号都是默认的黑色正方块--> <ol> <li>11</li> <li>22</li> <li>33</li> </ol> <!--编号都是数字1,2,3.。。--> <dl> <dt>标题</dt> <dd>内容</dd> <dt>一线城市</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dd>深圳</dd> </dl> </body> </html> ``` # 08. table fieldset标签使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <!--这里的p段落有默认的行间距--> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <!--第一组tr是 表头的字段th--> <!--第一组之外的tr是 表的值td--> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> <tr> <td>h11</td> <td>h22</td> <td>h33</td> </tr> <tr> <td>h111</td> <td>h222</td> <td>h333</td> </tr> </table> </p> <p> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <!--第一组tr是 表头的字段th--> <!--第一组之外的tr是 表的值td--> <tr> <td rowspan="2">h1,h11</td> <!--合并单元格 2行成1行--> <td>h2</td> <td>h3</td> </tr> <tr> <td>h22</td> <td>h33</td> </tr> <tr> <td>h111</td> <td>h222</td> <td>h333</td> </tr> </table> </p> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <!--第一组tr是 表头的字段th--> <!--第一组之外的tr是 表的值td--> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> <tr> <td>h11</td> <td>h22</td> <td>h33</td> </tr> <tr> <td>h111</td> <td colspan="2">h222,h333</td> </tr> </table> <fieldset> <legend>登录</legend> <p>用户名：</p> <p>密码：</p> </fieldset> </body> </html> ``` # html综合使用详解： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网站的编码--> <title>jack网站</title> <!--网站的标题--> <link rel="shortcut icon" href="test.ico"> <!--网站标题前面的图标--> </head> <body> <div style="height: 48px;background-color: pink;">头部</div> <!--设置顶部 背景色：粉色 高度：48像素--> <div style="background-color: #ddd;"> <!--<div>--> <!--14和15行的设置，提交取消的按钮位置不同--> <div style="width: 20%;height:500px;float: left;background-color: aquamarine;">左边内容</div> <!--左下设置20% float: left设置左漂才行 也可以根据情况设置右漂--> <div style="width: 80%;height:500px;float: left;">右边内容 <!--右下设置80% 不设置背景色就默认白色--> <h1>Form表单提交</h1> <!--标题说明--> <form action="http://10.0.4.42:8000/django_form/" enctype="multipart/form-data" method="post"> <p> <label for="tt">主机名:</label> <!--for后面不需要#--> <input id="tt" type="text" name="host" /> <!--提交给后台的key对应的值value就是输入的内容--> <!--name的值是提交给后台的key--> <label for="tt2">密码：</label> <input id="tt2" type="password" name="pwd" /> </p> <div style="background-color: rosybrown;color: white;"> <!--设置背景色和字体颜色--> <h6>爱好</h6> <label for="tt3">篮球:</label> <!--设置label for需要和下面的id一致--> <input name="favor" type="checkbox" value="1" checked="checked" id="tt3" /> <!--设置默认勾选--> <label for="tt4">足球:</label> <input name="favor" type="checkbox" value="2" id="tt4" /> <!--value的值是提交给后台的key对应的值value--> <!--name的值是提交给后台的key--> <label for="tt5">排球:</label> <input name="favor" type="checkbox" value="3" id="tt5" /> </div> <div> <h6>性别</h6> <label for="tt6">男:</label> <input name="gender" type="radio" value="1" checked="checked" id="tt6"/> <!--这里的单选，需要设置name属性一致，否则就不是互斥的--> <label for="tt7">女:</label> <input name="gender" type="radio" value="0" id="tt7"/> </div> <div> <h6>城市</h6> <select name="city"> <option value="888">上海</option> <option value="sb99" selected="selected">北京</option> <!--value的值是提交给后台的key对应的值value--> <!--name的值是提交给后台的key--> </select> </div> <div> <textarea name="mono">默认输入</textarea> <!--提交给后台的key对应的值value就是输入的内容--> <!--name的值是提交给后台的key--> </div> <div> <h4>文件</h4> <input type="file" name="file_name"> <!-- enctype="multipart/form-data" method="post"--> <!--文件上传提交必须加上上传代码到action后，否则无法提交--> </div> <input type="submit" value="提交" /> <!--内容只有包在form中，才能提交，提交2个字是按钮上的字--> <input type="submit" value="取消" /> </form> </div> </div> </body> </html> ```
Pre:
04--制作自己的签名key，以及不同keytype的签名方法
Next: No Post
0
likes
38
Weibo
Wechat
Tencent Weibo
QQ Zone
RenRen
Submit
我的网站不支持评论，拒绝网络暴力，不造谣、不信谣、不传谣，传递正能量。
0
comments
More...
Table of content
haiyang
