HTML(二)
定义列表
标签 描述 定义有序列表 定义无序列表 定义列表项 定义列表 自定义列表项目 定义自定列表项的描述
<ol> <li>有序列表1li> <li>有序列表2li> <li>有序列表3li> ol> <ul> <li>无序列表1li> <li>无序列表2li> <li>无序列表3li> ul> <dl> <dt>pythondt> <dd>面向对象dd> <dt>cdt> <dd>数据结构dd>
HTML区块
HTML
元素是块级元素，它可用于组合其他 HTML 元素的容器。
元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用元素进行文档布局不是表格的正确用法。元素的作用是显示表格化的数据。
HTML元素
HTML元素是内联元素，可用作文本的容器
元素也没有特定的含义。
当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。
表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域(比如：注册)，首先应该用标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下伪代码：form定义用户输入的表单lable定义input元素的标签,一般用于输入标题,for规定 label 与哪个表单元素绑定。input输入定义域select下拉选项选项option定义了下拉列表中的选项
label<form action="demo_form.php"><label for="male">Malelabel><input type="radio" name="sex" id="male" value="male"><br><label for="female">Femalelabel><input type="radio" name="sex" id="female" value="female"><br><br><input type="submit" value="提交">form><html lang="en"><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="#"> <div id="box"> <label>姓名label> <input type="text" name="username"> div> <div id="box2"> <label>密码label> <input type="password" name="passwd"> div> <div id="box3"> <input type="button" name="submit" value="submit"> div> <div id="box4"> <label>性别label> <input type="radio" name="gender" value="0">男 <input type="radio" name="gender" value="1">女 div> <div id="box5"> <label>爱好label> <input type="checkbox" name="like" value="sing">唱歌 <input type="checkbox" name="like" value="run">跑步 <input type="checkbox" name="like" value="swiming">游泳 div> <div id="box6"> <label>照片label> <input type="file" name="photo"> div> <div id="box7"> <label>个人描述label> <textarea name="" id="" cols="30" rows="10">textarea> div> <div id="box8"> <label>籍贯label> <select name="site" id="site"> <option value="0">北京option> <option value="1">上海option> <option value="2">广州option> select> div> <div id="box9"> <input type="submit" name="submit1" value="submit"> div> <div id="box10"> <input type="reset" name="" value="重置"> div> form>body>html>
内嵌
>:子元素符号,表示嵌套的元素
+:同级标签符号
^:使标签提升一行
分割线/美化分割线
一、普通
1、2、align 线条位置(可选left、right、center)；width 线条长度；color 颜色；size 厚度
二、特效(效果并不是孤立的，可相互组合)
1、两头渐变透明：
2、纺锤形：
3、右边渐变透明：
4、左边渐变透明：
5、虚线：6、双线：
7、立体效果：
8、钢针效果：
９．垂直分割线
emmet快捷键
html:xt生成 HTML4 过渡型Document
html:4s生成 HTML4 严格型Document
任意一个 html 标签输入都会生成完整的闭合标签。例如输入p按tab则 生成：
生成带有 id 、class 的 HTML 标签:#为 id，.为 class。例如输入div#header.section则生成
生成后代：>例如输入p>span则生成
生成兄弟标签：+例如输入p+div则生成
生成上级标签：^例如输入ul>li>a^div则生成
也可以使用多个^,例如输入ul>li>a^^div则生成
重复生成多个标签*例如输入ul>li*5则生成
生成分组的标签:()例如输入ul>(li>a)*5则生成
注意和ul>li>a*5生成是不一样的
生成自定义属性：[]例如输入img[https://octodex.github.com/images/codercat.jpg][alt=octcat]则生成
生成递增的属性标签等:$例如输入ul>li.item$*5则生成
生成多位递增的呢：$$$例如输入ul>li.item$$$*5则生成
想生成几位输入几个$
要生成递减的呢：@-例如输入ul>li.item$@-*5则生成
想要从某个特定的顺序开始呢：@N例如输入ul>li.item$@10*5则生成
逆序生成到某个数：@-例如输入ul>li.item$@-10*5则生成
生成文本内容：{}例如输入p{我是paddingme}则生成
我是paddingme
缺省元素:
下面是所有的隐式标签名称：
li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中
option：用于 select 和 optgroup 中
Emmet 还会根据父标签进行判定例如输入ul>.item*3则生成：
声明一个带class的div 可以不用输入div；.header+.footer则生成:
input框加背景<html><head> <title>input中加入图片的做法title> <style> .username { width: 130px; background: #FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAYAAAA7bUf6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAANfSURBVDhPRZRNaFxlFIa7dSuICzcuXERRKkh37uxGUGNB3KSCUqUIkaItVtDQpqUMlSYWUxo1qaYGbTRg1VItjS6sNGjF1CZVM5m/O/fOvfN77/xl/jPz+H63URcfd7jzneec85733B12pYdd6WCV2uQ2IZarkql2sfwmjt4ni5vE8zWSpQZufYt0uUu80MDTXac6IB0MCCGOgtJ+B682wC63cWs9Kn3wFKR71CEEGFCxA5laX6BWCMpUuQMJK1HmfwHXV2O8dWKCN45EGN77MhMffUpJweZ/U4Xfg5TfDStxKtsQU7ZX6ep0iNp5JqdnmZo5x9iJCC+8sp8HHt7J+zNz+C3YyFZwq32soKfWTHtb/0OygTTx61z9YYmRvc9zbuY9Dh7Yx57hJxgaup+hhx7k99W/yOquLf1M+5mKIEHLQPohxC012ZIOiY01Rp7bzcjwLg68tJtDrz7NY4/cyz1338VP15fJVnthK56EMtUY3f6DOBItXygReFHcP5fI/nGB4to8zsp5jh58lkd33kfctYipJ6sB6750kR5Ouc8O05MdiBx0qNVbFJ11Ujcv00kvEf35DCtLpzk/fYiFL6bJ1sskNMkNTeVvA9FkksE2xPSXE8hxipRyLpcW57i1/C3rK5f55dqXnJka5+J3X1Fod1gvNFWF/NGEeM2ABAlVFiSZq4Xq/3Y7yuznC4ydjDDx4TRjp06y//BhjkxOcSPmEC22SFYGOkouXRIVCWsqSZY7xOsdVssNJr++ym35YP5WmncWf+TYxWvMLUc5+sk3jH+wQGHLeKQpJ9flqS6poHEHkpJHYuUmlqYzevpjTn1/g0vugM9iLWZvlnj3yiqPv/gmb5+9gCNRjTGz0iajpJYvSDidcg9Xfs6VYXktw/jZRfa8dpynRo/zzOsRnhw9RmT+Cr9aNby2xJR9XcWYcduyRggxL9xci3ypR0li5ZXN0QQS+h03fUurlIS09UwqUVz3XE3GK8v20jOEGNeapTLaWHJgWr06mxJOz4TeJZQkITE3tDTGG7bglt8nVVScv202o4lVU1BjgFXXqqtPs7Hmk2CsbT4TZoopk1mVmWOropwq1rC2faJvREK7Y46BesqkPVOWAZniQHsFvtrzFJgsaCLSL4TK/omgzT+uj/fDrpBPrwAAAABJRU5ErkJggg==") 2px 2px no-repeat; padding-left: 18px; BORDER: #E7AD01 1px solid; FONT-SIZE: 13px; COLOR: #000000; HEIGHT: 20px } .password { width: 130px; background: #FFFFFF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALiSURBVDhPNVNLaxNRGO2fceNKf4AUxIWCuFIKoiAIiig+QN2UVhcGRKsUrNgWpS0+aG1tUWq11lrUim+tpC/TzGQmM5nJcyZJk0wnk8nx3Fu7uDDJd+8533fO+Vp0pwkt34DhhjCLDZjOBoyCx+MjVwG0XAg1EyCe8ZFab/I0kHQ3YJWbSKR9tGiFEIlcgFQJSDp1fnuyKADFY5sgRhHIeqwXA6j5KjI18H4IIx9uAqTKvFRqwiyHUHI1xHlbJ2As08Cq3cBalmAE0csNqK6HNAHUvCdJN0cQXRTqfNSExWKSrMl1XuIj2wcUF1hiwaiSqMJxS3VJZJFYAgj2FIvL6QpUdvF+JYVI/zN09oxiZG4FCi+aHEGlRopT4yj/9RAASaIni+zApYBkXyPY2chd7Nh3FPtPXMGeI5fRO/4JJjuJUwO9EsCusmvHl51LAM0JNgE2gOdfltF6+DQezi0iTtZL3aNobTsHVbTP37FCBUbZh04npAaC3eLMMQqXDoCe8Vls230Qk4s53JuK4vrjj2i7cANxtrua87HmVGF5TdmFQmslgJr3YRIkSn8GZr7iD5HHftnoHHiHmZiP2yPzuPnoNVIkUIoedajKDkyKLAGMEsNBhs9KFg/efIMGIDI8j13HrmLog4G+V1FEBl/CDkUXZdodyCPy06JzdjVbA8EwH0tjcPY3ljhr++Asth84j74ZFR33p9HZOwGNIgsRhY0GnbBptQQQEU6uh1igGLeevsXYQhqnuiews60d14Z/4NDFO+if/C4BhI0CQMTZoAESQMRSdX0YdWBqycbJric43jWGQx1D2HumG+3900iIQJHRrIZYtVxY3InsVgdiB7RSgL/8VmjlMplGf6bxIlqmiB60BlgTFjIHjLMQUHf4P5dQJlGCCDeYh7hDTeiCLiJNLXS6E+diiRSKrIiF2jrinQzSFoBIl1iSRIHz0Rkxq0amRKEmj6jrLneGRybRCfAPXa6W+aBnyAcAAAAASUVORK5CYII=") 2px 2px no-repeat; padding-left: 18px; BORDER: #E7AD01 1px solid; FONT-SIZE: 13px; COLOR: #000000; HEIGHT: 20px } style>head><body> <input class="username" onMouseOver="this.style.borderColor='#99E300'" onMouseOut="this.style.borderColor='#A1BCA3'" maxLength="12" name="UserName"> <input class="password" onMouseOver="this.style.borderColor='#99E300'" onMouseOut="this.style.borderColor='#A1BCA3'" maxLength="12" name="password">body>html>
2124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
