HTML学习总结

最新推荐文章于 2022-05-05 11:03:04 发布

钟离轩痕

最新推荐文章于 2022-05-05 11:03:04 发布

阅读量98

点赞数

文章标签： html 经验分享

本文链接：https://blog.csdn.net/f974453900/article/details/114895302

版权

一、什么是HTML

HTML是超文本标记语言（Hyper Text Mark Language）的缩写，是一种用来创建网页的语言。
注意：HTML不是编程语言

二、创建HTML文档

1. 新建HTML文件

新建文件夹，以 .html 或 .htm 为文件后缀

2. HTML文档格式

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML示例</title>
</head>
<body>
 
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>一个段落</p>
 
</body>
</html>

格式说明

<!DOCTYPE html> 为HTML文档声明，声明该文档为HTML文档 （现在可有可无）
<html> 是HTML文档的根元素，必须要有 </html> 结尾，整个页面的内容在两者之间
<head>与</head>之间包含了文档的元数据，比如如 <meta charset="utf-8"> 定义网页编码格式为 utf-8，或者在这里放入你的 css 样式表

<title></title>之间是你，浏览器标签页上网站的名称就是这个标题
<body></body>之间是网页的主要内容，要呈现给用户的网页内容都在这之间
注释用 包括起来
例：

三、HTML元素和标签

标签用于我们展示我们网页的内容，比如<p></p>用于展示我们的段落

开始标签和结束标签构成一个元素
开始标签和结束标签之间为一个元素的内容
开始标签和结束标签总是成对出现，结束标签比开始标签前面多一个/

开始标签常被称为起始标签（opening tag），结束标签常称为*闭合标签（closing tag）

1.元素语法

元素起始于开始标签，终止于结束标签
元素的内容为开始标签和结束标签之间的内容
大多数元素可以拥有属性
空元素的始终都是开始标签

2.元素嵌套

大多数元素之间的内容还可以添加其他元素，形成嵌套
比如：<p>点击打开<a href="https://www.csdn.net/">CSDN</a></p>
上例中在<p></P>元素中嵌套了链接<a></a>

3.空元素

有些没有内容的元素只有开始标签没有结束标签，因为空元素在开始标签就结束了。比如<br>、<hr>、<input>、<img>、<a>等

四、标题

<h1>到<h6>为一到六级标题，字体大小从小到大，如下例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

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

五、段落

用<p>和</p>的定义一个段落，该标签会在后会自动换行
注意：不要忘记结束标签 </p>，即使忘记添加结束标签，浏览器也能正确显示
ps：若要实现随意换行，可使用<br>标签，该标签同理C++的 /n和 endl 实现换行功能

六、超链接和图片

1.超链接

超链接语法
例：<a href="https://www.baidu.com/" target="_blank">百度一下</a>
说明：

<a></a>是超链接的标签，直接是显示给用户的内容，点击该内容就会跳转到目标网站
href即为要跳转去的地址 URL（Uniform Resorce Locator)
target属性为 _blank表示在新的页面打开超链接（默认是在当前页面打开即 _self）

锚点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。
在某标签的属性中用id属性生成锚点，然后用超链接指向该锚点，点击超链接时即可跳到锚点位置
元素的id必须唯一，并且超链接的地址必须在目标id名前加 #

例：

<h2 id="H2">二级标题</h2>
<!-- 文档其余部分 -->
<a href="#H2">跳到二级标题</a>

2.图片

在页面中插入图片用<img>标签
比如：<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">
说明

src为要显示图片文件的位置 URL，即图片文件的路径
alt属性当获取图片出现问题时显示的文字（占位符），若图片无法正常显示，就会显示alt里的内容
width和height为宽度和高度，用于指定图片大小 （不建议使用，因为容易导致图片变形）

文件路径

.表示当前目录，..表示上一级目录

例	说明
src=“picture.jpg”	文档同目录下的picture文件
src="./images/picture.jpg"	文档目录下images文件夹里的picture文件
src="…/picture.jpg"	该文档目录的上一级目录下的picture文件

如第一行例子，如果不添加任何路径，仅用文件名指明文件路径，文档会在跟文档同一个目录下寻找文件

七、文本格式化

当我们要为文本添加样式时，我们常用<b></b>、<i></i>等标签时文本加粗、斜体等

