HTML基础学习之(二)HTML介绍

已于 2022-11-02 18:32:16 修改
阅读量434 收藏 2
点赞数
分类专栏： HTML 文章标签： html 前端 学习
于 2022-08-06 14:08:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53998054/article/details/126193943
版权

代码详解

<html>

<head>

    <title>Document</title>

</head>

<body>

    测试页面    

</body>

</html>

网页中固定结构是通过HTML标签进行描述的

每一个页面都有固定的结构,如：整体、头部、标题、主体

html是整体、head是头标签、标题是title、主体是body　

标签

标签的类型

标签由<、>、/、英文单词组成的，并且把标签中<>包裹起来的英文单词或者字母成为标签名

常见标签由两部分组成的，我们称为双标签，前面部分成为开始标签，后面的部分叫结束标签、两部分包裹内容

少数标签由一部分组成、我们称为单表签。自成一体，无法包裹内容。

标题标签

代码

<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>　
特点
        1.文字都有加粗
        2.文字都有变大、并且从h1-h6文字逐渐变小
        3.独占一行

P标签段落标签

代码

<p>我是一段文字</p>
特点
        1.段落之间存在间隔
        2.独占一行

HTML注释

<!-- -->

background标签(背景图片)

<style> 
 body {
   background:url("zz.jpeg")  no-repeat center center;   /*加载背景图*/   /* 背景图不平铺 */
   background-size:cover;  /* 让背景图基于容器大小伸缩 */
   background-attachment:fixed;        /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */    //此条属性必须设置否则可能无效/
   background-color:#CCCCCC;   /* 设置背景颜色，背景图加载过程中会显示背景色 */
   background-image: url("/test/img/154e.png");
   background-repeat: no-repeat; /*属性设置是否及如何重复背景图像*/
}
</style>

Audio标签(音频标签)

<audio id="bgmMusic" src="demo.mp3" autoplay="autoplay" loop="loop" preload="auto" type="audio/mp3"></audio>

controls是显示播放的控件
src是音频的路径
autoplay是自动播放
loop是循环播放 
提示:
 MP3、Wav、Ogg

全局属性 

 br换行标签

代码:

<br>

单标签

让文字强制转换

hr标签

代码:

<hr>
属性:
Width:宽
size:高
noshade="noshade" 去除水平线阴影
特点:
　　单标签
　　在页面中显示一条水平线

垂直线

  <style> 
   .vertical-line{
        display: inline-block;
        border-left: 2px solid rgb(7, 189, 71);
        margin: 0 40px;
        height: 25px;
    }


   </style>

使用

  <span class="vertical-line"/>  


</span>

自定义网页头部小图标

首先图标必须是xxx.ico格式的图片，假定你的图标命名为为 favicon.ico 且和html页面在同一个根目录下，实现代码为：

<link rel="icon" type="image/x-icon" href="favicon.ico"/>

文本格式化标签　

场景:需要让文字加粗、下划线、倾斜、删除线等效果

代码都是双标签:

<b> 加粗  <strong> 加粗
<u>下划线 <ins>下划线
<i>倾斜 <em>倾斜
<s>删除线 <del>删除线　
突出重要性的强调语境

图片标签

<img src="" alt="">
alt是替换文本
title是提示文本当鼠标悬停时、才显示的文本
width是宽度
height是高度
注意:
 如果只设置width和height中的一个，另一个没设置的会自动等比例缩放
 如果同时设置width和height两个，若设置不当此时图片可能会变形

单标签　

img标签需要展示对应的效果、需要借助标签的属性进行设置

 全局属性

 属性注意点:

        1.标签的属性写字开始标签内部

        2.标签上可以同时存在多个属性

        3.属性之间以空格隔开

        4.标签名与属性之间必须以空格隔开

        5.属性之间没有顺序之分

路径的介绍

绝对路径:

绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径

例如:

        1.盘符

        2.完整的网络地址

相对路径

概念普及
 当前文件:当前的html网页
 目标文件:要找到的图片
