静态网页的基本结构及标签
最新推荐文章于 2024-06-17 16:16:53 发布
夕阳下的小王子
最新推荐文章于 2024-06-17 16:16:53 发布
阅读量4.3k
收藏
26
点赞数
3
静态网页的基本结构及标签
HTML概念
- 超文本标记语言HTML是生成WWW网页文件的语言，用以生成超文本文档。在文档中，可以加入任何元素(文本、图像、动画、声音等)的链接
- 使用浏览器浏览的网页就是HTML文档
- 通常是使用记事本作为HTML文档的编辑器，利用浏览器浏览文档内容
HTML发展史
网页三兄弟
- HTML 负责整体框架以及内容
- JavaScript 负责数据验证数据交互
- CSS 负责网页的美化 特效 数据验证
静态网页
-
静态网页称为普通网页 所谓的静态网页文件里面没有程序代码，只有HTML html htm shtml xml
-
静态网页 就是内容制作完成无法修改
-
静态网页的优点: 容易被搜索引擎检测到 、访问速度快 节省服务器资源 、页面浏览速度快 不需要编译
-
静态网页的缺点: 内容固定不变 交互性差
-
静态网页的工作原理
动态网页
-
页面中包括了程序代码
-
动态网页的工作原理
静态网页的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>文档标题</title>
</head>
<body>
文档的正文内容
</body>
</html>
-
DOCTYPE 文档声明 告知浏览器HTML版本 必须放在最顶部 否则导致浏览器的怪异模式
-
怪异模式：浏览器使用自己的怪异模式解析渲染页面
-
标准模式：浏览器使用W3C的标准解析渲染页面
-
html 表示的是html文档 可以把它理解为一张纸 或者一种文件的格式
-
head 文档头，加入：网页标题、作者信息、版本信息、JavaScript、CSS 文档头不会出现在浏览器内容区 理解为一本书开头的信息 不会出现在正文中
-
title就是当前网页的题目
-
body 正文区 放置网页中所显示信息的标志和属性
HTML标签和格式
-
开始标签和结束标签为HTML的一个元素
-
空元素 并不是每一个元素都拥有开始标签、内容、结束标签。一些元素只有一个标签 br/ 标签
-
文件编译为二进制 进入计算机执行 二进制也是通过解析显示数据 当解析和编译的字符集编码不同的时候 就会出现乱码
HTML常用标签
-
元数据标签 meta
-
布局标签 div
<!DOCTYPE html> <html> <head> <!-- charset标签是设置网页文件字符集编码 --> <meta charset="utf-8"> <!-- 告诉搜索引擎，你的网页的关键字 可以增加页面的权重 --> <meta name="keywords" content="HTML入门" /> <!-- 告诉搜索引擎，网页的主要内容 --> <meta name="description" content="章鱼教育-Java全栈工程师" /> <!-- 用于移动端自适应 --> <meta name="viewport" content="width=device-width,initial-scale=1" /> <!-- 定义搜索引擎爬虫的索引方式 none/noindex 告诉搜索引擎不索引这个网页 all是索引 --> <meta name="robots" content="all" /> <!-- 指定双核浏览器渲染方式 这里指定webkit内核渲染 --> <meta name="renderer" content="webkit" /> <!-- http-equiv 相当于HTTP文件头 请求文件头--> <meta http-equiv="refresh" content="20000;URL=http://www.baidu.com"/> <!-- 缓存控制 --> <meta http-equiv="Cache-Control"content="no-cache" /> <title>我的第一个页面</title> </head> <body> <div style="background-color: blue"> <p> 区域A</p> </div> <div style="background-color: yellow"> <p>区域B</p> </div> <div style="background-color: red"> <p> 区域C</p> </div> </body> </html>-
文本标签 p 、h1 - h6 、b、strong、em 、i、u、del、s、br、hr、span、cite
标签 效果 p 段落 结束后换行以及空一行 h1-h6 标题h1到h6字体加粗大小逐渐减小 b 加粗文本 实体标签 strong 加粗文本 强调语气更加语义化 逻辑标签 i 斜体文本 em 斜体文本 强调语气更加语义化 逻辑标签 mark 文本显示高亮 默认为黄色 br 换行标签 是一个空标签 s 删除线 del 删除线 强调语气 更加语义化 逻辑标签 u 文本的下划线 hr 分割线 空标签 span 让span内的文字变为单独的个体 加以修饰 cite 引用标签 引用文献等 显示为斜体 blockquote 长文本引用，引用后效果文字自动的缩进 cite属性是引用链接 对引用链接的网页权重增加 code code标签显示的是单行代码 pre pre标签显示的是多行代码 保留空格和tap键
<div> <!-- 标题h1到h6 字体大小不断缩小 独占一行 --> <h1>主题1</h1> <h2>主题2</h2> <h3>主题3</h3> <h4>主题4</h4> <h5>主题5</h5> <h6>主题6</h6> </div> <div> <!-- <p></p>是一个段落标签 --> <p>第一段</p> <p>第二段</p> <!-- <br /> 换行标签 --> </div> <div> <!-- b 加粗文本 实体标签 strong 加粗文本 强调语气 更加的语义化 逻辑标签 语义化的作用就是使读者或者机器人(搜索引擎 终端的设备等等)更好的理解文章的意思 --> <b>加粗文本</b> <br /> <strong>加粗文本</strong> </div> <div> <!-- em和i都会有斜体显示 i 斜体文本 em 强调文本 更加的语义化 一般是使用em标签来强调文本 strong标签用来表示重要文本 mark标签用来高亮显示 b i标签作为最后选项加粗文本和斜体文本 --> <em>斜体</em> <br /> <i>斜体</i> <br /> <mark>高亮显示</mark> <!-- u标签 下划线 --> <u>下划线</u> </div> <div> <!-- del 语义化标签 s 就代表删除 hr 就是水平线 --> <s>删除线</s> <hr /> <del>删除线</del> </div>- 超链接 a
a 用于定义超链接,从一个页面链接到另一个页面 锚点跳转 href href属性就是点击超链接跳转的地址 没有定义就默认跳转当前网址 相当于刷新 target target 属性规定在何处打开链接文档 _blank 在新窗口中打开被链接文档 _self 默认 在相同框架下打开被链接的文档 _parent 在父框架集中打开被链接的文档 _top 在整个窗口中打开被链接的文档 framename 在指定的框架中打开被链接文档 <body> <div> <!-- href属性就是点击超链接跳转的网址 没有定义就默认跳转当前网址 相当于刷新 target 属性规定在何处打开链接文档 _blank 在新窗口中打开被链接的文档 _self 默认 在相同框架中打开被链接的文本 _parent 在父框架集中打开被链接的文本 _top 在整个窗口中打开被链接的文本 framename 在指定框架中打开被链接的文本 --> <span>_blank</span> <a href="http://www.baidu.com" target="_blank">baidu</a> <br /> <span>_parent</span> <a href="http://www.baidu.com" target= -
最低0.47元/天 解锁文章
5651
暂无认证
到【灌水乐园】发言
WhiteShirtI: 太6了呀，宝贝儿子，不愧是你
独善其身否: 太6了呀，宝贝儿子，不愧是你