VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > css >
  • 前端学习记录

前端开发

HTML标签

HTML文档结构#

head#


Copy
<head> <!-- 汉字编码 --> <meta charset="UTF-8"> <!-- 设置一个网站的搜索关键字 --> <meta name="Keywords" content=""/> <!-- 网站描述内容 --> <meta name="Description" content=""/> <!-- 视口设定 --> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!-- 标题 --> <title>少年的博客</title> <!-- 加载页面图标 --> <link rel="shortcut icon" href="bitbug_favicon.ico" type="image/x-icon"> <!-- 加载外部css样式 --> <link rel="stylesheet" href="css/base.css"> </head>

body#


Copy
<!-- 主体内容 --> <body> <h3>Junior</h3> </body>

style#


Copy
<!-- css样式 --> <style></style>

script#


Copy
<!-- js --> <script type="text/javascript"> // 脚本代码块 </script>

格式#

标签 描述
acronym 定义只取首字母的缩写。
ababr 定义缩写。
address 定义文档作者或拥有者的联系信息。
b 定义粗体文本。
bdi 定义文本的文本方向,使其脱离其周围文本的方向设置。
bdo 定义文字方向。
big 定义大号文本。
blockquote 定义长的引用。
center 不赞成使用。定义居中文本。
cite 定义引用(citation)。
code 定义计算机代码文本。
del 定义被删除文本。
dfn 定义定义项目。
em 定义强调文本。
font 不赞成使用。定义文本的字体、尺寸和颜色
i 定义斜体文本。
ins 定义被插入文本。
kbd 定义键盘文本。
mark 定义有记号的文本。
meter 定义预定义范围内的度量。
pre 定义预格式文本。
progress 定义任何类型的任务的进度。
q 定义短的引用。
rp 定义若浏览器不支持 ruby 元素显示的内容。
rt 定义 ruby 注释的解释。
ruby 定义 ruby 注释。
s 不赞成使用。定义加删除线的文本。
samp 定义计算机代码样本。
small 定义小号文本。
strike 不赞成使用。定义加删除线文本。
strong 定义语气更为强烈的强调文本。
sup 定义上标文本。
sub 定义下标文本。
time 定义日期/时间。
tt 定义打字机文本。
u 不赞成使用。定义下划线文本。
var 定义文本的变量部分。
wbr 定义视频。

链接#

标签 描述
a 定义锚。
link 定义文档与外部资源的关系。
nav 定义导航链接。

音频/视频#

标签 描述
audio 定义声音内容。
source 定义媒介源。
track 定义用在媒体播放器中的文本轨道。
video 定义视频。

图像#

标签 描述
img 定义图像。
map 定义图像映射。
area 定义图像地图内部的区域。
canvas 定义图形。
figcaption 定义 figure 元素的标题。
figure 定义媒介内容的分组,以及它们的标题。

标签属性#

通用属性:#

id: 取唯一名称

class: 给标签取类名

style: 行内样式

title: 标题

转义符#

实体字符 编译后的字符
&lt; 小于号 <
&gt; 大于号 >
&amp; 于号 &
&nbsp; 空格
&copy; 版权
&times; 乘号
&divide; 除号

标签元素#

块级元素#

块级元素(相当执行了 display:block)

1.独占一行 宽度和高度是可控的,如没有设置宽度将默认铺满

2.其行内可以包含块级和行级元素

行级元素#

行级元素(相当执行了 display:inline)

1.不会独占一行,与相邻的行级元素占同一行

2.宽高是不可控的

3.其行内只有包含行级元素

Emmet语法#

2-1. 后代:>#


Copy
nav>ul>li

Copy
<nav> <ul> <li></li> </ul> </nav>

2-2. 兄弟:+#


Copy
div+p+bq

Copy
<div></div> <p></p> <blockquote></blockquote>

2-3. 上级:^#


Copy
div+div>p>span+em^bq

Copy
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>

Copy
div+div>p>span+em^^bq

Copy
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>

2-4. 分组:()#

(1)缩写↓


Copy
div>(header>ul>li*2>a)+footer>p

Copy
<div> <header> <ul> <li><a href=""></a><li> <li><a href=""></a><li> </ul> </header> </footer> <p></p> </footer> </div>

(2)缩写↓


Copy
(div>dl>(dt+dd)*3)+footer>p

Copy
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>

2-5. 乘法:*#

缩写↓


Copy
ul>li*5

Copy
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <ul>

2-6.自增符号:$#

1)缩写↓


Copy
ul>li.item$*5

Copy
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <ul>

(2)缩写↓


Copy
h$[title=item$]{Header $}*3

Copy
<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

(3)缩写↓


Copy
ul>li.item$$$*5

Copy
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>

(4)缩写↓


Copy
ul>li.item$@-*5

Copy
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>

(5)缩写↓


Copy
ul>li.item$@3