相对路径:从当前文档开始出发目标文件的过程
相对路径分类:
  同级目录
  下级目录
  上级目录

同级目录代码:
#方法一
<img src="目标图片">
#方法二
<img src="./目标图片>
下级目录:目标文件在下级目录中 
代码:
<img src="目录/图片>　
上级目录:目录文件在上级目录中
<img src="../目录/图片" alt="">　

视频标签

代码:

<video src="./MP4" controls></video>
src是视频的路径
controls是显示播放的控件
autoplay是自动播放  配合muted实现静音播放
loop是循环播放

 全局属性

 连接标签

　代码

<a href="./目标网页">超链接</a>

         1.双标签，内部可以包裹内容

         2.如果需要a标签之后去指定页面，需要a标签的href属性

列表

无序列表

示例：

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

场景:在网页中表示一组无顺序之分的列表，如:新闻列表

组成标签:

标签名说明
ul表示无序列表的整体、用于包裹标签
li表示无序列表的每一项、用于包含每一行的内容

显示特点:

        列表的每一项默认显示圆点标识

注意点:

        Ul标签中只包含li标签

        li标签可以包含任意内容

小结

        无序列表由几个标签组成？分别是什么？

                ui标签表示无序列表的整体

                li标签:表示无序列表的每一项

        无序列表标签的嵌套规范是什么？

                ui标签只允许嵌套li标签

                li标签可以嵌套任意内容

有序列表

    场景:在网页中表示一组有顺序之分的列表，如:排行榜。

标签组成:

标签名说明
ol表示有序列表的整体，用于包裹标签
li表示有序列表的每一项，用于包含每一行的内容

显示特点:

        列表的每一项默认显示序号标识

注意点:

        ol标签中只允许包含li标签

        li标签可以包含任意内容

小结

        有序列表由几个标签组成？分别是什么？

                ol标签表示无序列表的整体

                li标签:表示无序列表的每一项

        有序列表标签的嵌套规范是什么？

                ol标签只允许嵌套li标签

                li标签可以嵌套任意内容

自定义列表

标签组成

标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd

表示自定义列表的针对主题的每一项内容

显示特点

        dd前会默认显示缩进效果

注意点:

 dl标签页只允许包含dt/dd标签

  dt/dd标签可以包含任何内容’、

小结

   自定义列表由几个标签组成？分别是什么？

                dl标签表示自定义列表的整体

                dt标签:表示自定义列表的主题

                dd标签:表示对于主题的每一项内容

      自定义列表标签的嵌套规范是什么？

                dl标签只允许嵌套dt/dd标签

                dt/dd标签可以嵌套任意内容

表格标签

基本标签

标签名说明
table表格整体，可用于包裹多个tr
tr表格每行可用于包裹td
td

表格单元格，可用于包裹内容

注意点:

 嵌套关系:table>tr>td

相关属性

属性名属性值效果
border数字边框宽度
width数字表格官渡
height数字表格高度

注意点:

        实际开发针对样式效果推荐使用css设置

表格标题和表格单元格标签

其他标签:

属性名属性值效果
caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
th表格单元格表示一列表标题通常用于表格第一行，默认内部文字加粗并居中显示

注意点

caption标签书写在table标签内部

th标签书写在tr标签内部

表格的结构标签

场景:让表格的内容结构分组，突出不同部分，使语句更加清晰

标签

标签名名称
thead表格头部
thody表格主题
tfoot表格底部

注意点:

        表格结构内部用于包裹tr标签

        表格的结构可以省略

合并单元格-代码实现

合并单元格步骤:

1.明确合并那几个单元格

2.通过左上原则，确定保留谁删除谁

        上下合并一只保留最上，删除其他

        左右合并—只保留最左，删除其他

3.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名属性值效果
rowspan纵向合并单元格
colspan横向合并单元格

注意点:

只有一个结构标签中的单元格才可以合并，不能跨结构合并

扩展

