网页结构
1.测试编辑器-----VSCode
2.网页结构
<!-- 文档声明 告诉浏览器，我是按照html的规范编写 防止出现怪异模式，从而出现乱码-->
<!DOCTYPE html>
<!-- 注释 ctrl+/
注释不能嵌套
-->
<!-- html 重点关注的是语义，而不是样式 -->
<!-- html 根标签/根元素 一个页面只有一个html 所有的内容必须写在html -->
<html>
<!-- head 保存一些元信息 里面内容不会页面中展示 只是辅助浏览器编译页面 -->
<head>
<!-- 属性 属性值 放在标签内部 -->
<!-- meta 自结束标签 设置一些元信息 辅助浏览器编译代码
charset 字符集
utf-8 万国码
GB2312 中国
GBK 中国扩展版
编码 将字符转成二进制
解码 将二进制转成字符
乱码 编码和解码参考的标准不一样
-->
<meta charset="utf-8" />
<!-- title 默认情况显示在浏览器的标题栏中
它最重要的作用帮助推广部门做SEO/SEM优化-->
<title>标题</title>
</head>
<!-- body标签 书写网页的主体内容， -->
<body>
内容
</body>
<!-- 浏览器有自动纠错功能-->
</html>
3.实体
| 什么是实体 | |
| 浏览器在编译代码的时候，有一些特殊的字符没有办法识别，例如空格，大于号，小于号 | |
| 用一些额外的字符来表示，这些额外的字符，就叫实体 | |
| 实体语法 | |
| &实体的名字; | |
| 常用的实体： | |
| 空格 | |
| > 大于号 | |
| < 小于号 | |
| © 版权符号 |
常用标签
1.常用标签
<!-- 1、标题标签 六个标题标签 常用h1-h3
从样式看，h1->h6,逐步变小，语义也是逐渐变小的，标题标签也是辅助推广部门做推广的
重要性仅次于title标签
h1语义最重，一个页面一般只出现一次
标题标签是块元素，会独占一行
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 二、段落标签 p 也是块元素，会独占一行
从样式上看，段落和段落之间有间距
一般用来包裹文字和图片
-->
<p>段1</p>
<p>段2</p>
<!-- 三、hgroup 标题分组-->
<hgroup>
<h1>组1</h1>
<h2>组2</h2>
</hgroup>
<!-- 四、em，strong都是强调标签
em strong 不会独占一行 是行内元素
em 有斜体 strong 加粗
面试题：em，strong都是强调标签 有什么区别
em 强调的语音语调
strong 强调的是内容
-->
<em>强调1</em>
<strong>强调2</strong>
<p>这 <strong>里</strong></p>
<hr />
<!-- 五、换行标签 br 自结束标签 -->
1<br />
2<br />
3<br />
<!-- 六、分割线 hr 自结束标签 -->
<hr />
<!-- 七、center标签 居中效果 -->
<center>
<h1>登高</h1>
<h2>杜甫</h2>
<p>至娇文，否藏。</p>
<p>至娇文，否藏。</p>
</center>
<p>至娇文，否藏。</p>
<!-- 八、div 没有任何语义 只表示一个块元素 -->
<div>这里1</div>
<div>这里2</div>
<!--九、span 没有任何语义 只表示一个行内元素，一般用来包裹文字 -->
<span>11</span>
<span>10 </span><br />
<!-- 10:del 删除线标签 -->
原价：<del>999</del>
现价:9.9
</body>
</html>
2.块元素和行内元素块元素
<!-- 元素分为 块元素 行内元素 行内块元素
块元素
一般是用来布局
1、会独占一行 *****
2、块元素的宽度默认是父元素的百分百
3、块元素的高度默认是被内容撑开
行内元素
一般用来包裹文字
1、不会独占一行 *****
2、行内元素宽高都是被内容撑开的，不可以自定义宽度
行内块元素
兼具块元素，行内元素的特点
布局的注意点
1、块元素里面什么都能放，能放块元素，能放行内，能放行内块
2、行内元素里面不能放块元素
3、p标签是一个特殊的块元素，里面不能放块元素
-->3.结构布局标签
<body>
<!--
header 表示头部
main 表示主体
footer 表示底部
nav 表示导航
aside 一般表示跟主体相关的内容
article 文章相关的内容
-->
<header></header>
<main>
<nav></nav>
<aside></aside>
<article></article>
</main>
<footer></footer>
<!-- 头部 -->
<div></div>
<!-- 主体 -->
<div></div>
<!-- 底部 -->
<div></div>
</body>
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
