HTML基础知识：框架、文字和段落标签、列表标签、图像和超链接标签

最新推荐文章于 2024-04-02 21:15:51 发布
最新推荐文章于 2024-04-02 21:15:51 发布
阅读量552 收藏 4
点赞数 1
分类专栏： web前端开发 文章标签： html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42012782/article/details/115917991
版权

准备：我使用的是sublime编辑器

下载地址：http://www.sublimetext.com/3 

一、基本语法和框架

代码

<!DOCTYPE html><!--用于声明文档类型-->
<html>
<head>
	<title>hello</title>
</head>
<body bgcolor="pink"><!-- bgcolor是背景颜色标签-->
<p>hello html ！</p> <!-- p是段落标签-->
<hr/><!-- hr是水平线线-->
</body>
</html>

效果图：

二、文字和段落标签

注：当文字出现乱码时在头部文件<head></head>中添加<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<!DOCTYPE html><!--用于声明文档类型-->
<html>
<head><!-- 网页头部内容-->
	<title>文字和段落标签</title>
</head>
<body>
   <!--文档标签-->
   <!-- 标题标签：<h1></h1>~<h6></h6>-->
   <h1>什么是HTML</h1>
   <h2>什么是HTML</h2>
   <h3>什么是HTML</h3>
   <h4>什么是HTML</h4>
   <h5>什么是HTML</h5>
   <h6>什么是HTML</h6>
   <!--段落标签-->
   <p>HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</p>
   <!--align对齐属性：left左对齐内容，right右对齐内容。center居中对齐属性，justify对行进行伸展，这样每行都可以有相等的长度。-->
   <p align="left">HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</p>
   <p align="right">HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</p>
   <p align="center">HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</p>
   <p align="justify">HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</p>
   <!--br换行标签-->
   <p>HTML是指超文本标记语言，<br>HTML不是一种编辑语言，<br>而是一种标记语言，<br>标记语言是一套标记标签。</p>
   <!--空格标签：&nbsp; 或者使用预格式化标签<pre></pre>:也就是你输入时的格式和输出在网页上的格式一样-->
   <p>&nbsp;&nbsp;&nbsp;HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</p>
   <pre>     HTML是指超文本标记语言，HTML不是一种编辑语言，而是一种标记语言，标记语言是一套标记标签。</pre>
   <!--hr水平线标签-->
   <!--hr的属性：width设置水平线宽度；color设置水平线颜色；align设置水平线居中对齐；noshade设置水平线无阴影。-->
   <hr width="80%" color="pink" align="left" />
   <!--	修饰标签
        文字斜体：<i></i>、<em></em>
   	    加粗：<b></b>、<strong></strong>
   	    下标：<sub> 上标：<sup>
   	    下划线：<ins> 删除线：<del>  -->
   <p>
   	  <i>HTML</i>是指超文本标记<em>语言</em>，
      <b>HTML</b>不是一种编辑<strong>语言</strong>，
      <sub>而是</sub>一种标记<sup>语言</sup>，
      <ins>标记</ins>语言是一套标记<del> 标签</del> 。</p>
   <!--特殊符号
       &lt;显示结果 <
       &gt;显示结果 >
       &reg;显示结果 已注册标记符号 
       &copy;显示结果  版权符号
       &trade;显示结果  商标符号
       &nbsp;显示结果  不断行的空白（空格）
   -->
   <p>标签总是成对出现的，比如&lt;b&gt;&lt;/b&gt;</p>
   &reg;&copy; &trade;

效果图：

三、列表标签

代码

<!DOCTYPE html>
<html>
<head>
	<title>列表标签</title>
</head>
<body>
	<h1>什么是HTML？</h1>
<!--无序列表：<ul> 
                <li>列表项</li>
                <li>列表项</li>
                ......
             </ul>
             type属性值：disc圆点；square正方形；circle空心圆。
-->

