HTML总结

最新推荐文章于 2022-06-26 16:26:24 发布

weixin_52308511

最新推荐文章于 2022-06-26 16:26:24 发布

阅读量66

点赞数

本文链接：https://blog.csdn.net/weixin_52308511/article/details/114601325

版权

一、HTML是什么？

HTML是超文本标记语言的缩写
HTML不是一门编程语言，而是一种定义内容结构的标记语言

二、HTML的文档结构

<pre>  
<table><tr><td bgcolor=PowderBlue>
1.<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。  
2.<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。
3.<head></head>: <head>元素。 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4.<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
5.<tlink rel="shortcut icon" href="favicon.ico" type="image/x-icon">: 指定页面的图标，出现在浏览器标签上。(试一试：你可随意下载一个.ico图标文件到工作目录中)
6.<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
7.<body></body>: <body>元素。 包含你能在页面看到的所有内容，包括文本，图片，音频，游戏等等。
</pre>

在这里插入图片描述

三、HTML中的一些元素

1.HTML标记包含一些规定的元素<head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img>，<aside>，<audio>，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video>  
2.还有一些元素被称为空元素，如<br>, <hr>,<input>, <img>,<a>等等

四、标题

1.HTML提供了从大到小6级标题分别是<h1>~<h6>,如下

在这里插入图片描述

五、超链接 a


1.超链接语法<a href="https://www.baidu.com/" target="_blank">百度一下&lt/a>

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

六、插入图片

图片

在页面插入一张图片如下：  
<img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" alt="MDB Logo" width="200" height="200">

说明：

1.src属性为要显示图片文件的位置URL，及图片文件的路径  
2.alt属性当获取图片出问题时显示的文字

在这里插入图片描述
文件路径
文件路径有相对路径和绝对路径两种
上面图片的例子即为绝对路径。下面是相对路径的例子：

例子	解释
<img src="picture.jpg">	该图片文件与当前文档在同一目录中
<img src="./images/picture.jpg">	该图片在当前目录下的images文件中
`<img src="../picture.jpg">`	该图片在上一届目录中

七、表格

使用表格要使用<table>标签
在这里插入图片描述
代码中<tr>表示行，<td>表示行中的单元，<th>是表头的单元(将会加粗显示)

八、列表

列表分为有序列表和无序列表
有序列表

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

在这里插入图片描述

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

在这里插入图片描述

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

无序列表

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

在这里插入图片描述

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

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

在这里插入图片描述

九、其他

想在页面显示源代码使用<pre>标签，在html中小于号（<）和大于号（>）是不能使用的。要想使用大于号和小于号得在标签<pre>转换的到。
在这里插入图片描述

在这里插入图片描述

weixin_52308511

关注

0
点赞
踩
0

收藏

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

一、HTML是什么？HTML是超文本标记语言的缩写HTML不是一门编程语言，而是一种定义内容结构的标记语言二、HTML的文档结构1.<!DOCTYPE html>: 声明文档类型。出于历史原因需要，现在可有可无。 2.<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素，其它元素都嵌套到其中。3.<head></head>: <head>元素。这个元素是一个容器，它包含了
复制链接

扫一扫