HTML学习笔记

最新推荐文章于 2024-09-09 22:16:15 发布

qq_64068027

最新推荐文章于 2024-09-09 22:16:15 发布

阅读量48

点赞数

文章标签： html 学习笔记前端 web

本文链接：https://blog.csdn.net/qq_64068027/article/details/130994032

版权

HTML基础

一、认识HTML
二、使用HTML

一、认识HTML

HTML是超文本标记语言（HyperText Markup Language）的缩写。我们用 HTML来构建 Web 页面即所谓的网页。其不是一门编程语言，而是一种用于定义内容结构的标记语言。

“超文本”（hypertext）是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网，并将其与他人创建的页面相链接，我们就成为了万维网的积极参与者。

二、使用HTML

1.配置HTML环境

安装开发软件VSCode及其相关下载的插件（code下载）后运行该软件，打开/新建一个文件夹，在该文件夹下新建一个后缀名为html的文件，如下图所示：

在这里插入图片描述
在该文件中输入如下内容：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>页面标题</title>
</head>
<body>
  <h1>我的第一个Web页</h1>
  <p>当前有点丑 :) </p>
</body>
</html>

运行得到以下结果：
在这里插入图片描述

2.HTML文档相关说明

（一）注释

注释作用是解释代码是如何工作与用意等等，是写代码人自己的标注。

可用特殊的记号 <！-- 和 -->包括起来，将一段HTML中的内容置变为注释，如下：

<p>我在注释外，可以显示！</p>
<!-- <p>我在注释内！浏览器将忽略我</p> -->

注意： HTML不区分标签的大小写，但是我自己更喜欢小写。

（二）空元素

空元素是：只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，如<br>, <hr>, <input>, <img>等内容，如下：

<!-- 换行 -->
<p>我可以<br>换行</p> 
<!-- 水平分割线 -->
<hr>
<!-- 输入框 -->
<input>

嵌套: 在上面代码中你看到<br>元素放到<p>元素之中。

（三）元素的属性

元素可以拥有相关属性。属性包含元素之外的额外信息，这些信息不会在浏览器中显示出来。
示例：

<!-- 带属性的段落输入框 -->
<p title="这是个title属性">鼠标移上来试试！</p>
<!-- 带属性的输入框 -->
<input type="text">
<input type="password">

运行代码结果如下：
在这里插入图片描述

一个属性必须包含如下内容：
1.一个空格。在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格).
2. 属性名称，后面跟着一个 = 号。
3. 一个属性值，由一对引号 " " 引起来。

HTML属性参考表

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id:
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

3.标题

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>最醒目，应该用于页面的主标题，其次为二级标题，以此类推，且不要因为醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用文本格式或 CSS 进行，需保持美观。

4.文本格式

所学的文本格式标签如下：

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

（一）文本的对齐方式

有四种对齐方式：居中、左对齐、右对齐、两端对齐。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

（二）文本的强调方式

除了一般的色彩字体强调外，还可上下中划线。

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

运行：
在这里插入图片描述

（三）文本的转换

是用来特定指定在文本中的大、小写字母，可所有字句变成大写或小写字母，或每个单词的首字母大写。

// An highlighted block
var foo = 'bar';

在这里插入图片描述

5.超链接