通常标签 <strong> 替换加粗标签 <b>来使用,<em> 替换 <i>标签使用。

常用的文本格式化标签

`<b>`	定义粗体文本
`<em>`	定义着重文字
`<i>`	定义斜体字
`<small>`	定义小号字体
`<strong>`	定义加重语气
`<sub>`	下标
`<sup>`	上标
`<ins>`	插入字
`<del>`	删除字

效果示意图： 在这里插入图片描述

八、表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

例：

<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>

效果如图：
在这里插入图片描述

<table>标签里如果不定义边框（border）属性，表格将不会显示边框，上例中定义边框border=“1”使表格呈现出如图的边框

表头

表格的表头使用 <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>
</table>

效果如下：

Header 1	Header 2
row 1, cell 1	row 1, cell 2

九、列表

1.无序列表

无序列表用<ul>标签，每个列表项始于 <li> 标签（有序列表同理）

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

上述代码显示如下：

Coffee
Milk

无序列表默认使用实心圆点作为每项的标志，其它的标志可以是空心圆circle，实心方块square以及不出现标志。
例如：

<ul type="circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

浏览器中将如下显示：
在这里插入图片描述

2.有序列表

有序列表用<ol>标签，默认使用数字作为每项的标志，其它的标志可以是大写字母A，小写字母a，罗马字母i等。

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

在这里插入图片描述

十、表单

HTML表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:

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

输入元素

多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

浏览器显示如下：
在这里插入图片描述
注意: 表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

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

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

效果如下：
在这里插入图片描述
注意: 密码字段字符不会明文显示，而是以星号或圆点替代。（如上图）

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

效果如下：
在这里插入图片描述

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

效果如下：
在这里插入图片描述

提交按钮(Submit Button)

<input type="submit"> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

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

效果如下：
在这里插入图片描述
假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

十一、其他

1.区块

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

HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
如: <h1>, <p>, <ul>, <table>

HTML 内联元素

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

HTML `<div>` 元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML `<span>` 元素

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

区块例子：

例1：

<h2>区块元素</h2>
<div>Hello</div>
<div>World</div>
<p>单独一行</p>

效果如下
在这里插入图片描述
例2：

<h3>下面的元素将在一行中显示</h3>
<span>姓名：</span>
<input name="username">
<span>哈哈哈</span>
<a href="https://google.com/">Google</a>
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg">

效果如下：
在这里插入图片描述

2.预设格式

<pre> 标签可定义预格式化的文本。
被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
鹅鹅鹅
曲项向天歌
白毛浮绿水
红掌拨清波
</pre>

效果如下：

鹅鹅鹅
曲项     向天歌
白毛     浮绿水
红掌     拨清波

<pre> 标签能保留你的换行和多数空格，在一般情况下，多个空格只会被保留一个，换行需使用<br>标签，而在<pre> 标签里，你的格式什么样，HTML文档在浏览器中就会怎样显示。

3.特殊字符

HTML and XHTML 预留了一些字符。比如，您不能使用包含这些字符的文本，因为浏览器可能会误以为是 HTML 标签。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）

如下例：

<p>有多&nbsp;&nbsp;&nbsp;远，滚&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;多远！</p>
<hr>
<h2>test.html</h2>
<pre>
  &lt;h1&gt;这是个一级标题&lt;/h1&gt;
  &lt;p&gt;这是一个段落&lt;p&gt;
  &lt;a href="https://twitter.com/"&gt;眼见何事，情系何处，身处何方，心思何人&lt;/a&gt;
<pre>

将在浏览器中如下显示：
在这里插入图片描述
其他特殊字符可参见https://www.runoob.com/tags/ref-entities.html

钟离轩痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML学习总结

HTML学习总结一、什么是HTML二、创建HTML文档1. 新建HTML文件2. HTML文档格式格式说明三、HTML元素和标签1.元素语法2.元素嵌套3.空元素四、标题一、什么是HTMLHTML是超文本标记语言（Hyper Text Mark Language）的缩写，是一种用来创建网页的语言。注意：HTML不是编程语言二、创建HTML文档1. 新建HTML文件新建文件夹，以 .html 或 .htm 为文件后缀2. HTML文档格式例：<!DOCTYPE html>&lt
复制链接

扫一扫