HTML学习总结

最新推荐文章于 2024-07-12 20:49:16 发布

伊始不觉

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量112

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/junseven164/article/details/114595704

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML介绍

HTML(Hypertext Markup Language） 全称是“超文本标记语言”，通过使用标记来描述文档结构和表现形式的一种语言，由浏览器阅读网页后对网页后台代码也称源码进行逐行解析，然后把解析结果在网页上进行显示组合。

一、HTML的文档结构

HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。
标记< html>：说明该文件是用超文本标记语言来描述的，它是文件的开头，而则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
头部：表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。
主体：网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。如下：

<!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>welcome to HTML</p>
</body>
</html>

二、HTML组成

HTML使用标记来注明文本图片等内容，如head、body、p等（每个标记都应该有双尖括号，但这里使用将看不见标记）。
而HTML是由一个个HTML元素组成的，一个元素一般由一对标签构成。
for example：

<h1>第一个Web页面</h1>
 <p>welcome to HTML</p>

HTML元素组成成分：

HTML元素指的时从开始标签到结束标签的所有代码。
1.开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起作用。
2.结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾。

HTML元素

HTML元素有以下分类：
1.块级元素
特点：
占据其父元素（容器）的整个空间；会新起一行；
可以包含行内元素和其他块级元素。
常用：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

2.内联元素
特点：
1）和其他元素都在一行上
2）元素的高度、宽度以及顶部和底部边距不可设置
3）元素的宽度就是它包含的文字或图片的宽度，不可改变
常用：<a>、、 、、、、<label>、<q>、<var>、<cite>、<code>
3.空元素
特点：只有一个标签，通常用来在此元素位置插入或嵌入一些东西，如 , <hr>, <input>, <img>, <a>等
示例如下：

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

元素属性：

元素是可以有相关属性的。属性包括元素的额外信息，信息不会在浏览器中显示。
示例如下：

<p title="这是个title属性">鼠标移上来试试！</p>

标签以及作用汇总（转载他人）：
HTML基础标签总结
注释：
1.在HTML中，注释需要用将其包裹
2.HTML标签不分大小写，但建议全部使用小写

三、重要标签

超链接

在href标签处写上要跳转去的地址，示例如下

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

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

描点

锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，我们可以轻易的在长页面内实现跳转。（原理也是超链接）

先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点即可。
示例：

<!-- 文档其余部分 -->
<h2 id="C4">第四章 论零号病人的重要性</h2>
<!-- 文档其余部分 -->
<a href="#C4">跳到第四章</a>
<!-- 文档其余部分 -->

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

图片及文件设置

图片

插入图片示例：

<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"	该图片文件在上一级目录中

四、其他

预设格式

若想在网页中展示一些特殊格式的文本，需要使用pre标签
例如：

<pre>
        我    喜
          欢 你  
</pre>

特殊字符

在一些情况下需要显示""等类似符号时，需要使用特殊字符来代替相应字符，
特殊字符参考：ISO-8859-1 字符实体手册

伊始不觉

关注

0
点赞
踩
1

收藏

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

HTML介绍*HTML（Hypertext Markup Language）*全称是“超文本标记语言”，通过使用标记来描述文档结构和表现形式的一种语言，由浏览器阅读网页后对网页后台代码也称源码进行逐行解析，然后把解析结果在网页上进行显示组合。...
复制链接

扫一扫