(一）简介

可用标签<a> （href属性）来设置HTML超文本链接。

超链接可是一个字，一个词，或者一组词，也可以是一幅图像，我们能点击超链接来跳转到新的文档或当前文档中的某个部分。（把鼠标指针移动到网页中的链接上时，箭头会转变为小手）

链接的默认形式（可因CSS设置的样式而变）：

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时，链接显示为红色并带有下划线。

(二）超链接语法

用href 属性描述链接目标

<a href="url">链接文本</a>

(三）HTML链接- target 属性

使用 target 属性来定义被链接的文档的显示。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML笔记</title> 
</head>
<body>
<a href="https://www.runoob.com/" target="_blank">访问菜鸟教程!</a>
<p>如果你将 target 属性设置为 &quot;_blank&quot;, 链接将在新窗口打开。</p>
</body>
</html>

运行结果如下：
在这里插入图片描述

(四）HTML链接- id 属性

用id 属性创建一个 HTML文档书签。

书签无特殊显示方式，（在 HTML页面中是不显示），对浏览者是隐藏的。

实例

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到"有用的提示部分(id=“tips”）"：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

注意：
1.元素的id值必须是唯一的
2.超链接中的地址需要有#符号

6.图片及文件路径 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 图像- 图像标签（）和源属性（Src）

HTML中，图像由<img> 标签定义。
<img> 是空标签，只包含属性，无闭合标签。
要在页面上显示图像，需要使用src源属性（ "source"，源属性的值是图像的 `URL 存储图像地址）。
定义图像的语法：

<img src="url" alt="some_text">

浏览器会将图像显示在文档中图像标签出现的地方。

(四）HTML图像- Alt属性

alt 属性是为图像定义一串预备的可替换的文本（属性的值是用户定义）。

<img src="boat.gif" alt="Big Boat">

为了更好显示信息，可在页面上的图像都加上替换文本属性，且有利于纯文本浏览器。

(五）HTML 图像- 设置图像的高度与宽度

用于设置图像的高度与宽度的属性：height（高度）与 width（宽度）属性（属性值默认单位为像素）。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

提示: 如果图像指定了高度宽度，页面会保留原有的尺寸。若没有指定图片的大小，加载时可能会破坏HTML页面的整体布局。

(六）HTML 图像标签

标签	描述
`<img>`	定义图像
`<map>`	定义图像地图
`<area>`	定义图像地图中的可点击区域

7.表格 Table

(一）HTML 表格

表格由 <table> 标签来定义。表格有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可包含文本、图片、列表、段落、表单、水平线、表格等。
我认为，在网页设计时，文字要尽可能转化为表格表示，展示的思路更清晰可见，更具逻辑性与对应关系。

HTML 表格实例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML笔记</title> 
</head>
<body>
<p>
每个表格从一个 table 标签开始。 
每个表格行从 tr 标签开始。
每个表格的数据从 td 标签开始。
</p>
<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>
</body>
</html>

实现：
在这里插入图片描述

(二）HTML 表格

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

(三）HTML 表格表头

表格表头使用 <th> 标签进行定义。

<table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <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 表格标签

标签	描述
`<table>`	定义表格
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<colgroup>`	定义表格列的组
`<col>`	定义用于表格列的属性
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚

8.列表 List

(一）无序列表

无序列表列项目使用粗体圆点（典型的小黑圆圈）进行标记。

List item
此为无序列表

我认为与有序列表不同的是无序开头标识不同。

无序列表使用 <ul> 标签

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

(二）HTML 有序列表

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

List item
此为有序列表

(三) HTML 自定义列表

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

(四) HTML 列表标签

标签	描述
`<ol>`	定义有序列表
`<ul>`	定义无序列表
`<li>`	定义列表项
`<dl>`	定义列表
`<dt>`	自定义列表项目
`<dd>`	定义自定列表项的描述

9.表单

(一) HTML表单

HTML 表单是一个包含表单元素的区域，可用于收集用户的输入信息等。表示文档中的一个区域（包含交互控件）将用户收集到的信息发送到 Web 服务器。
示例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表单本身是不可见的。并且注意一个文本字段的默认宽度是20个字符。</p>
</body>
</html>

运行：
在这里插入图片描述

用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。
我们可以使用 <form> 标签来创建表单:

<form>
input 元素
</form>

(二) HTML 输入

输入表单标签 <input>（输入类型是由 type 属性定义）
几种常用的输入类型：

文本域（Text Fields）
通过 <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>

运行：
在这里插入图片描述

注意：密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代。

单选按钮（Radio Buttons）
表单的单选框选项用<input type="radio"> 标签来定义:

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

运行：
在这里插入图片描述

复选框（Checkboxes）
复选框用<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 来定义服务端的文件名（接收到的用户输入数据进行相关的处理）
代码示例：

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

运行结果：
在这里插入图片描述

(三）HTML 表单标签

标签	描述
`<form>`	定义供用户输入的表单
`<input>`	定义输入域
`<textarea>`	定义文本域 (一个多行的输入控件)
`<textarea>`	定义文本域 (一个多行的输入控件)
`<label>`	定义了元素的标签，一般为输入标题
`<fieldset>`	定义了一组相关的表单元素，并使用外框包含起来
`<legend>`	定义了元素的标题
`<select>`	定义了下拉选项列表
`<optgroup>`	定义选项组
`<option>`	定义下拉列表中的选项
`<button>`	定义一个点击按钮
`<datalist>`	指定一个预先定义的输入控件选项列表
`<keygen>`	定义了表单的密钥对生成器字段
`<output>`	定义一个计算结果

qq_64068027

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记

可用标签<a>href属性）来设置HTML超文本链接。超链接可是一个字，一个词，或者一组词，也可以是一幅图像，我们能点击超链接来跳转到新的文档或当前文档中的某个部分。（把鼠标指针移动到网页中的链接上时，箭头会转变为小手）一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时，链接显示为红色并带有下划线。
复制链接

扫一扫