课程笔记
1、定义
HTML (HyperText Markup Language) 是一种标记语言，用于告诉浏览器如何构造你访问的网页，使用标签来描述内容和结构。它可以像Web开发人员希望的那样复杂或简单。 HTML由一系列的元素组成, 你可以使用它来封装，包装或标记内容的不同部分，使其以某种方式显示，或以某种方式执行。
2、组成
一个基本的HTML元素如下：<p>Hello world</p>
- 开始标签（Opening tag）：包括元素的名称（<p>），包裹在开始和结束尖括号中。这表示元素开始或开始生效 - 在这种情况下，表示了一个段落的开头。
- 结束标签（Closing tag）：这与开始标记相同，除了它在元素名称之前包含正斜杠（</p>）。这表示元素结束的位置 - 在这种情况下，表示了一个段落的结尾. 没有包含结束标记是一个常见的初学者错误，并可能导致奇怪的结果。
- 内容（Content）：这是元素的内容，在这种情况下只是文本。
- 元素（Element）：开始标记，加结束标记，加内容，等于元素。
- 在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。
- 块级元素在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
- 内联元素通常出现在块级元素中并包裹文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。
3、HTML 属性
属性为 HTML 元素提供附加信息。
- HTML 标签可以拥有属性。
- 属性总是以名称/值对的形式出现，比如：name="value"。
- 属性总是在 HTML 元素的开始标签中规定。
4、文本内容
- P标签表示段落，在语义上通常表达完整的一段话，是块级元素。
- h1 ~ h6 是一级 到 六级标题，一级标题最大，六级标题最小，是块级元素。
- hr元素代表分割线，可以分隔段落和标题。
- 有序列表用ol标签包围，意为order list，其中的每一项用li标签表示。
- 无序列表用ul标签包围，意为unorder list，其中的每一项用li标签表示。
- 列表列表用dl标签包围，意为definition list，其中用dt（definition title）表示定义的标题，用dd（definition description）表示定义的标题所对应的具体内容。
- 引用一共有如下三种写法<blockquote>、<cite>、<q>，<blockquote>标签会有段落的缩进，<cite>标签引用的内容会是内容倾斜，<q>标签引用的内容会在内容外面加上双引号。
预格式化文本采用<pre>标签，可以保留在标签内部的文本样式。 - 更多标签及用法可参考网站http://www.w3school.com.cn/html/index.asp
5、多媒体
（1）图片
- img标签（内联标签）
<p>
我是一张图片
<br>
<img width="300" height="200"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png">
</p>
（2）视频
- video标签
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
-
video标签还有一些其他的属性，比如：
-
width和height，控制视频的尺寸，但当我们对视频的尺寸进行调整是，视频会一直保持固定的纵横
比，如果未被视频内容填充的部分，将会显示为默认的背景颜色。 - autoplay，这个属性会使视频内容自动播放，即使页面的其他部分还没有加载完全。
- muted，该属性设置该视频在播放时，默认是处于静音的状态。
- poster，同img标签类似，指向一个图像的URL，该图像作为该视频的海报，在视频播放前显示。
-
preload，该属性通常被用来缓存较大的视频文件，该属性有以下几个值：
none：不缓冲
auto：页面加载后缓存视频文件
metadata：仅缓冲视频的元数据
-
width和height，控制视频的尺寸，但当我们对视频的尺寸进行调整是，视频会一直保持固定的纵横
（3）音频
- audio标签
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
（4）iframe标签
- iframe标签的目的是为了我们能够将其他的Web文档嵌入到当前文档中。
<iframe src="https://baidu.com"
width="500" height="500" frameborder="0"
allowfullscreen sandbox>
<p><a href="https://baidu.com">
Fallback link for browsers that don't support iframes
</a></p>
</iframe>
- 常用属性有：
- allowfullscreen，若设置为true，iframe则可以使用全屏的接口在当前页面采用全屏页面显示。
- frameborder，边框，如果设置为1，则在当前页面和iframe嵌入的页面之间有1px的边框，若设置为0，代表删除边框。
- height和weight
- sandbox,体现了现代浏览器对安全性的设置。
6、表格
- table - 定义表格
- thead - 表格的页眉
- tbody - 表格的主体
- tr - 表格的一行
- th - 表格的表头
- td - 表格中的单元格
- border - 表格是否有边框，数值代表边框的宽度
- cellspacing - 设为2，则表格边框为实线
- 常用属性：rowspan 代表该列跨多少行，以此来合并行；colspan 来表示该行跨了多少列，以此来合并列
<table border="1" cellspacing="0">
<thead>
<tr>
<th>浏览器</th>
<th>渲染引擎</th>
<th>JavaScript 引擎</th>
</tr>
</thead>
<tbody>
<tr>
<th>Chrome</th>
<td rowspan="2">Blink</td>
<td rowspan="2">V8</td>
</tr>
<tr>
<th>Opera</th>
</tr>
</tbody>
</table>
7、表单
表单通常用于诸如银行卡申请、登录、注册等场景下，包含单行文本框、单选、多选等多种类型的输入方式，以使用户填写，从而为系统提供数据。是用户和web网站或应用程序之间交互的主要内容之一，允许用户将数据发送到web网站。
- 其中包含的小组件主要有以下几种：
- 单行文本框 - <input type='text'>
- 密码输入 - <input type='password'>
- 多行文本框 - <textarea>
- 单选按钮 - <radio>
- 多选按钮 - <checkbox>
- 下拉选择（单选） - <select>
- 下拉选择（多选） - <select multiple>
- 文件选择 - <input type='file'>
- 时间和日期 - <input type="date">/<input type="datetime-local">/<input type="month">/<input - type="week">/<input type="time">
<!-- 单选 -->
<p>gender</p>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br>
<!-- 多选 -->
<p>which one</p>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br>
<!-- 下拉单选 -->
<label>how much</label>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br>
<!-- 下拉多选 -->
<label>how many</label>
<select size="3" multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
- HTML 表单中常用的属性
- action - 向服务器发送的请求地址
- method - 要发送的HTTP请求类型
- name - 表单的名称
- target - 用于发送请求和接收响应的窗口名称
- value - 某一个具体的表单项所对应的值
- placeholder - 输入框的占位符，当输入框中为空时占位符会显示
- checked - 针对多选框/单选框，默认的状态时选中状态
- 表单设计的几个原则：
- 尽量帮助用户不出差错
- 尽早提示用户填写错误
- 尽可能的扩大选择/点击区域
- 当表单中控件较多是要分组
- 在设计表单时要分清主要动作和次要动作
心得体会
通过学习HTML基础的课程，我已经会写简单的网页啦~ 成就感满满~ 这周的学习任务不算太重，还能够平衡好毕设和培训，接下来培训的课程会越来越难，要抓紧时间呐，加油喽！
