HTML基础

课程笔记

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：仅缓冲视频的元数据

（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基础的课程，我已经会写简单的网页啦~ 成就感满满~ 这周的学习任务不算太重，还能够平衡好毕设和培训，接下来培训的课程会越来越难，要抓紧时间呐，加油喽！