HTML基本结构、标签、列表

最新推荐文章于 2024-07-12 20:49:16 发布
最新推荐文章于 2024-07-12 20:49:16 发布
阅读量428 收藏
点赞数 2
分类专栏： HTML 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56649557/article/details/115921720
版权

文章目录

HTML、CSS、 JS的关系

  • HTML是网页的骨架主要负责网页的结构
  • CSS为网页提供样式用来美化修饰网页
  • JavaScript是一种脚本语言用来控制dom元素，主要用于前端页面的 DOM 处理

主流浏览器及其内核

  • Firefox(火狐)->Gecko
  • Chrome(谷歌)->Webkit->Blink
  • IE(IE6,IE7,IE8,IE9,IE10,IE11)->Trident
  • Opera(欧朋)->Webkit
  • Safari->Webkit

HTML介绍

HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。html专门负责网页的结构骨架，所以应关注他的语义，而不是他的样式。

路径

当我们跳转到另一个服务器内部的页面时。一般我们都会使用相对路径相对路径都会会使用.或…开头。
相对路径 ：./表示当前文件所在目录 …/表示当前文件所在目录的上一级目录
绝对路径：从磁盘根目录开始的路径

HTML标签

HTML标签结构

<!DOCTYPE html> ：表示当前的html文件是html5的文档(html5的规范)

<html lang="en"> ： lang表示开发语言（en表示英语）

<meta charset="UTF-8"> ：charset表示使用的字符集。UTF-8支持中文
gbk、GB2312、iso-8859-1

<html></html> : 页面的根标签。

<head></head> ：头部标签，页面的常规信息，可用于引入为外部css文件等

<body></body>：主体标签，页面的主体信息，用户可以看到的部分

HTML标签分类

  • 单标签：<标签名 />
  • 双标签：<标签名></标签名>
  • 块级元素：在页面中独占一行的称为块元素，可以设置宽高。
  • 行内元素（内联元素）：在页面中不能独占一行，不能设置宽高、宽高由内容大小来决定。

常用标签

标题标签

标题标签：h1~h6 数字越小字体越大，并且自动加粗、自动换行

         <h1>一级标签</h1>
         <h2>二级标签</h2>
         <h3>三级标签</h3>

段落标签

段落标签：表示一段内容，可以自动换行

<p>p标签中内容就表示一个段落</p>

分割线(水平线)

<hr color="颜色" size="粗细" width="宽度"/>

换行标签

<br />

文字修饰标签

<span>部分文字的样式调整</span>
<ins>内容增加下划线</ins>
<del>内容增加删除线</del>
<b>加粗</b>
<strong>加粗、并且具有语义化效果</strong>
<i>倾斜</i>
<em>倾斜、并且具有语义化效果</em>
<mark>高亮显示</mark>

超链接标签

超链接可以让我们从一个页面跳转到其他页面或者是当前页面
某一位置 ，href 指定跳转的目标路径。

target属性用来指定超链接打开的位置。
-可选值
_self 默认值 在当前页面打开超链接
_blank 在一个新页面打开超链接

<a href="https://www.baidu.com" target="_blank">超链接</a>

超链接也是一个行内元素，在a标签中可以嵌套除自身外任何元素

<a href="跳转路径" target="_blank">
    <img src="图片路径" />
</a>

图片标签

<img src="./图片路径/图片名称.png" alt="图片未加载出来时显示的信息" />

音频标签

controls 控制播放
autoplay 自动播放
loop 循环播放

<audio src="./音频文件目录/音频文件.mp3" controls autoplay loop></audio>

也可以用这种形式

<audio controls autoplay loop>
     <source src="./source/故梦.mp3">
</audio>

视频标签

<video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

特殊字符

    (1)空格：&nbsp; 
	
	(2)小于： &lt;
	
	(3)大于：&gt;
	
	(4)版权符号：&copy;
	
	(5)注册商标：&reg;
	
	(6)摄氏温度：&deg;
	
	(7)乘号：&times;
	
	(8)除号：&divide;
	
	(9)平方：&sup2;

列表

html也可以创建列表，html列表一共有三种

  • 无序列表
  • 有序列表
  • 定义列表

无序列表

<ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
        ······
</ul>

有序列表

<ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
        ······
</ol>

定义列表

<dl>
        <dt>标题</dt>
        <dd>内容1</dd>
        <dd>内容2</dd>
        <dd>内容3</dd>
