web前端基础-01-html
17 / 0 / 创建于 2年前 /
zhaocrazy 的个人博客
web前端
由三大语言组成 HTML CSS Javascript
HTML
1.模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>彼特城博客</title>
</head>
<body>
<h1>peter zhao</h1>
<p>stay fool stay study </p>
</body>
</html>2.所有的css js都会去影响html标签 以之形成各式网页. html 标签不用去记忆的，但是要知道标签是行内元素还是块状元素、行内块状元素。
行内元素
- 特点：设置宽高无效，多个标签会同行；margin 左右有效，上下无效；padding设上下左右都有效。
- 常见标签：a、span、em、strong、b、i、u、label、br；
块状元素
- 特点：设置宽高有效，会自动换行，多个默认上到下展示；magrgin padding 上下左右设置皆有效
- 常见标签：p、nav、aside、header、footer、section、article、ul-li、address；
行内块状元素
- 特点：综合行内与块状两者特性，不会自动换行，默认排列方式 从左到右；magrgin padding 上下左右设置皆有效
- 常见标签：无(需要css设置)
demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>彼特城博客</title>
</head>
<body>
<span style="margin:1000px 300px; padding:10px 30px;background:red;">行内元素</span>
<div style="margin:100px 300px; padding:100px 300px;background:green;">块状元素</div>
<div style="display:inline-block;margin:100px 300px;padding:100px 300px; background:black;">行内块状元素</div>
</body>
</html>3.三种元素之间可以相互转换 具体如下
- display:inline;转换为行内元素
- display:block;转换为块状元素
- display:inline-block;转换为行内块状元素
4.遇到不明白的标签 直接copy到搜素引擎即可，对了HTML5 是不可以忽视的力量，他更加的语义化和易用！
》个人博客停止维护，部分博客，转载到这
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号