前端 Html 介绍

最新推荐文章于 2024-06-29 11:56:37 发布
最新推荐文章于 2024-06-29 11:56:37 发布
阅读量199 收藏 1
点赞数 2
分类专栏： 前端 文章标签： html python js javascript web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51927215/article/details/115986162
版权

Html

1、软件 — Sublime （简单配置）

安装地址：Sublime Text 3.2 官方下载

安装过程

  • 第一步：选择适合的版本

在这里插入图片描述

  • 第二步：下载控制台程序
  • 点击插件栏

在这里插入图片描述

  • 点击（Install Now）

在这里插入图片描述

  • 复制其中的内容（快捷键 ctrl + c 复制）

在这里插入图片描述

  • 打开软件并按 （ctrl + `）或（View — Show Console）打开控制台

在这里插入图片描述

  • 将复制的代码粘贴进去并按回车（快捷键 ctrl + v）

在这里插入图片描述

  • 第三步：插件安装，按（ctril + shift + p）后输入（ip）并下载第一个

在这里插入图片描述

  • 下载完成后，再次进行操作（ctrl + shift + p，输入 ip，打开第一个）之后就可以安装插件了

在这里插入图片描述

2、Html 基本结构

Html 文件

  • Html 文件包括头部分（head）和身体部分（body）
  • 头部分里面的内容不会显示在网页当中
  • 身体部分里面的内容会显示在网页当中
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!-- 1. 不显示在网页中 -->
</head>
<body>
	<!-- 2. 完全显示在网页中 -->
</body>
</html>

标签

  • 语法：尖括号包围关键字形成
  • 分类：单标签、双标签
<!DOCTYPE html>
<!-- 1. 仅向浏览器声明文档内容, 非标签 -->

<html></html>
<!-- 2. 类似 <开始标签></结束标签> 的是双标签 -->

<br>
<!-- 3. 单标签(自闭合标签) -->

元素

  • 语法：由标签和内容组成
<title>Document</title>

3、基本标签

3.1、标题标签

  • 一级标题（l）
  • 二级标题（o）
  • 三级标题（v）
  • 四级标题（e）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<h1>l</h1>
	<h2>o</h2>
	<h3>v</h3>
	<h4>e</h4>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

3.2、一般标签

  • 右对齐标签（参数 right）
  • 左对齐标签（参数 left）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<p align="right">i love you so much</p>
	<p align="left">i love you so much</p>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

特别注意

  • 一个标签（p）表示一个段落，在此标签里加上换行（br），仍表示一个段落
  • 空格需要用（&nbsp）代替
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
		<p align="right">i love you<br/>so much</p>
		<p align="left">&nbsp&nbsp&nbspi love you so much</p>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
强调

  • 标签（p）中不保留空格和换行
  • 标签（pre）中保留空格和换行
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
		<p align="right">i love you 
		so much</p>
		<p align="left">    i love you so much</p>
		<pre align="right">i love you
		so much</pre>
		<pre align="left">    i love you so much</pre>
</body>
</html>
  • 在浏览器中打开（注意对比之前的图片）

在这里插入图片描述

3.3、特殊标签

  • 加粗（b）
  • 斜体（i）
  • 下标（sub）
  • 上标（sup）
  • 下划线（ins）
  • 删除线（del）
  • 水平线（hr）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<p>i love <b>you</b></p>
	<p>i love <i>you</i></p>
	<p>i love <sub>you</sub></p>
	<p>i love <sup>you</sup></p>
	<p>i love <ins>you</ins></p>
	<p>i love <del>you</del></p>
	<hr>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

3.4、特殊符号

  • 已注册（reg）
  • 版权（copy）
  • 空格（nbsp）
  • 小于号（lt）
  • 大于号（gt）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<p>i love you&reg</p>
	<p>i love you&copy</p>
	<p>&nbsp&nbsp&nbspi love you</p>
	<p>i love you&ltbr&gt</p>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

4、列表标签

4.1、无序列表标签

  • 无序列表（ul）
  • 参数（disc 默认）为小黑点
  • 参数（square）为正方形
  • 参数（circle）为空心圆
  • 列表中项目（li）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<ul type="disc">
		<li>liu qian is a boy</li>
		<li>li hua is a boy too</li>
	</ul>
	<ul type="square">
		<li>liu mei is a girl</li>
		<li>song hua is a girl too</li>
	</ul>
	<ul type="circle">
		<li>li is a dog</li>
		<li>ki is a cat</li>
	</ul>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

4.2、有序列表标签

  • 有序列表（ol）
  • 参数（1 默认）为数字列表
  • 参数（a）为小写字母列表
  • 参数（A）为大写字母列表
  • 参数（i）为小写罗马字母列表
  • 参数（I）为大写罗马字母列表
  • 列表中项目（li）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<ol type="1">
		<li>apple</li>
		<li>orange</li>
	</ol>
	<ol type="a">
		<li>pig</li>
		<li>dog</li>
	</ol>
	<ol type="i">
		<li>girl</li>
		<li>boy</li>
	</ol>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

4.3、自定义列表标签

  • 自定义标签（dl）
  • 自定义标签列表项（dt）
  • 自定义标签描述项（dd）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<dl>
		<dt>apple</dt>
		<dd>can eat</dd>
		<dd>green or red</dd>
		<hr>
		<dt>bird</dt>
		<dd>can fly</dd>
		<dd>beautiful</dd>
	</dl>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

5、图片标签

  • 图片标签（img）
  • 参数（src）表示图像的（url）源，此处不介绍路径的选择
  • 参数（width）和参数（height）分别表示宽和高 （数值或百分比表示）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<img src="boy.jpg" width="40%" height="40%">
	<img src="sakura.jpg" width="40%" height="40%">
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
特别注意

  • 可能改变原本图像的比例
  • 参数（width）表示宽为 600 像素
  • 参数（height）表示高为 300 像素
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<img src="boy.jpg" width="600px" height="300px">
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

强调

  • 若无此图片，则利用参数（alt）用文本描述图片
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<img src="3.jpg" alt="can't find">
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

6、超链接标签

  • 超链接标签（a）
  • 参数（href）表示链接地址
  • 参数（title）表示链接提示文字
  • 参数（target 默认是原窗口跳转）表示跳转的窗口
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<a href="http://www.4399.com/" title="play" target="">4399</a>
	<hr>
	<a href="2.html" target="_self,_blank">the second</a>
	<hr>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

特别注意

  • 下载文件（桌面文件模拟）
  • 将桌面文件（home）打包成（home.zip）
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<a href="home.zip">下载压缩包</a>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

是我来晚了！
关注
专栏目录
前端 HTML （简单了解）
qq_64121593的博客
07-30 1322
新手小白简单了解HTML~
[前端]前端|HTML介绍
m0_46233342的博客
02-05 763
文章目录前端介绍前端：前端技术栈：前端关注方面：前端边界？开发环境HTMLHTML语法HTML标签标题h1~h6 :一级标题~六级标题列表:链接多媒体（图片/音频/视频）表单类控件--输入文本内容划分语义化是什么谁在使用我们写的HTML：语义化的好处：如何做到语义化?plus:总结 前端介绍 前端： 前端工程师是使用web技术栈解决多端图形用户界面交互问题的工程师 ​ 解决GUI人机交互问题； ​ 跨终端（PC/移动浏览器；客户端/小程序；YR/AR等）； ​ Web技术栈（html/css/js/HTT
HTML简单介绍
07-17 222
　　　　　　　　HTML是什么？　　　　　　　　 HTML语言用于描述网页 HTML是指超文本标记语言：HyperTextMarkupLanguage HTML不是一种编程语言，而是一种标记语言，标记语言是一套标记标签 HTML使用标记标签来描述网页，HTML的文档包含了HTML标签以及文本内容，文档也称作web页面 　　　　　　　　HTML标签　　...
【前端之HTML的基本介绍】
qq_44735180的博客
05-04 446
本章主要介绍了HTML的基本介绍：Html定义、Html特点、Html字符集、Html常见实体、Html整体结构、Html参考教程链接。从多角度对html有个全面的了解。
【前端基础】HTML介绍
foyboom的博客
10-03 903
HTML是什么？Hyper Text Markup Language 超文本标记语言，可以用两个关键词概括重点：标签、结构。（其中超文本指超链接，使用超链接可以从一个页面跳转到另一个页面。）
基于html5的web前端设计（旅游景点介绍）
01-01
【标题】：“基于HTML5的Web前端设计（旅游景点介绍）” HTML5是现代Web开发的核心，它在传统的HTML4基础上引入了许多新特性，增强了网页的交互性和动态性。在这个项目中，我们主要关注如何利用HTML5进行网页设计，...
前端 Html5的介绍
07-19
一个关于入门级别的Html5的简单认识 欢迎大家来观看
Web前端网页设计作业-个人网页(html+css+javascript)
07-13
在本项目中，"Web前端网页设计作业-个人网页(html+css+javascript)"是一个适合初学者的实践项目，旨在帮助学习者掌握Web前端开发的基本技能。这个项目包含了多个页面，如个人主页、个人博客、轮播相册、魔方相册、...
旅游网站前端页面（css，html）
06-07
在描述中提到的“旅游网站前端页面”，HTML文件会包含各种元素，如标题、段落、链接、图像、表单等，用于展示旅游相关的资讯，如目的地介绍、旅行套餐、用户评论等。例如，一个典型的HTML文件可能会有`index.html`，...
团队服务介绍网页模板_html5 bootstrap 响应式模板UI前端源码.rar
08-01
【标题】中的“团队服务介绍网页模板_html5 bootstrap 响应式模板UI前端源码”表明这是一个用于创建团队服务展示网站的HTML5模板，结合了Bootstrap框架和响应式设计，适用于UI前端开发。这个模板提供了源码，允许...
前端HTML（第一篇+入门级）
最新发布
老高的博客
06-29 737
h4 {
前端学习笔记之HTML简介及标签介绍
谦谦君的博客
02-10 335
一：HTML简介 一：什么是HTML？ 超文本标记语言（HyperText Markup Language，简称 HTML） HTML 是一门标记语言，标记语言由一套标记标签组成，学习 HTML，其实就是学习标签 二，HTML的基本结构 三：HTML基本模板 < !DOCTYPE html >标签的作用：在html文件最前面进行声明，定义文档类型，告知浏览器用html何种规范去解析...
html通俗简介,前端基础知识整理（html篇）
weixin_30456235的博客
06-09 297
HTML是前端技术中基础的基础，虽然很简单，但是前端写的好坏区别在于是否充分理解了语义化。语义化: 说的通俗点就是：明白每个标签的用途(在什么情况下使用此标签合理)比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。语义化的好处：1.更容易被搜索引擎收录。2.更容易让...
前端中的&nbsp；
热门推荐
anderlaw的博客
04-27 3万+
nbsp的全称是：no breaking space,意为非截断空白符，该符号与前后单词合并为一个单词，不应该被截断,除非设置cssword-break:break-all;。 HTML中的应用 html会将多余的空白符合并为一个，如果需要在html里添加多余一个空白，就可以使用&nbsp; 除了在内容里添加空白以外，还可以发挥非截断的效用 比如，这里有一个段落 <p>Hello,everyone,my name is he zebing</p> 当盒子空间狭小时会发生.
web&nbsp;前端&nbsp;&nbsp;input&nbsp;&nbsp;验证
海内存知己
06-23 1942
/jquery验证邮箱 function checkSubmitEmail() { if ($("#email").val() == "") { //$("#confirmMsg").html("邮箱地址不能为空！"); alert("邮箱不能为空!") $("#email").focus(); return false; } if (!$("#email").va
前端学习：HTML（一）简介 Introduce
punisher1900的博客
09-06 249
菜狗的HTML学习笔记
前端开发的必须知道的css 效果
09-27 388
CSS可以改进网站的设计并且开拓网站设计更多的可能性，可以令你的网页更具吸引力。对于前端开发者、网站设计师来说，掌握并熟练应用CSS是一项必不可少的技能。  　　下面列出了一些非常实用的CSS3属性和使用技巧，希望能够为你的开发、设计工作带来一些帮助。  　　1、圆角效果 　　如今的Web设计在不断跟进最新的开发技术，纷纷采用HTML5来开发多样性的Web应用。HTML5的优势之
HTML特殊字符
屈帅波的技术博客
05-09 439
1 注释 如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的文字，就需要使用注释标签。 HTML 中的注释以：<!-- 开头，以 --> 结束。 <!-- 注释语句 --> 一句话：注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的。 注释是为了更好地解释代码功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。 2 特殊字符 在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
前端HTML空格转义符总结
君临天下
04-11 3万+
HTML提供了5种空格实体（space entity），它们拥有不同的宽度。 非断行空格（&nbsp;）是常规空格的宽度，可运行于所有主流浏览器。 其他几种空格（&ensp; &emsp;&thinsp;&zwnj;&zwj;）在不同浏览器中宽度各异。 &nbsp; 它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的...
HTML前端课设展示：家乡特色网页介绍
对于一个介绍家乡的Web课设，HTML基础将被用来创建网页的骨架，包括： - **标签（Tags）**：如`<html>`, `<head>`, `<body>`, `<h1>`至`<h6>`用于标题，`<p>`用于段落，`<a>`用于链接，`<img>`用于图片等。 - **...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是我来晚了！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值