博弈之蕊--HTML基础
- 前端概念
- Web标准的构成
- HTML
- HTML概念
- 注释
- HTML标签的结构
- 文本格式化标签
- 标题标签
- 段落标签
- 图片标签
- 音频标签
- 视频标签
- 链接标签
前端概念
现代互联网应用大都由运行在服务器的后端程序和运行在各种终端设备的前端程序共同构成。
后端的代码、资源和数据是预先就部署或存储在后端并且运行在后端服务器上。而前端运行所需的代码、资源和数据都是来自后端的。前端从后端服务器安装或加载程序并运行在终端设备中，并且前端和后端通过网络进相互协作，最终向用户展示和实现 WEB 应用的全部内容和功能。
Web标准的构成
构成 | 语言 | 说明 |
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式（如颜色，大小等） |
行为 | JavaScript | 网页模型的定义与页面交互 |
HTML
HTML概念
HTML(Hyper Text Markup Langauge): 超文本标记语言，专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。
网页类似于一篇文章：
- 每一页文章内容是有固定的结构的：如：开头，正文，落款等…
- 网页中也是存在固定的结构的，如：整体，头部，标题，主体
网页中的固定结构是要通过特点的HTML标签进行描述的
<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>注释
注释的作用：
- 为代码添加具体的解释性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
HTML标签的结构
例如：
由开始标签(strong) 包裹的内容(文字变粗) 结束标签(/strong) 构成
<strong>文字要变粗</strong>结构说明：
- 标签由<、>、/、英文单词或者字母组成。并且把标签<>包括起来的英文单词或者字母称为标签名。
- 常见的标签由两部分组成，我们称之为双标签，前部分叫开始标签，后部分叫结束标签，两部分之间为包裹的内容。
- 少数标签由一部分组成，我们称之为单标签。自成一体，无法包裹内容。
HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）:
<head>
<title></title>
</head>兄弟关系（并列关系）：
<head></head>
<body></body>文本格式化标签
- 用途：需要让文字加粗，下划线，倾斜，
删除线 - 代码：
标签 | 标签 | 说明 |
strong | b | 加粗 |
ins | u | 下划线 |
em | i | 倾斜 |
del | s | 删除线 |
- 语义：突出重要的强调语境
标题标签
- 代码：h系列标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>- 语义：1~6级标题，重要程度依次递减。
- 特点：
文字都要加粗；
文字都有变大，并且从h1~h6文字逐渐减小；
独占一行
段落标签
- 代码：
<p>我是一段文字</p> - 语义：段落
- 特点：
段落之间存在间隙
独占一行
图片标签
- 代码：
<img src = " " alt = " " >
<!-- 标签属性 (src = " ")
属性名(src)
属性值(" ")-->注意
关于图片的路径"./"是在同一级 " . ./"是返回上一级
音频标签
- 代码：
<!-- controls 播放音频的控制按键
loop 循环播放
src 音频的路径
autoplay 自动播放(部分浏览器不支持,有局限性)
音频目前支持三种格式 MP3 Wav Ogg -->
<audio src="音频路径 " controls autoplay loop></audio>视频标签
<!-- 谷歌可以让视频自动播放 但前提是必须是静音播放 -->
<video src=" 视频路径" controls ></video>链接标签
<!-- href 跳转地址 -->
<!-- _self 默认值 在当前窗口跳转 -->
<!-- —_blank 在新窗口中跳转(保留原网页) -->
<a href="#">空链接，不知道跳转到那里去</a>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
