HTML标签

HTML标签分类:

1.单标签(只有结束)

2.双标签(开始+结束)

单标签:

<hr/>分割线

<br/>换行

HTML标签的关系:

1.父子(嵌套)

2.兄弟

标题标签:h1-h6(双标签)

特点:

1.1-6字体逐渐变小

2.加粗

3.独占一行

4.h4大小与默认大小一致

5.属性:left center right

段落标签:<p></p>

特点:

1.字体不加粗

2.p段落上下有一定的空白距离

3.不会首行缩进

4.独占一行(中文会自动换行)

5.属性:left center right

文本修饰标签:

1.加粗 <b></b> / <strong></strong>

2.倾斜 <i></i> / <em></em>

3.下划线 <u></u> / <ins></ins>

4.删除线 <s></s> / <del></del>

5.上标 

   下标 

6.字体颜色 <font color='red'></font>

7.可嵌套使用

字符实体:

1.空格: &nbsp

2.大于:&gt

3.小于:&lt

4.乘号:&times

列表标签:

无序标签

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

有序标签

<ol>
 <li></li> 
 <li></li>
 <li></li> 
</ol>

可嵌套使用

自定义列表:

<dl>111
 <dt>222 
  <dd>333</dd> 
  <dd>444</dd>
 </dt>
</dl>

图片标签:

img 单标签

属性:

1.src 图片路径(./images/...)

2.border设置图片边框(默认为0,0表示无边框)

3.width设置图片的宽度(默认不设置,属性取值可以写数值和百分比)

4.height设置图片的高度(默认不设置,属性取值可以写数值和百分比)

5.若只设置宽度或高度,高度或宽度会自动跟着变化

6.title设置鼠标悬停在图片上面显示的文本内容信息

7.alt设置图片无法正常显示时,显示在图片上的替换信息

8.align设置图片周围文字的对齐方式,取值left(图片在左,文字在右),center(只有一行文字在图片垂直方向居中),right(图片在右,文字在左)

1. 基准参考点base标签:

1.单标签

2.可以设置所有超链接的href属性以及target属性

   <base href="" target="_blank">

3.base只能出现一次

常用布局标签:

div和span都是双标签

div:

特点:

1.独占一行,默认只要有标签内容,不管内容多还是少,都会占满一行

2.不会改变标签内容的样式(不会加粗,倾斜等)

3.div上下无空白距离

4.div作为容器使用,方便设置样式

span:

特点:

1.不会独占一行,一行可存放多个,直到放不下才会换行

2.不会改变标签内容的样式(不会加粗,倾斜等)

3.span上下左右无空白距离

4.span宽度由内容决定

5.span也是作为容器使用,方便设置css样式

常用快捷键:

1.alt+↑上移代码

2.alt+↓下移代码

3.vscode中ctrl+"+"放大代码

4.vscode中ctrl+"-"缩小代码

5.标签名+tab :生成标签 div+tab

6.标签名*n+tab :生成多个相同标签 div*5+tab

<div></div> 
<div></div> 
<div></div> 
<div></div>
<div></div>

7.父子关系:父标签>子标签*n+tab ul>li*5

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

标签名+tab 标签名+tab 标签名+tab......

8.兄弟关系:兄弟+兄弟 div+p+tab

<div></div>
<p></p>

标签名+tab 标签名+tab ......

9.类名: .one+tab

<div class="one"></div>

id: #two+tab(两个默认div)

<div id="two"></div>

a标签:a.links+tab

<a href="" class="links"></a>

10.{ }里面可以放标签内容,{ }里面放$表示从1开始

div{$}*3+tab变成

<div>1</div> 
<div>2</div> 
<div>3</div>

11.[ ]设置标签属性

<a href="" target="_blank"></a>

12.注释:Ctrl+/ 1次注释,2次取消

13. alt+光标点n个地方:n个地方同时打代码

 

14.双击左键,选中之后Ctrl+d,修改相同的内容

15.浏览器放大/缩小:Ctrl+滚轮

16.文字内容个数和标签内容个数相同时,滚轮摁住往标签需要写内容的地方拖下去,剪切Ctrl+X需要的内容(无缩进),滚轮往需要的地方拖,Ctrl+V复制

17.跳一个单词:Ctrl+← / →