一、HTML简介

最新推荐文章于 2022-12-16 23:43:52 发布
最新推荐文章于 2022-12-16 23:43:52 发布
阅读量166 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Saber559/article/details/104483950
版权

###一、HTML简介

####1.HTML是什么？

HTML:hyper text markup language超文本**标记（标签）**语言

由各种标签组成，用来制作网页，告诉浏览器该如何显示页面

####2.作用

  • 制作网页，控制网页和内容的显示

  • 插入图片、音乐、视频、动画等多媒体

  • 通过链接来检索信息

  • 使用表单获取用户的信息，实现交互

####3.版本

W3C:world wide web consortium万维网联盟，制定Web技术相关标准和规范的组织，HTML就是由W3C制定的标准

两个版本：HTML 4.0.1、HTML5.0-----通常H5

官网：http://www.W3shcool.com.cn

####4.扩展名

HTML文档是以.html或.htm结尾

###二、HTML文档结构

####1.基本结构

#####1.1 简介

  • HTML标签是由尖括号括起来的关键词，如 ,通常是成对出现的，如

  • 以 为根标签，包含： 头部和 主体部分

  • 头部提供关于网页的相关信息，如标题、文档类型、字符编码、关键字等摘要信息

  • 主体部分提供网页的显示内容，真正显示在页面中的内容

  • 合理的进行缩进

  • 标签名不区分大小写，但是一般要用小写

#####1.2.开发工具

记事本notepad、sublime、Notepad++、Dreamweaver、VScode、Webstorm等

使用步骤：

  1. 新建文件(cltr+N)，然后保存（ctrl+s）,指定扩展名为.html
  2. 编写HTML代码
  3. 在浏览器中打开文件

使用技巧：

  • 先保存再写代码，否则代码无颜色提示

  • 创建一个文件夹，用于保存所有的网页内容，将文件夹拖拽到sublime中，便于管理

  • 显示/隐藏侧边栏

方式1:查看–>侧边栏–>显示/隐藏侧边栏

方式2:ctrl+K紧接着按B

  • 显示多栏

方式1：查看–>布局–>列数：2列

方式2：Alt+shift+2

#####1.3浏览器

常见的浏览器：IE浏览器微软、chrome谷哥浏览器、firefox火狐、safari苹果

浏览器的作用是读取html文件，并以网页的形式来显示

浏览器不会直接显示html标签，而是使用标签来解释网页的内容

####2.标签

#####2.1 标签的组成

一个完整的html标签的组成：

<标签名 属性名=“属性值”>内容</标签名>

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>标签</title>

	</head>

	<body bgcolor="red" text="blue">

		html从入门到精通!

	</body>

</html>

属性值要用

双撇号括起来，一般用双引号

#####2.2 标签的分类

根据标签是否关闭，分为，关闭型和非关闭型

  • 关闭型：有结束标签，即标签成对出现
<html></html>

<head></head>

<title></title>
  • 非闭闭型：没有结束标签
<meta>

<br>

<h1>.....<h6>

根据标签是否独占一行，分为块级标签和行级标签

  • 块级标签:显示为块状，独占一行
<h1>大家好</h1>

<hr>
  • 行级标签：在行内显示，可与其他内容在同一行显示
<span></span>

page3.png

2.3注释

注释在浏览器中是不会显示的，是用来标注解释html语句，但通过查看源代码的方式可以看到

语法：

<！--注释内容-->
2.4实体字符

也成为了特殊字符，用于显示一些特殊符号，如：<> & 空格等

语法：

常见的实体字符：

&it;		<	小于号		less tham
&gt;		<	大于号		great than
&nbsp;			空格	space 	在html中对于连续的空白字
&amp;		 	& 		与	
&quot;			""		双引号
&copy;					版权符号 copyright
&reg;			®		注册符号 register
&times;			×		关闭按钮
2.5文档类型

在html文档的第一行，使用<！DOCTYPE HTML>声明HTML文档的类型用来告诉浏览器页面的文档类型，简单来讲，用来指定html版本的规范

目前基本上最常用的是html5，<！DOCTYPE HTML>

