html文件结构
html基础标签
1.1文档结构
html的所有标签为树形结构，例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web应用课</title>
</head>
<body>
<h1>第一讲</h1>
</body>
</html>
<html>标签
HTML <html> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。
<head>标签
HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。
<body>标签
HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。
<title>标签
HTML <title> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。
<meta>
HTML <meta> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(<base>、<link>, <script>、<style> 或 <title>）之一表示的任何元数据信息。
常见属性：
charset：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。
name：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。
icon
<link rel="icon" href="images/icon.png">
资源地址：
acapp.png
<!-- 多行注释 -->
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
这里的内容均为注释
<h1>第一讲</h1>
<p>
段落。
</p>
-->
</body>
</html>
1.2 文本标签
文本标签虽然很多，但大部分可看成是预定好样式的<div>和<span>。
<div>标签
<div>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。
其他块级标签例如：<h1>, <p>, <pre>, <ul>, <ol>, <table>。
<span>标签
<span> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素
其他内联标签例如：<i>, <b>, <del>, <ins>, <td>, <a>。
<h1> - <h6>标签
HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
<p>标签
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。
<pre>标签
HTML <pre> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)
<br>标签
HTML <br> 元素在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
<hr>标签
HTML <hr> 元素表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。
在 HTML 的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。所以如果想画一条横线，请使用适当的 css 样式来修饰。
<i>标签
HTML 元素 <i> 用于表现因某些原因需要区分普通文本的一系列文本。例如技术术语、外文短语或是小说中人物的思想活动等，它的内容通常以斜体显示。
<b>标签
HTML 提醒注意（Bring Attention To）元素（<b>）用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。
<del>标签
HTML 的<del>标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反：表示文档中添加的内容。
<ins>标签
HTML <ins> 元素定义已经被插入文档中的文本。
1.3 图片
HTML <img> 元素将一份图像嵌入文档。
默认为行内元素，即display: inline。
src属性
该属性是必须的，它包含了你想嵌入的图片的文件路径。
alt属性
该属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它难以置信地有用——屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义。如果由于某种原因无法加载图像，普通浏览器也会在页面上显示alt 属性中的备用文本：例如，网络错误、内容被屏蔽或链接过期时。
height属性
图像的高度，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
width属性
图像的宽度，在 HTML5 中单位是 CSS 像素， 在 HTML 4 中可以是像素也可以是百分比。
1.4 音频与视频
<audio>标签
HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
使用src属性播放
示例：
<audio
controls
src="/audios/bgm.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
<audio> 与多个 <source> 元素
这个例子包含了多个 <source> 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。
<audio controls>
<source src="/audios/sound1" type="audio/mpeg"/>
<source src="/audios/sound2" type="audio/mpeg"/>
</audio>
资源
mp3
sound1
sound2
<video>标签
HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。
示例：
<video controls width="800">
<source src="/videos/video1.mp4"
type="video/mp4">
<source src="/videos/video2.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
1.5 超链接
HTML <a> 元素（或称锚元素）可以通过它的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。<a> 中的内容应该指明链接的意图。如果存在 href 属性，当 <a> 元素聚焦时按下回车键就会激活它。
常用选项
点击链接打开新标签页面时加入属性：target="_blank"
1.6 表单
<form>标签
HTML <form> 元素表示文档中的一个区域，此区域包含交互�
web网页，三次平时作业+大作业+Acwing笔记 （129个子文件） 
05-html的基本语法-hr的用法 1KB 3-css.css 12KB 页面布局.css 3KB 轮播图.css 3KB stycle.css 2KB 视频.css 595B 02-css.css 22B
大学生涯规划.html 12KB 2-山东聊城五大特色小吃.html 11KB 1-山东聊城的五大特产美食.html 9KB index.html 8KB 图书信息录入系统.html 6KB 时隔3年首发，这颗北斗导航卫星不一般！.html 5KB 10-表格.html 5KB 3-2视频列表.html 4KB 中国第56颗北斗导航卫星的影响.html 4KB 中国第56颗北斗导航卫星的发射视频.html 3KB 04.正式篇常用标签.html 3KB 3-美食视频.html 3KB 07-列表.html 3KB 4-调研.html 3KB 05-选择器.html 2KB 02-css外部样式表.html 2KB 11-表单标签.html 2KB 08-图片.html 2KB 01-css内部样式表.html 1KB 09-超链接标签.html 1KB 06-特殊符号.html 953B 演示样例.html 796B 03-css-行内样式表.html 638B 02输入！换行出现完整基础文件.html 509B 01-入门.html 291B 04-css样式表的优先级.html 49B
子页面1-特色小吃1-1.jpg 1.61MB 2.jpg 1.44MB 背景图.jpg 1.41MB 摄影-山水.jpg 1.41MB 发射照片2.jpg 1.05MB 发射照片.jpg 1.01MB 目标-一步一步上升.jpg 690KB 主页面-特产四-高唐驴肉3.jpg 527KB 摄影-山.jpg 479KB 主页面-特产三-武大郎烧饼2.jpg 476KB 子页面1-特色小吃1-4.jpg 435KB 主页面-特产二-酱香鸡2.jpg 400KB 北斗导航卫星图片1.jpg 317KB R成功3jpg.jpg 317KB 发射成功影响2.jpg 299KB 成功影响1.jpg 297KB 奋斗-红色元素.jpg 294KB 子页面1-特色小吃1-2.jpg 289KB 一起拼搏.jpg 274KB 主页面-特产四-高唐驴肉2.jpg 214KB 目标-射中靶心.jpg 212KB 01.发射成功.jpg 202KB 主页面-特产四-高唐驴肉1.jpg 185KB 目标大跨步.jpg 181KB 北斗导航卫星图片2.jpg 179KB 主页面-特产三-武大郎烧饼1.jpg 158KB 子页面1-特色小吃1-3.jpg 153KB 摄影-相机.jpg 153KB 1.jpg 136KB 努力奋斗简单版.jpg 126KB 介绍.jpg 114KB 计算机相关图片.jpg 109KB 发射成功影响1.jpg 107KB 北斗.jpg 106KB 主页面-特产二-酱香鸡1.jpg 101KB 主页面-特产三-武大郎烧饼3.jpg 99KB 子页面1-特色小吃1-5.jpg 88KB 主页面-特产一-魏氏熏鸡2.jpg 87KB 聊城-logo.jpg 84KB 主页面-特产五-图片2.jpg 81KB 子页面1-特色小吃5-4.jpg 79KB 计算机托起世界.jpg 71KB 北斗导航卫星3.jpg 60KB 子页面1-特色小吃5-5.jpg 43KB 主页面-特产一-魏氏熏鸡.jpg 41KB 发射图片.jpg 39KB 主页面-特产二-酱香鸡3.jpg 31KB 开始-特色美食-马蹄烧饼.jpg 27KB 子页面1-特色小吃2-1.jpg 25KB JavaScript.js 8KB 3-js.js 2KB 轮播图.js 2KB 视频.js 672B 三亩地 - 城南花已开.mp3 4.16MB
空心琉璃丸子.mp4 69.75MB 呱嗒视频.mp4 66.54MB 武大郎烧饼.mp4 35.36MB 崔增鸳鸯饼.mp4 33.91MB 吊炉烧饼.mp4 33.9MB 视频2.mp4 31.52MB 高唐驴肉.mp4 29.41MB 高唐老豆腐.mp4 27.93MB 发射视频1.mp4 27.16MB 满足味蕾.mp4 26.14MB 一口酥脆.mp4 25.37MB 酱香鸡.mp4 24.75MB 味道聊城-早餐聊城.mp4 19.21MB共 129 条
- 1
- 2
资源评论