</dl>
开到荼蘼223's
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
HTML知识点整理（包含简介、主要页面结构、常用标签、列表、表格、form表单以及表格表单区别等）
weixin_46800546的博客
09-18 714
文章目录HTML简介1.什么是标签语言？2.什么是 HTML？3.HTML页面的结构HTML常用标签基本标签特殊标题列表表格form表单表单与表格的区别 HTML简介 1.什么是标签语言？ HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 <html> HTML 标签通常是成对出现的，比如 <b> 和 </b> 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签
HTML基本结构标签以及常用标签
qq_52341981的博客
08-23 2862
我们常用的开发工具：VScode 首先我们先看到的是HTML的基本结构标签 由上图我们依次解释其用途 <html></html>作为页面中一个最大的标签，包裹住其他小标签，称其为根标签 <head></head>文档的头部，在这其中必须包含tilte标签 <title></title>文档的标题，给页面设置标题 <body></body>文档发主体，页面中的内容基本都放在改标签里。 接着我们来.
html写出三种列表的结构,实现html列表结构的方式有哪些?
weixin_30071787的博客
06-17 764
匿名用户1级2014-01-05 回答HTML有三种列表形式：排序列表(Ordered List)；不排序列表(Unordered List)；定义列表(Definition List)。排序列表(Ordered List)排序列表中，每个列表项前标有数字，表示顺序。排序列表由开始，每个列表项由开始。排序列表示例123456789101112一个排序列表(OrderedList)：php网页课程...
html的基本结构、无序列表
wenqi1的博客
06-30 919
一、html基本结构 html是由haed和body组成的，就像一个人，是由头和身体组成的 charset="utf-8"代表使用utf-8的编码 title里面是这个网页要展示的网页名 body里写的是网页内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> &lt
HTML的定义列表
Duke_Jiang的博客
09-16 5231
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19-定义列表</title> </head> <body> <!-- 1.定义列表的作用: 1.1给一堆数据添加列表语义 1.2先通过dt标签定义列表中的所有标题, 然后再通过dd标签给每个标题添加描述信息 2.定义列表的格式: <dl&gt.
请问html基本结构中 头部标签是什么,什么是HTML的基本结构与标签
weixin_33146437的博客
07-02 460
什么是HTML的基本结构与标签发布时间：2020-07-20 10:12:15来源：亿速云阅读：96作者：Leah什么是HTML的基本结构与标签？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。一、初步了解HTMLHTML是一种超文本标签语言，浏览器则是用来“解释和执行”HTML源码的工具。HTML的基本结构其中是文档类型声明，声明这个文...
HTML基本结构及基本标签
awjdwb的博客
08-11 7393
什么是HTML： HTML是Hyper Text Markup Language的缩写，即超文本标记语言（所谓超文本可以理解为具有超能力的文本），是一种解释性语言，用于制作网页界面，使用该语言编写的网页最终被浏览器解释执行 HTML基本结构： &amp;lt;html&amp;gt;//用来标记HTML文档的开始 &amp;lt;head&amp;gt; //用来标记HTML文档头部的开始 &amp;lt;/...
HTML基本结构标签
热门推荐
JiuMeilove的博客
09-01 2万+
定义标题栏：header header 元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，因此整个页面的标题应该放在页面的开头。 header 定义文档的页眉，在一个网页中可以多次使用 header 元素。 语法&案例： <header> 　　<h1>网页标题</h1> </header> <article> 　　<header> <h2>文章标题
HTML基本标签及结构详解
01-18
2.HTML标签结构 1.文档结构： <!doctype html><!--!表示声明的意思。这一行代码意思：下面的文档标签将以html5进行解析--> <html> <!-头部.用来完成一个网页的相关设置-> <head> <meta...
HTML基本结构全面了解
09-28
总结来说，HTML基本结构的全面了解包括：了解HTML文档的组成部分，理解文档类型声明的作用，掌握`<head>`和`<body>`标签的功能，熟悉常用的HTML标签及其属性，以及掌握HTML元素的基本规则。掌握这些基础知识，是成为...
01 HTML基本标签.ppt
07-23
Html的基础标签学习之后会使用HTML的基本结构创建网页，会使用文本相关标签，实现文字修饰和布局，会使用图像相关标签实现图文并茂的页面，会使用超链接相关标签实现页面间的跳转。
细数html中的列表标签
09-28
总之，HTML中的列表标签是构建网页结构化内容的重要工具，它们有助于提高网页的可读性和用户体验。了解并熟练掌握这些标签，对于任何Web开发者来说都是至关重要的。通过灵活运用`<ul>`、`<ol>`和`<dl>`，以及其子...
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1166
title>充电效果
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
HTML 学习指南：从入门到精通
英英的博客
07-09 408
HTML（HyperText Markup Language）是构建网页的框架。掌握HTML不仅能更好的理解网页的结构，还能为进一步学习CSS、JavaScript等前端技术打下坚实的基础。本篇文章将为你规划一条从HTML入门到精通的学习路线，并概述每个阶段的核心内容。
html转markdown nodejs实现
学习使我快乐_玉祥
07-09 251
用到了jsdom库，直接现成处理html标签结构，只需要关心format格式化样式即可。比较简易，待后续优化，目前只是短时间批量转换html文件。
前端入门知识分享：如何在HTML或CSS文件中引用CSS文件。
uu0216的博客
07-09 777
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式； 内嵌样式：使用 style 标签在 HTML 文档头部（ 通常在 head 之间）定义 CSS 样式； 链接式：使用 link 标签引入外部 CSS 样式表文件。 导入式：使用 @import 命令导入外部 CSS 样式表文件。
html&css基础
antyuki的博客
07-09 740
/
HTML(29)——立体呈现
m0_74386799的博客
07-09 485
作用：设置元素的子元素是位于3D空间中还是平面中。将两个盒子分开，添加一个旋转的效果使其更明显。属性名：transform-style。为了更好的视觉效果我又添加了视距。原则给它们定位，最后。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值