HTML基础知识归纳

最新推荐文章于 2024-07-03 09:38:36 发布

S_yeol

最新推荐文章于 2024-07-03 09:38:36 发布

阅读量102

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/qq_45228525/article/details/109223467

版权

本文介绍了HTML的基本概念、特点和结构，并详细讲解了文字段落（如标题、段落、对齐方式）、图像标签（包括src、alt属性和尺寸设置）以及超链接的使用（包括href、target属性和定义锚点）。通过实例展示了无序列表、有序列表和定义列表的使用，以及如何插入和调整图像以及创建内外部链接。

摘要由CSDN通过智能技术生成

一、HTML的文字段落标签

1. 什么是HTML

—HTML（Hypertext Markup Language）超文本标记语言。

2. HTML的特点

—HTML不需要编译，直接由浏览器执行。/HTML文件是一个文本文件。/HTML文件必须使用html/htm为文件的后缀名/HTML大小写不敏感。

3.HTML的基本结构

—HTML分为头部信息、网页信息、HTML文件

HELLO WORLD

hello world

//下划线 ## 4.DOCTYPE文档类声明 —声明必须放在HTML文档的第一行，声明不是HTML的标签。 ## 5.网页编码设置 —当网页出现乱码时，可以在标签之间加： content=“text/html; 表示文档类型，charset=utf-8 表示编码格式。

二、HTML的文字段落标签

1.标签标签：<h1>-<h6>

2.段落标签:

3.align对其属性:left左对齐/right右对齐/center居中对其/justify对行进行伸展，这样每行都有相等的长度。

4.换行标签：

5.空格标签：&nbsp ;

6.文字斜体：,

7.加粗：,

8.下标：

9.上标：

10.特殊符号：<–小于号或显示标记 &lt；>–大于号或显示标记>©版权 ©®已注册 &reg；™商标 ™ Space不断行的空白 &nbsp

三、HTML列表标签

1.无序列表<ul><li>

type属性值：
disc圆点
square正方形
circle空心圆

<!DOCTYPE html>

<head>
    <mata http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title></title>
</head>

<body>
    <h1>什么是HTML？</h1>
    <p>HTML是用来描述网页的一种语言</p>
    <ul type="disc">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
    </ul>
    <ul type="square">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
    </ul>
    <ul type="circle">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
    </ul>
    <hr />
</body>

</html>

2.有序列表

type属性值：
1，数字1,2 默认
a，小写字母a,b
A，大写字母A,B
i,小写罗马数字I
I，大写罗马数字I

<!--续-->
 <ol type="1">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
 </ol>
 <ol type="a">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
 </ol>
 <ol type="A">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
 </ol>
 <ol type="Ⅰ">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
 </ol>
  <ol type="ⅰ">
        <li>HTML指的是超文本标记语言</li>
        <li>HTML不是一种编程语言，而是一种标记语言</li>
        <li>标记语言是一套标记标签</li>
        <li>HTML使用标记标签来描述网页</li>
 </ol>
 <hr />

3.定义列表 <dl><dt><dd>,可以有多个<dt>和<dd>

<!--续-->
<dl>
    <dt>HTML指的是超文本标记语言</dt>
      <dd>HTML不是一种编程语言，而是一种标记语言</dd>
      <dd>标记语言是一套标记标签</dd>
    <dt>HTML使用标记标签来描述网页</dt>
      <dd>HTML不是一种编程语言，而是一种标记语言</dd>
      <dd>标记语言是一套标记标签</dd>
</dl>
<hr />

四、HTML图像标签

语法：<img src=“” alt=“” …/>
img属性

属性	值	描述
src	URL	显示图像的URL
alt	文字	图像替代文本
height	数值的百分比	图像的高
width	数值的百分比	图像的宽

相对路径和绝对路径
绝对路径要从盘中拿取图片,相对路径引入同个文件下的图片
在相对路径中，如果是放在文件的上一级目录中要用在这里插入图片描述

在相对路径中，如果是放在文件夹的子文件夹下的图片要用在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--绝对路径-->
  <img src="E:/axure/素材/成果图标/性格.png"/>
  <!--相对路径-->
  <img src="./唱歌.png" alt="html基础" width="50px" height="50px"/>
  <h2>html基础课程</h2>
  <img src="../img/粉丝.png" alt="入门" width="20%" heigh="20%"/>
  <h2>html入门</h2>
</body>
</html>

五、HTML超链接标签

1.语法

<a href=“” >内容</a>
href：链接地址，可以是内部链接或外部链接。
属性：
self当前窗口下的链接
blank创建一个新的链接

属性	描述
href	链接地址
target	链接的目标窗口 _self、 _blank、 _top、 _parent
title	链接提示文字
name	链接命名

2.定义锚

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--绝对路径-->
    <a href="#素材1">素材1</a>
    <a href="#素材2">素材2</a>
    <a href="#素材2">素材3</a>
    <br>
  
  <a href="demo1.html" target="_self" name="素材1"><img src="E:/axure/素材/成果图标/性格.png" width="50px" height="50px"/></a>
  <br>
  <h2>素材1</h2>
  <h3>性格图标</h3>
  <h2>素材1</h2>
  <h3>性格图标</h3>
  <h2>素材1</h2>
  <h3>性格图标</h3>
  <!--相对路径-->
  
  <a href="demo1.html" target="_blank" name="素材2"><img src="./唱歌.png" alt="html基础" width="50px" height="50px"/></a>
  <br>
  <h2>素材2</h2>
  <h3>唱歌图标</h3>
  <h2>素材2</h2>
  <h3>唱歌图标</h3>
  <h2>素材2</h2>
  <h3>唱歌图标</h3>
  <a href="https://www.baidu.com/?tn=78000241_12_hao_pg" ><h2>html基础课程</h2></a>
  <h1>素材图片3</h1>
  <a name="素材3"><img src="../img/粉丝.png" alt="入门" width="50px" heigh="50px"/></a>
  <br>
  <h2>素材3</h2>
  <h3>粉丝图标</h3>
  <h2>素材3</h2>
  <h3>粉丝图标</h3>
  <h2>素材3</h2>
  <h3>粉丝图标</h3>
  <a href="demo1.html#素材2" title="提升技术"><h2>html入门</h2></a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--绝对路径-->
  <img src="E:/axure/素材/成果图标/性格.png"/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>

  <br/>
  <br/>
  <a name="素材2"><img src="唱歌.png"/></a>
</body>
</html>

在这里插入图片描述

S_yeol

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识归纳

一、HTML的文字段落标签1. 什么是HTML—HTML（Hypertext Markup Language）超文本标记语言。2. HTML的特点—HTML不需要编译，直接由浏览器执行。/HTML文件是一个文本文件。/HTML文件必须使用html/htm为文件的后缀名/HTML大小写不敏感。3.HTML的基本结构—HTML分为头部信息、网页信息、HTML文件 HELLO WORLD hello world //下划线 ## 4.DOCTYPE文
复制链接

扫一扫