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 一同使用时,
元素可用于为部分文本设置样式属性。
表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,实现一个特定功能的表单区域(比如:注册),首先应该用
标签来定义表单区域整体,在此标签中再使用不同的表单控件来实现不同类型的信息输入,具体实现及注释可参照以下伪代码:
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、钢针效果:
9.垂直分割线
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>