table属性
cellspacing单元格间距，一般设置为0
cellpadding文字到边框的距离
border表格和单元格的边框
align表格居中
width宽度
height高度
text-align:center文本居中，左右居中
vertical-align上下居中
border-collapse等同cellspacing,单元格间距

input标签的基本介绍

场景:在网页中显示收集用户信息的表单效果,如:登录页、注册页

标签名：input

        input标签可以通过type属性值的不同,展示不同效果

type属性值

标签名type属性值说明
inputtext文本框、用于输入单行文本
inputpassword密码框、用于输入密码
inputradio单选框、用于多选一
inputcheckbox多选框、用于多选多
inputfile文件选择、用于之后上传文件
inputsubmit提交按钮、用于提交
inputreset重置按钮、用于重置
inputbutton普通按钮，默认无功能之后配合js添加功能

扩展

 input占位符(提示信息)

场景:在网页中显示输入单行文本的表单控件

type属性值:text

常用属性:

属性名说明
placeholder占位符,提升用户输入内容的文本

input系统标签-单选框

场景:在网页显示多选一的单选表单控件

type属性值:radio

常用属性:

属性名说明
name分组:有相同name属性值的单选框为一组,一组中同时只能有一个被选中
checked默认选中

注意点:

name属性对于单选框有分组功能

        有相同name属性对于单选框有分组功能

        有相同name属性值的单选框为一组,一组只能同时有一个被选中

input系统标签-文件选择

场景:在网页中显示文件选择的表单控件

type属性值:file

常用属性:

属性名说明
multiple多文件选择

input系统标签-按钮

场景:在网页中显示不同功能的按钮表单控件

type属性值:

标签名type属性值说明
inputsubmit提交按钮,点击之后提交数据给后端服务器
inputreset重置按钮，点击之后恢复表单默认值
inputbutton普通按钮、默认无功能、之后配合js添加功能

注意点:

如果需要实现以上按钮功能需要配合form标签使用

form使用方法:用form标签一起包裹起来即可

input下拉菜单

select下菜单标签

标签组成:

       selec标签:下拉菜单的整体

       option标签:下拉菜单的每一项

常见属性:

selected：下拉菜单的默认选中

textarea下拉菜单

场景:在网页中可输入多行文本的表单控件

标签名:textarea

常见属性:

cols:规定了文本域内可见宽度

rows:规定了文本域内可见行数

注意点:

右下角可以拖拽改变大小

实际开发时针对样式效果推荐使用css设置

label标签

场景:常用于绑定内容与表单标签的关系

标签名:label

使用方法1:

        1.使用label标签吧内容(如:文本)包裹起来

        2.在表单标签上添加id属性

        3.在label标签的for属性中设置对应的id属性值

使用方法2:

        1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来

        2.需要吧label标签的for属性值删除即可

语义化标签

 目标:能够认识开发中常用的没有语义布局标签(div,span)和有语义的布局标签

场景:实际开发中网页会大量频繁的使用到div和span这两个没有语义的布局标签

  div标签:一行只显示一个

  span标签:一行可以显示多个

有语义的布局标签

场景:在HTML5新版本中 退出了一些有语义的布局标签供开发者使用

标签:

标签名道义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
artcle网页文章

注意点:

 以上标签显示特点和div一致,但是比div多了不同的道义

字符实体

目标:能通过字符实体在网页中显示特殊符号

学习路径:

        HTML中空格合并现象

        常见字符实体

  HTML的空格合并现象

        场景:如果在HTML中同时并列出现多个空格、换行、缩进等最终浏览器会解析出一个空格、换行、缩进等最终浏览器只会解析出一个空格

常见字符实体

        场景:英文;

        常见字符实体

常见字符实体          

显示结果描述实体名称 实体编号
空 格 &nbsp;&#160;
< 小于号 &lt;    &#60;
>大于号  &gt;&#62;
& 和号 &amp; &#38;
" 双引号   &quot;&#34;
’  单引号  &apos;（IE不支持）&#39;
©  版 权&copy;&#169;
®注册商标&reg; &#174;
™商 标 &trade; &#8482;
× 乘 号&times; &#215;
÷  除 号 &divide;&#247;

