开发工具,CSS浮动实战"/>
web前端开发工具,CSS浮动实战
- div标签
- p标签
- span标签
- a标签
- img标签
html:超级文本标记语言
###1,div标签:
是在html中布局使用最多的标签,
本身没有什么特别之处,只是 标签替代了以前标签布局。div标签作用:起分割作用,是分割内容常使用的标签
例:
<!DOCTYPE html>
<html>
<head>
</head>
<body><div>第一个div</div><div>第二个div</div><div>第三个div</div>
</body>
</html>
div常用属性:
- color:颜色
- font-size: 文字大小
- text-align:对其方式
right 右对齐
left 左对齐
center 居中对齐 - font-family : 文字字型
- letter-spacing: 1pt 文字间距
- line-height: 设定行高
- font-weight:文字粗体
2,p标签:
标签它是一个段落标签,会自行起一行段落,并且可以作为一个盒子来使用。可以单独定义它。
例:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
< p>我是段落标签< /p>
</body>
</html>
3,span标签:
span标签是超文本标记语言(HTML)的行内标签,被用来组合文档中的行内元素。span没有固定的格式表现。
span标签属性:
-
标准属性
id, class, title, style, dir, lang, xml:lang -
事件属性
onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
例:
<p class="tip"><span>内容</span>... ... ...</p>
###4,a标签(超链接标签):
超链接标签,用于在效果中定义一个可以点击跳转的链接
常用属性:
(1)href: 超链接跳转的路径 (必有属性);
- 内网本机路径:相对路径和绝对路径
- 互联网路径:http://地址
示例:
<a herf="/">百度</a><a herf="demo html">demo</a>
(2) target:
该属性指定在何处显示链接的资源。 取值为标签(tab),窗口(window),或框架(iframe)等浏览上下文的名称或其他关键词;
target可能的值:
- blank
- top
- parent
- self
(3) download:
此属性指示浏览器下载 URL 而不是导航到它,因此将提示用户将其保存为本地文件;
(4) rel:该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值;
5,img标签:
用于在页面效果中展示一张图片。
img标签常用属性:
- src:指明图片的路径。(必有属性)
- width:图片宽度
- height:图片的高度
- alt 属性
图片路径:
1)内网路径:
…/表示上一层目录
./表示当前目录
2)互联网路径:
必须前面加上http://
最后分享一些简单的前端初阶的面试题:
结语:想转行或者学习web前端的朋友,可以点击这里一起学习交流,文章里的前端学习路线图,还有前端学习资料,前端面试题PDF文档,都能在群里领取,免费分享哦!
mg-lkiJ41dI-1627012076202)]
结语:想转行或者学习web前端的朋友,可以点击这里一起学习交流,文章里的前端学习路线图,还有前端学习资料,前端面试题PDF文档,都能在群里领取,免费分享哦!
更多推荐
web前端开发工具,CSS浮动实战
发布评论