前端(1)HTML
查看页面中指定元素的源码:
浏览器中按F12打开“检查元素”,标签页选择“元素”或“Element”,点击左上角的“选择元素”按钮,按钮变蓝色之后,可以用鼠标在页面中选择指定的元素,点击后在源码栏会自动跳转到该元素对应的源码。
每个标签都有默认的样式,可以自定义标签,也可以更改标签的默认样式。
H1~H6:
六个标准的标题标签
建议一个页面只有一个H1标签,有利于搜索引擎搜索。
P:
段落标签,结尾自动换行(display:block)
B:
粗体标签,不换行(display:inline)
STRONG:
强调粗体标签,不换行(display:inline),有利于搜索引擎搜索
I:
斜体标签,不换行(display:inline)
EM:
强调斜体标签,不换行(display:inline),有利于搜索引擎搜索
HR:
水平线标签
BR:
换行符标签
特殊符号
小于号:——<
大于号:——>
空格符号:——12 34
空白位:——12 34
&字符:——&
版权符号:——©
A:
超链接标签
<a href="http://www.baidu.com" target="_blank">去百度</a><!--链接 跳转到百度--> <a href="#">#</a><!--刷新当前页面--> <a href="javascript:void(0);">死链接</a><!--死链接,不会跳--> <a href="#box">锚点</a>
<!--
只有拥有name属性的a标签才有锚点
其他标签可以通过id属性实现锚点,a标签也可以用id属性做锚点
target属性
_self 当前页面打开 默认
_blank 在新窗口打开
_parent 父框架中打开
_top 顶级框架中打开
id命名
id只能有一个名字,而且在页面中相同的名字只能出现一次,相当于身份证号码一样
class命名
class可以出现多次,而且相同的名字可以有多个,相当于人名一样
-->
IMG:
图像标签
<img src="http://mat1.gtimg.com/ipad/qq_time/imgs/slider_20180216_chunjie.jpg"> <img src="img/0.jpg" alt="可爱的" width="150" height="150">
<!--
src 定义图片路径
alt 图片描述,用于seo搜索
width 定义图片宽度
height 定义图片高度
当width/height只给一个值的时候,另一个值等比例缩放,如果不配置就是默认图片大小
-->
UL > LI:
无序列表
快捷操作:输入ul>li*4,按tab,自动出现UL标签下出现4个LI标签
<ul type="square"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
type属性,取值为
disc 默认 小黑圆点
circle 空心圆
square 小方框
OL > LI:
有序列表
<ol type="1" reversed start="2"> <li>10</li> <li>20</li> <li>30</li> <li>40</li> </ol>
type属性,取值为
1 1 2 3 4 默认
a a b c d
A A B C D
I
i
reversed属性 降序排序
start属性 有序列表起始值
DL > DT > DD:
定义列表
<dl> <dt>标题</dt> <dd>项目1</dd> <dd>项目2</dd> <dd>项目3</dd> </dl>
DIV和SPAN:
<div>标签把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
<span> 标签被用来组合文档中的行内元素。
DIV,独自占一行(display:block)
SPAN,不独占一行(display:inline),不支持设置宽高,由行内元素支撑宽高。
将DIV的display设置为inline,则DIV也不支持设置宽高,也不独自占一行,变成和SPAN标签一样,反之给SPAN标签设置display:block,SPAN也就变成了DIV
行内块元素:display:inline-block 块级元素可以横排展示,行内元素可以设置宽高
隐藏元素:display:none 包括他的子标签,在页面中不占位置,等同于消失了
样式设置:
在<head>标签中插入<style>标签,
<style> div{ width: 100px; height: 100px; background: blueviolet; display: inline-block; vertical-align: top; } span{ background: blue; } .box{ display: none; } </style>
<style>标签中,对标签进行配置,则直接用标签名借花括号,配置样式;对一个类进行配置,则在类名前加一个‘.’;对一个id进行配置,则在id名前加一个‘#’。