我是一个小仓鼠01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML转义字符大全
weixin_34023982的博客
02-21 2062
1.常用转义字符 转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中，定义转义字符串的原因有两个：第一个原因是像“&lt;”和“&gt;”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要...
HTML基础(一)介绍
Cocksuck的博客
05-25 713
目录 第一章 HTML第一天 本章要点： 一、常用浏览器与浏览器内核 1、常用浏览器 2、浏览器内核 二、Html概述和Html编译器及Html基本结构 1. Html简介 2. Html编译器介绍 3. Html基本结构 三、静态页面以及动态页面 1. 静态页面 2. 动态页面 3. 静态页面和动态页面的区别 四、Html标题、段落、换行与字符实体 1. Html标题 2. Html段落 3. Html字符实体 五、Html图像、绝对路径和相对路径 1. Htm.
HTML的头部文件和主体标签
weixin_45659364的博客
12-12 3378
HTML的头部文件和主体标签 完整的HTML文档包括文档头和文档主体两部分 HTML的头部文件和主体标签一、文件头部内容1.标签< base>2.标签< meta>二、主体部分1.设置页面背景颜色< bgcolor>2.设置页面边距< margin>3.设置正文文本颜色< text>4.设置页面背景< background> 一、文件头部内容 1.标签< base> 位置：放于头部文件中，一个HTML文件只能有一个
处理html转义字符&middot（插入到数据库中的数据中所有"."变成了"&middot"）
weixin_37858031的博客
05-01 6461
由于插入数据时发现所有的"."变成了转移字符"&middot"，现需要将数据库中的存在的所有"&middot"还原成"."，故作以下操作： UPDATE table SET name= REPLACE ( name, '&middot', '.' ) ...
html基础标签-学习笔记1
m0_51273315的博客
05-12 647
根标签 、头标签 、网页体标签6、背景颜色/图片标签。10、无序/有序列表标签。11、认识基本主体标签。8、a标签设置超链接。
HTML常用标签详解
淘小欣的博客
03-04 9890
HTML常用标签详解 一、head内常用标签 1.基本标签（非meta标签） <!--title: 定义网页标题--> <title>Title</title> <!--style: 定义内部样式表. 内部用来书写css代码--> <style> h1 { color: greenyellow; } </style> <!--script: 内部用来书写js代码--> <script
HTML基础学习（一）简介
weixin_62911585的博客
05-12 148
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 HTML结构：分为文档声明和HTML文档两部分，其中HTML又分为页头和页身，页头用 <head></head>标签表示，页身用<body></body>标签表示，二者都存在于<html&g..
html+css基础入门学习教程之HTML 样式
html前端基础入门教程
03-01 4697
HTML 样式 通过使用 HTML4.0，所有格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。 先来看一个例子，代码如下： <head> <style type="text/css"> h1 {color: red} p {color: blue} </style> </head>...
html+css基础教程之html标题学习
html前端基础入门教程
03-01 3635
HTML 标题 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。<h1>This is a heading</h1><h1>定义最大的标题。<h6>This is a heading</h6><h6> 定义最小的标题。 注释：浏览器会自动地在标题的前后添加空行。 注释：默认...
《Web程序设计基础R》实验报告---HTML基础
一只小鹿的博客
12-21 4753
一、实验目的 1．掌握常用的HTML语言标记； 2．利用文本编辑器建立HTML文档，制作简单表单页面。 二、实验环境 计算机、Windows10 操作系统 三、实验内容、源码及运行结果 1．  实验内容 在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用） 源程序清单如下： 1. <html> 2. <head> 3. <title>Example</title&
HTML5+JavaScript动画基础 源码
11-20
在“HTML5+JavaScript动画基础 源码”这个主题中，我们将深入探讨如何利用这两种技术来实现丰富的网页动画效果。 HTML5是超文本标记语言的最新版本，它引入了许多新的元素和API，旨在提升网页的语义化和功能。在...
HTML5学习笔记（总结提炼版）——001
03-14
本学习笔记将聚焦于HTML5的基础知识，包括其新特性、元素和最佳实践。 一、HTML5的新特性 1. 语义化标签：HTML5引入了新的语义化标签，如、、、和等，这些标签有助于更好地组织内容，提高可读性和可访问性。 2. ...
html主题标签是什么意思,什么是网页标签_html标签是什么
weixin_29410963的博客
05-30 947
接下来我们来了解html网页标签(html标签)，简单的理解网页标签即是网页浏览器识别符，就像一个人名字张三、李四代表人的姓名一样。这里说明的是在网页程序中不同的标签有着不同的意义，也代表不同功能和样式。标签在一个常见html网页中有很多不同的标签，接下来我们来认识下第一，html网页标签是放入以“”结束尖括号有意义单词(系统、程序、浏览器默认单词)，如这就是div标签。第二，网页标签不是随便自己...
设计篇-网页设计的组成
superbigsboy的博客
08-02 7159
网页组成结构 一、网页页面组成结构 页面主要分为四个部 1、Header头部区 内容：logo、导航条(横向导航、纵向导航、折叠导航等。。）。 2、Banner 内容：PC端、移动端广告图，也叫焦点图。 设计尺寸:宽: 1920px 高度随实际需求而定:一般是480- 600px之间 Banner的作用: 宣传展示、可点击，带来商业转化率(给企业和个人带来利益)### 3、Main内容区域。 Banner的组成：背景、文案、产品或模特、点缀物。 Banner的常见图格式：中轴构图、上下构图、左右构图、三
php 分类标签推荐,html标签分类
weixin_35770958的博客
03-10 185
将 HTML 元素按功能进行分组。先简单会汇总下，熟悉的放前面。根元素: 文档元数据:、、、内容分区:、、 、 、 、~ 、 、、文本内容:、、、、、 、、 、、、 、、 、内联文本语义:、、、、、、、、、、、、、、、、、、、、、、、、、、、、、图片和多媒体: 内嵌内容:、、 、、、脚本:、、编辑标识:、表格内容:、、、、、、、、、表单: 、、 、、、、、、、、、、、交互元素、、、Web 组件:...
java 处理html转义字符' ·
热门推荐
一个人的专栏
03-13 1万+
System.out.println(StringEscapeUtils.escapeHtml4("M<M")); String s="”afsdfsd;f;÷sf·sadf'"; String ss=StringEscapeUtils.unescapeHtml4(s); System.out.println(ss);
HTML固定结构写法,HTML固定基本结构
weixin_26704651的博客
06-03 260
### HTML固定基本结构网页的固定基本结构包括以下标签，标签之间可以嵌套存在。HTML页面的结构包括头部\(head\)和主体\(body\)两大部分：头部描述浏览器所需的信息；主题包含网页中的具体内容。所以，我们所见到的网页内容，都是写在主体\(body\)中的。`` -------文档类型声明`` ------- 根控制标记`` ------- 头控制标记`` ------- 标题标记``...
html语言元素属性大全,HTML标签及标签属性大全（网页制作必备知识）
weixin_42301816的博客
05-31 639
html标签及标签属性大全(网页制作必备知识)总类(所有html文件都有的)--------------------------------------------------------------------------------文件类型 (放在档案的开头与结尾)文件主题 (必须放在「文头」区块内)文头 (描述性资料，像是「主题」)文体 ...
HTML DOM 对象
最新发布
lly202406的博客
08-23 445
HTML DOM对象是JavaScript与HTML文档交互的桥梁。通过DOM，开发者可以轻松地访问和操作页面元素，实现动态内容和交互功能。掌握DOM是前端开发的重要技能之一。
HTML与CSS基础学习指南
在学习HTML时，了解和掌握基本标签及其用法是至关重要的，同时也要熟悉CSS以实现更丰富的网页设计。随着技术的发展，前端开发不仅限于HTML和CSS，还涉及到JavaScript、Vue、React等框架，但对于初学者，扎实的HTML和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值