【HTML学习笔记】

最新推荐文章于 2024-10-17 00:04:56 发布

小严小盐

最新推荐文章于 2024-10-17 00:04:56 发布

阅读量76

点赞数

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/m0_63393227/article/details/131255923

版权

什么是HTML

HTML是超文本标记语言的缩写。我们用 HTML 来构建 Web 页面。HTML 它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。

标题（heading）

HTML 提供了从大到小6级标题，分别是：<h1> ~ <h6>，如下所示

<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

一级标题<h1>最醒目，常用于页面的主标题，其次为二级标题，以此类推

超链接 a

超链接能让我们从一个界面跳转到另一个界面
超链接语法

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

说明：
href表示要跳转去的地址 URL
target属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）
超链接标签包含的内容（当前为文字"百度一下"）即为显示在页面上供用户点击的文字内容

锚点

锚点用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在页面内实现跳转。
语法：先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。

<!-- 文档其余部分 -->
<h2 id="C4">第四章 HTML学习笔记</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->
...

注意：
1.元素的id值必须是唯一的，也即页面不能再有其它元素的id值与之相同
2.超链接中的地址需要有#符号

图片及文件路径 img

图片
在页面插入一张图片如下：

<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：
1.src属性为要显示图片文件的位置 URL，即图片文件的路径
2.alt属性当获取图片出现问题时显示的文字（占位符）
3.可为图片指定高宽度，但不建议（可能导致图片变形）

文件路径

为获取图片文件，我们需要指定该文件位于何处，这称为文件路径。文件路径有相对路径和绝对路径两种。
例子

<img src="picture.jpg">

该图片文件与当前文档在同一目录中

<img src="./images/picture.jpg">

该图片文件在当前目录下的images目录中

<img src="../picture.jpg">

该图片文件在上一级目录中

<img src="/picture.jpg">

该图片文件在网站根目录中

HTML 样式- CSS

如何使用CSS
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
以下实例显示出如何改变段落的颜色和左外边距

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

HTML样式实例 - 背景颜色
背景色属性（background-color）定义一个元素的背景颜色：

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

HTML 样式实例 - 字体, 字体颜色，字体大小
我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式:

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

HTML 样式实例 - 文本对齐方式
使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式：

<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部样式表
当样式需要被应用到很多页面的时候，使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 表格

**
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。

<h4>一列:</h4>
<table border="1">
  <tr>
    <td>100</td>
  </tr>
</table>
 
<h4>一行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
</table>
 
<h4>两行三列:</h4>
<table border="1">
  <tr>
    <td>100</td>
    <td>200</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

<table border="1">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

HTML 列表

**
HTML无序列表
无序列表是一个项目的列表，无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

HTML 有序列表
同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- hot drink</dd>
<dt>Milk</dt>
<dd>- cold drink</dd>
</dl>

HTML区块

**
HTML <div> 和<span>
HTML 可以通过 <div> 和 <span>将元素组合起来。

HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在显示时，通常会换新行来开始。
实例: <h1>, <p>, <ul>, <table>

HTML 内联元素
内联元素在显示时通常不会换新行开始。
实例: <b>, <td>, <a>, <img>

HTML <div> 元素
1.HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
2.<div> 元素没有特定的含义。除此之外它属于块级元素。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
3.<div> 元素的常见的用途是文档布局。
4.<table> 元素的作用是显示表格化的数据。

HTML 元素
HTML <span> 元素是内联元素，可用作文本的容器<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
**

HTML 表单和输入

**
以下实例创建了一个表单，包含两个输入框：

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

以下实例创建了一个表单，包含一个普通输入框和一个密码输入框：

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

HTML 表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。
我们可以使用 <form> 标签来创建表单:
实例

<form>
.
input 元素
.
</form>

HTML 表单 - 输入元素
表单标签是输入标签 <input>。输入类型是由 type 属性定义。
几种常用的输入类型。
文本域
文本域通过 <input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
比如：

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码字段
密码字段通过标签 <input type="password"> 来定义:
比如：

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮
<input type="radio"> 标签定义了表单的单选框选项:
比如：

<form action="">
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</form>

复选框
<input type="checkbox"> 定义了复选框。复选框可以选取一个或多个选项：
比如：

<form>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
</form>

提交按钮(Submit)
<input type="submit"> 定义提交按钮。当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:
比如：

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML5 (视频)- 如何工作

**
如需在 HTML5 中显示视频，您所有需要的是：
比如：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

1.<video> 元素提供了播放、暂停和音量控件来控制视频。
2.同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
3.<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
4.<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。