<ul type="disc">
    <li>HTML是超文本标记语</li>
    <li>超文本指的是超链接</li>
    <li>是一种用来制作网页的语言，</li>
    <li>这种语言由一个个的标签组成</li>
</ul>
<ul type="square">
    <li>HTML是超文本标记语</li>
    <li>超文本指的是超链接</li>
    <li>是一种用来制作网页的语言，</li>
    <li>这种语言由一个个的标签组成</li>
</ul>
<ul type="circle">
    <li>HTML是超文本标记语</li>
    <li>超文本指的是超链接</li>
    <li>是一种用来制作网页的语言，</li>
    <li>这种语言由一个个的标签组成</li>
</ul>
<hr>
<!--有序列表：<ol> 
                <li>列表项</li>
                <li>列表项</li>
                ......
             </ol>
             type属性值：1数字排序；a小写字母排序；A大写字母排序；i小写罗马数字排序；I大写罗马数字排序。
-->
<ol type="1">
    <li>HTML是超文本标记语</li>
    <li>超文本指的是超链接</li>
    <li>是一种用来制作网页的语言，</li>
    <li>这种语言由一个个的标签组成</li>
</ol>
<ol type="a">
    <li>HTML是超文本标记语</li>
    <li>超文本指的是超链接</li>
    <li>是一种用来制作网页的语言，</li>
    <li>这种语言由一个个的标签组成</li>
</ol>
<ol type="i">
    <li>HTML是超文本标记语</li>
    <li>超文本指的是超链接</li>
    <li>是一种用来制作网页的语言，</li>
    <li>这种语言由一个个的标签组成</li>
</ol>
<hr/>
<!--定义列表：<dl> 
                <dt>定义列表项</dt>
                <dd>列表项描述</dd>
                ......
             </dl>
             注：<dt>和<dd>是同级标签。<dl>和<dt>和<dd>组合使用
             type属性值：
-->
<dl>
   <dt>什么是HTML</dt>
   <dd>HTML是超文本标记语言</dd>
   <dd>超文本指的是超链接</dd>
   <dt>html标签</dt>
   <dd>html标签是一种用来制作网页的标签</dd>>
</dl>
</body>
</html>>

效果图：

四、图像和超链接标签

代码显示

<!DOCTYPE html>
<html>
<head>
	<title>图像和超链接</title>
</head>
<body>
<!--图像标签：
<img src="" alt="" />
img属性：src（必写）显示图像的路径或地址；alt图像替代文本(用户无法显示图片时，可以代替图像显示在浏览器中)；height图像的高；width图像的宽。
-->
<!--html路径：绝对路径就是从盘符开始写；相对路径就是同级文件夹下直接写名字-->
<img src="C:\Users\dell\Desktop\HTML图片\基本框架.png"/ width="70px" height="50px">
<h2>基本框架1</h2>
<img src="基本框架.png" alt="基本框架" width="30%" height="20%"/>
<h2>基本框架2</h2>
<hr/>
<!--超链接标签
<a href="">内容</a> 
属性：href:链接地址，可以是内部链接或外部链接；target链接的目标窗口_self（在当前的窗口打开一个新的页面）、_blank（去创建一个新的窗口打开新的页面）、_top、_parent;title链接提示文字；name链接命名。
-->

<a href="photo.html" target="_self" ><h2>基本框架3</h2></a>
<a href="https://mp.csdn.net" target="_blank"><h2>基本框架4链接到外部</h2></a>
<a href="#" title="我的基本框架的截图"><h2>基本框架5空链接</h2></a>
<!-- 定义锚：
	<a href="#锚名1">目录1</a> 
	<a href="#锚名2">目录2</a> 
	<a href="" name="锚名1">内容1(要跳转到这个位置)</a> 
	<a href="" name="锚名2">内容2/a> 
		注：先定义锚的名称，在定义寻找锚的链接