三、常用标签
3.1基本标签
br换行标签非关闭型
p段落标签关闭型，块级标签，前后有明显的间隔
h1、h2、…、h6标题标签按照h1到h6逐渐变小,块级标签,
pre预格式化标签保留编码时的格式
          |              |                                    |

| | | |
| | | |

Saber559
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 简介
12-14
HTML 简介 HTML 实例   我的第一个标题 我的第一个段落。     实例解析 声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。 这是一个标题 这是一个...
HTML5 简介
12-13
HTML5 简介 HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。 HTML5的设计目的是为了在移动设备上支持多媒体。 HTML5 简单易学。 什么是 HTML5? HTML5 是下一代 HTML 标准。 HTML , HTML ...
HTML图片标签的标记属性作用讲解
中意你的博客
03-26 1万+
在编写HTML文件时，需要添加图片时，标准语法是：<img src = "图像URL（图像的文件路径和文件名）" /> <img /> 主要标记属性： 1.alt 图片添加alt属性时，如果添加的图片能够正常显示，则不会显示出效果，但是如果添加的图片因为某种原因而无法显示，则会将无法显示的图片替换成文字 2.title 鼠标箭头悬停在图片上时，将会显示出来的文字 3.w...
html标记语言的常用标签一
gfdonx的专栏
10-28 492
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> HTML结构及头文件 这是标题标签h1-h6 锚链接的使用 去锚点 font标签可以改变字体的大小及颜色还有字体 font标签可以改变字的大小颜色 用 表示空格 用"表示引
HTML是什么？HTML简介
ccc369639963的博客
01-22 1万+
HTML是什么？HTML简介 HTML 英文全称是 Hyper Text Markup Language，中文译为“超文本标记语言”，专门用来设计和编辑网页。 使用 HTML 编写的文件称为“HTML 文档”，一般后缀为.html（也可以使用.htm，不过比较少见）。HTML 文档是一种纯文本文件，您可以使用 Windows 记事本、Linux Vim、Notepad++、Sublime Text、VS Code 等文本编辑来打开或者创建。 每个网页都是一个 HTML 文档，使用浏览器访问一个链接（URL）
HTML简介
m0_56161893的博客
06-29 4817
HTML是：Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。 HTTP超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。 HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义...
使用HTML制作一个简单的个人主页
indulgexiaomei的博客
10-09 20万+
此网页我对html有了一个简单，初步的认识后制作的一个网页，主要目的是练习html的一些简单操作，由于时间关系，有很多做的不好，细节处理不到位的地方。 废话不多说，先来看效果 1、首页 这一个网页就是进行了网页背景、背景音乐、段落的处理、水平线以及超链接的简单练习。 2、我的相册 这一页主要是对大量图片进行一个排版的练习 3、我的计划 这一页主要是对文本有序无序以及表格内部的背景颜色等等的练习 4、我的家乡 这一部分是对段落、还有文本与图片结合的练习 5、我的故事 这个是对表格进阶版的练习，文字
用HTML/CSS制作一个美观的个人简介网页——学习周记1
weixin_54919878的博客
03-09 5万+
本文介绍了如何使用HTML制作个人简介的网页。主要内容包含html与css：背景、图片、透明框、标题与段落标题、布局、音频、链接等设置...
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)
xcLeigh
12-16 8万+
html简洁漂亮的个人简历,个人主页，个人简介网页版(源码)。一款非常简洁，亮丽的个人简介模板，适用于个人主页，个人简历等相关主题，界面分为个人信息，基本资料，专业技能，教育经历，工作经验等五个版块，支持扩张，具体效果见下面的原文链接，里面有视频和代码讲解。代码容易上手，下载后直接运行。
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
【HTML】做一个HTML的个人简介页面
Austin_Yan的博客
07-15 2万+
文章目录布局头像旋转文字排版绘制矩形禁用左右键和F12图片链接飘雪效果 我的hexo博客是看的大神教程一步步做的,然后所以我的about界面,也准备仿着大佬的做，之前根本没学过web的前端，只接触过xaml这种带标签的设计语言… 布局 设计这个东西还是比较难得,我就直接没有设计,布局是照着别人的抄的,虽然实现是自己实现的，但是如果还是侵权的话，联系我删除 大佬的about界面 最上层,旋转的头像、昵称、生日等信息 中间左半部分，技能和占比 中间右半部分，个人的简介 底部，图片链接 最底部，版权信息、博客链
HTML结构：自我简介网页
qq_45823118的博客
03-15 1万+
自我简介网页任务描述相关知识声明文档格式：DOCTYPE根元素：HTML元素头元素：head元素网页标题元素：title元信息元素：meta编码格式：charset描述：description关键词：keywords主体元素：body元素编程要求测试说明 任务描述 本关任务是编写一个自我简介网页，你将通过本任务理解一个HTML网页的完整结构，并了解如何让搜索引擎更好的找到你的网页。 显示效果如下图所示： 为完成以上网页制作，请大家认真阅读以下相关知识。 相关知识 学习了基本的HTML网页相关概念和属性，你
个人简介网页设计html源码
09-20
个人简介网页设计html 个人简介 是流行的 HTML 主题之一。
HTMl入门简介
01-08
其中，由于我们通常看到的网页都是以html为后缀名的文件，所以一个网页也可以成为一个HTMl文件。 HTML的定义 HTMl是一种超文本的标记语言，不是一种编程语言，它是用来描述网页的一种语言。所谓超文本，就是可以添加...
博主推荐HTML制作一个美观的个人简介网页（附源码）
05-13
HTML制作一个美观的个人简介网页，利用HTML制作一个美观的个人简介网页，可以在这个基础上修改自己的个人简介信息，然后直接使用，可以直接运行，兼容pc端web和手机端web；
“推荐系统”相关资源推荐
06-14
推荐了国内外对推荐系统的讲解相关资源
全渠道电商平台业务中台解决方案.pptx
06-14
全渠道电商平台业务中台解决方案.pptx
云计算企业私有云平台建设方案.pptx
06-14
云计算企业私有云平台建设方案.pptx
通过CNN卷积神经网络对盆栽识别-含图片数据集.zip
最新发布
06-14
本代码是基于python pytorch环境安装的。 下载本代码后，有个requirement.txt文本，里面介绍了如何安装环境，环境需要自行配置。 或可直接参考下面博文进行环境安装。 https://blog.csdn.net/no_work/article/details/139246467 如果实在不会安装的，可以直接下载免安装环境包，有偿的哦 https://download.csdn.net/download/qq_34904125/89365780 安装好环境之后， 代码需要依次运行 01数据集文本生成制作.py 02深度学习模型训练.py 和03pyqt_ui界面.py 数据集文件夹存放了本次识别的各个类别图片。 本代码对数据集进行了预处理，包括通过在较短边增加灰边，使得图片变为正方形(如果图片原本就是正方形则不会增加灰边)，和旋转角度，来扩增增强数据集， 运行01数据集文本制作.py文件，会就读取数据集下每个类别文件中的图片路径和对应的标签 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地
用html做一个公司简介
06-01
好的，以下是一个简单的公司简介网页的HTML代码示例： ``` <!DOCTYPE html> <html> <head> <title>公司简介</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>公司名</h1> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">公司简介</a></li> <li><a href="services.html">服务项目</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> </header> <main> <section> <h2>公司简介</h2> <p>公司简介内容...</p> </section> <section> <h2>公司历程</h2> <ul> <li>1990年：公司成立</li> <li>1995年：公司产品获得国家专利</li> <li>2000年：公司扩展市场，进军国际市场</li> <li>...</li> </ul> </section> <section> <h2>公司理念</h2> <p>公司理念内容...</p> </section> </main> <footer> <p>版权所有 © 2021 公司名</p> </footer> </body> </html> ``` 在这个示例中，我们创建了一个带有头部、主体和底部的基本网页结构。在头部中，我们定义了网站的标题和导航菜单。在主体中，我们使用`<section>`标签创建了三个不同的部分，分别包括公司简介、公司历程和公司理念的内容。在底部中，我们添加了版权信息。 您可以根据您的公司情况，修改上面的内容和链接，以符合您的需求。同时，您也可以使用CSS样式表来控制网页的样式和布局，使其更加美观和易于阅读。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值