web前端从零开始系列-01-html

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 是不可以忽视的力量,他更加的语义化和易用!

彼特城博客
请先登录后发表评论
  • latest comments
  • 总共0条评论