-->
<a href="#html1">111</a> <a href="#html2">222</a> 
<a href=" " name="html1"><h3>1111</h3></a> 
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>

<a href=" " name="html2"><h3>222</h3></a> 
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<p>111111111111111111111111111111111</p>
<!-- 定义锚（不同页面）：
	网页1<a href="网页名称#锚名">目录</a> 
	
	 网页2 <a  name="锚名">内容/a> 
		注：先定义锚的名称，在定义寻找锚的链接
-->
<!--电子邮件链接
<a href="mailto:邮件地址">内容</a> 
-->
<!--文件下载
<a href="下载文件的地址">内容</a> 
-->
</body>
</html>

效果图

 

橙子吖21
关注
专栏目录
HTML基础重点_一般标签、常用标签和表格
12-13
HTML，全称HyperText Markup Language，是用于创建...以上就是HTML基础中的关键知识点，这些标签和属性构成了网页的基本框架，是每个前端开发者必须掌握的基础。通过熟练运用这些元素，可以创建出丰富多样的网页内容。
HTML基础
weixin_45698602的博客
06-01 127
一、html概念及发展历史 二、基础语法及常用标签（段落、图片、链接等） 1、html(Hypertext Markup Language)超文本标记语言
03-功能元素
m0_49233445的博客
08-18 366
1.功能元素 1.1列表标签 作用：给一堆数据添加列表语义，也就是告诉搜索引擎告诉浏览器这一堆数据是一个整体。 HTML中列表标签的分类 ​ 无序列表(最多)(unordered list) ​ 有序列表(最少)(ordered list) ​ 定义列表(其次)(definition list) 1.1.1 无序列表 有先后之分：排行榜 无先后之分：新闻列表 商品列表 无序列表格式： <ul> <li>需要显示的条目内容</li> </ul&
html中的列表标签
greentrainsad的博客
09-30 1625
列表标签 有序列表 无序列表 定义列表
HTML入门基础——列表标签
weixin_65308752的博客
12-26 899
列表标签通常使用来布局 列表的最大特点就是整齐、整洁、有序，用作布局会更加方便和自由 可分为三大类：无序列表、有序列表和自定义列表
【Java 进阶篇】HTML列表标签详解与示例
繁依Fanyi的博客
10-07 636
定义列表用于表示术语及其对应的定义之间的关系。它由一系列术语（<dt>）和它们的定义（<dd>）组成。虽然浏览器默认为列表的项目添加标记符号，但您也可以使用CSS来自定义这些标记符号的样式。
html基础知识点以及常用标签
07-24
本文将深入讲解HTML的基础知识点，包括常用标签和属性，对于自学前端的人来说是很好的学习资料。 首先，HTML文档的头部通常包含`<title>`标签，它定义了浏览器标题栏显示的页面标题，如“家用电器排行榜”。`<meta>...
html简单知识点总结，常用标签总结，简洁界面 ，框架的基础例子
05-23
2. **HTML标签**：HTML标签是构成网页的基本元素，如`<h1>`到`<h6>`用于定义六级标题，`<p>`用于创建段落，`<a>`创建超链接，`<img>`插入图像，`<div>`作为内容分组，`<span>`用于行内元素的分组等。此外，还有`<ul>...
最全的css2.0+html标签帮助文档和教程
09-16
它的标签系统是其核心，如`<html>`、`<head>`、`<body>`定义了整个页面的框架，`<h1>`到`<h6>`定义标题级别，`<p>`用于段落，`<a>`创建超链接，`<img>`插入图像，`<ul>`、`<ol>`、`<li>`组织无序或有序列表，`...
HTML常用标签之列表标签
m0_61794291的博客
01-20 8277
列表标签前言一、无序列表Tips二、有序列表Tips三、自定义列表Tips四、代码实现总结 前言 列表标签的主要作用是页面布局，它相比表格标签，更加整齐、整洁、有序，作为布局更加自由和方便 关于表格标签可以点这里→HTML常用标签之表格标签 一、无序列表 <ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义，基本语法格式如下~ Tips 无序列表的各个列表项之间没有顺序之分，是并列的 <ul>只能嵌套&lt..
列表标签都有哪些呢？
csdn1048的博客
03-06 3961
列表标签
HTML列表标签和表格标签
最新发布
weixin_51668410的博客
04-02 1820
有序列表的每一个列表项前都带有数字或者其他顺序的标记。有序列表由 <ol> 标签开始，每个列表项使用 <li> 标签定义。<td>[Table data]: 定义表格中的单元格内容。无序列表的每一个列表项前都带有圆点或者其他形式的标记。<tr>[Table row]：定义表格中的单元格。跨行合并：rowspan = "合并单元格个数"<table>:定义表格的标签。属性可以用来指定有序列表中第一个项目的编号。标签开始，列表中的每个项目都由。属性：ul和li中的type属性。标签开始，每个列表项使用。
7. 列表标签
weixin_42118352的博客
06-11 281
表格是用来显示数据的，那么==列表 就是用来布局的。==**列表 ** 最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。标签表示HTML页面中项目的无序列表(unordered list)，一般会以项目符号呈现列表项，而列表项使用标签定义。无序列表的基本语法格试如下： 示例: 注意:无序列表的各个列表项之间没有顺序级别之分，是并列的。中只能嵌套,直接在标签中输入其他标签或者文字的做法是不被允许的。与之间相当于一个容器，可以容纳
HTML标签合集——列表标签
weixin_49771248的博客
10-13 133
了解HTML基础标签，以便于后续操作。
【列表标签和表单标签】
jsj18700625723的博客
07-08 882
现在的一个商业级别的页面，一般都是数据呈现分组出现，这样的数据都是以列表组的形式出现（显得页面整齐），所以在页面上，列表标签是出现频率较高的标签。get的数据长度受限于ur的长度，最初只能录入2k，但是随着时代发展，各家浏览器对这个上限要求是不同的可能有很多，post没有上限，是因为所有上传的数据存在请求包中。| |1.name和value属性决定数据键值对的格式，name属性不可或缺。
【Web】HTML，列表标签
qq_52978240的博客
04-04 1124
列表标签 目录 1.无序列表 （1）标签表示 （2）无序标签注意事项 2.有序列表 1.无序列表 （1）标签定义 标签：<ul>【可当做父亲】 列表项：<li>【可当做儿子】 Eg:<ul> <li>榴莲</li> <li>臭豆腐</li> <li>罐头</li> </ul> 输出样式： （...
HTML基础——列表标签
热门推荐
Ariel_欢
01-10 1万+
一、列表标签是什么 what？ 列表标签的作用：给一堆数据添加列表语义，也就是告诉搜索引擎/浏览器这一堆数据是一个整体。 二、列表标签分类 1.无序列表（最多）（unordered list） 格式： <ul> <li>需要显示的条目内容</li> </ul> li：list litm的缩写：条目列表。list：列表；item:条目 2.有序列表（最少）（ordered list） 格式： <ol>
HTML标签列表合集
xiaoweids的博客
07-08 208
转自：微点阅读 https://www.weidianyuedu.comHTML 标签列表(字母排序)标签描述定义注释定义文档类型定义超文本链接定义缩写定义只取首字母的缩写，不支持HTML5定义文档作者或拥有者的联系信息HTML5中不赞成使用。定义嵌入的 applet。定义图像映射内部的区域New定义一个文章区域New定义页面的侧边栏内容N...
HTML基础知识：超链接与标记语法解析
"超链接HyperLink-第1章 HTML基础知识" HTML（HyperText Markup Language）是构建网页的基础，它是一种描述性的标记语言，而非编程语言。HTML用于定义网页内容的结构和样式，比如字体颜色、大小等。网页间的相互...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值