初认识HTML

最新推荐文章于 2021-10-04 09:55:26 发布
最新推荐文章于 2021-10-04 09:55:26 发布
阅读量334 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45366028/article/details/102604486
版权

先了解什么是HTML：

1. html又称为超文本标记语言（英文：HyperText Markup Language，HTML）HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆·伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。

2. HTML是一种文本类，由浏览器解释执行的标签语言，用于编写通过WWW显示的超文本文件，具有平台无关性。

在这里插入图片描述

HTML的开发环境

开发环境：
记事本工具即可、vim、sublime、ueditor、notepad++、EditPlus、IDE、webstorm、hbuilder、vscode
运行环境：
浏览器（chrome浏览器 火狐浏览器）：浏览器是专门用于执行HTML的文件，以及查看HTML的源代码的一种软件。
浏览器执行HTML的方法有两种：1.双击鼠标HTML的文件来执行和通过浏览器地址栏输入HTML的文件的URL来执行。

HTML常用基本标签

一· 基本语法格式

<!doctype html>
	<html>
		<!--
				html标签是页面的根标签，表示页面的根
				HTML有两个子标签
					head 部分，主要用来包裹页面的不可见部分，
					主要做页面是属性设置
					body 部分，表示页面的内容部分
		 -->
		<head>
			<title>页面的标题</title>
		</head>
		<body>
			页面的内容部分
		</body>
	</html>

二· 常用的基本标签
学习了基本的语法格式，接下来就可以运用基本的语法标签。
第一个标签 ： < title>
该标签的作用有两个：一是设置网页的标题，二是给搜索引擎索引。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件标题</title>
</head>
<body>
	
</body>
</html>

第二个标签： < meta http-equiv=“refresh” content=“3”; url=http://www.baidu.com>
语法说明： refresh表示刷新 conten：表示设置间隔秒数以及跳转网址

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="refresh" content="3"; url=http://www.baidu.com>
	<title>跳转</title>
</head>
<body>
	
</body>
</html>

页面的主题标签< body> 标签
1.第一个标签 ： 设置网页正文颜色与背景颜色。
< body bgcolor=“颜色” text=“颜色” >
bgcolor：表示背景颜色
text：表示正文颜色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>网页颜色</title>
</head>
	<body bgcolor="#336699" text="white">
</body>
</html>

2.添加背景图片
< body background=“url” >
URL：表示路径
3.设置网页边距
< leftmargin=“边距值” rightmargin=“边距值” topmargin=“边距值” bottommargin=“边距值”>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>页边距设置</title>
</head>
	<body leftmargin="边距值" rightmargin="边距值"  topmargin="边距值" bottommargin="边距值">
</body>
</html>

文字与段落标签
空格标签： &nbsp；
1.标题字设置
用法： < hn>标题字< /hn>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>标题字</title>
</head>
<body>
	<h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
</body>
</html>

2.加粗字体:
用法： 通过 < strong >文字</ strong>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>标题字</title>
</head>
<body>
	<p><strong>加粗语句</strong></p>
</body>
</html>

段落标签：
< p>段落内容< /p>
基本用法：< p align=“对齐方式”>段落内容< /p>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>标题字</title>
</head>
<body>
	<p>段落内容,这是第一行文本</p>
</body>
</html>

换行标签：< br>
是一个单标签，在XHTML在< br>中加一个反斜线表示结束

列表标签
有序列表：
< ol>
< li>列表一< /li>
< li >列表二< /li>
< li>列表三< /li>
< /ol>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>创建有序列表</title>
</head>
<body>
	<p>段落内容,这是第一行文本</p>
	<ol>
 	<li>列表一</li>
	<li >列表二</li>
	<li>列表三</li>
	</ol>
</body>
</html>

有序列表前导符：
< ol type=“前导符”>
前导符分别可取： 1.A，a,I,i
无序列表：
< ul >
< li>列表一< /li>
< li >列表二< /li>
< li>列表三< /li>
< /ul>
daima:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>创建无序列表</title>
</head>
<body>
	<p>段落内容,这是第一行文本</p>
	<ul>
 	<li>列表一</li>
	<li >列表二</li>
	<li>列表三</li>
	</ul>
</body>
</html>

网页常用图片格式：
插入图片：
< img src=“图片的位置”>
设置图片的大小：
< img src=“图片的位置” width=“宽度” height=“高度”>
注意:src属性指的是需要插入的文件路径，这是一个毕设属性。

在网页中嵌入多媒体：
使用 ==< video >==嵌入多媒体内容
< video>和< audio>是HTML5中新增加的标签，其中< video>用于网页嵌入音频，视频，< audio>网页中嵌入音频
< video src=“file_url”>< /video>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>使用Video标签</title>
</head>
<body>
	<p>使用Video标签嵌入MP4视频</p>
	<video  src="恰似你的温柔-蔡琴.mp4">
	</video>
</body>
</html>

使用 ==< video src=“file_url”> ==标签嵌入音频

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>使用audio标签</title>
</head>
<body>
	<p>使用audio标签嵌入MP3音乐</p>
	<video  src="flash/song.mp3">
	</video>
</body>
</html>

设置超链接：
超链接标签： < a href = “目标断点”>原端点< /a>
语法说明： 源端点可以是文本，也可以是图片，目标端点制定了超链接的URL
用户点击源端点后，页面将跳转到目标端点。
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>创建基本的超链接</title>
</head>
<body>
 	<a href="welcome.html">我的第一个超链接</a>
</body>
</html>

然后welcome.html的页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>welcome.html</title>
</head>
<body>
 	<h1>恭喜你超链接设置成功</h1>
</body>
</html>

设置超链接的目标窗口：
基本语法 < a href = “目标断点” target=“目标窗口名称”>原端点< /a>
-blank 新打开一个窗口链接文档
-self同一个窗口

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>设置链接窗口</title>
</head>
<body>
 	<p><a href="http://www.baidu.com" target="_self">我的第一个超链接</a></p>
 	<p><a href="http://www.163.com" target="_blank">我的第二个超链接</a></p>
</body>
</html>

表格：
表格包含三个部分：行，列，单元格
表格基本语法
< table>
< tr>
< td>
…
< /tr>
< /table>
需要注意的是：一个< tr>标签包含一个或者多个< td>标签对，需要注意的是，所有需要在表格中显示的内容包括嵌套表格都是放在单元格<.td>标签对之间的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	
	<title>设置表格基本结构</title>
</head>
<body>
 	<table>
		<tr>
			<td>第一行第一个单元格</td>
			<td>第一行第二个单元格</td>
			<td>....</td>
		</tr>
		<tr>
			<td>第二行第一个单元格</td>
			<td>第二行第二个单元格</td>
			<td>....</td>
		</tr>
	</table>
</body>
</html>

设置表格的边距：
格式 < table cellpadding=“边距值”>
设置表格的间距
格式 < table cellspacing=“间距值”>
跨行跨列操作：
格式 < td rowspan=“所跨行数” clospan=“所跨列数”>
通过代码实现：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>工商银行电子汇款单</title>
</head>
<body>
	<h1>工商银行电子汇款单</h1>
	<table border="1" width="800" cellspacing="0">
	<tr>
		<th colspan="2">回单类型</th>
		<td>网上转账汇款</td>
		<th colspan="2">指令序号</th>
		<td>HQH0000000000000013878172</td>
	</tr>
	<tr>
		<td rowspan="4" width="5"><b>收款人<b></td>
		<td>用户</td>
		<td>老</td>
		<td rowspan="4" width="5"><b>付款人<b></td>
		<td>用户</td>
		<td>老刘</td>
	</tr>
	<tr>
		<td><b>卡号<b></td>
		<td>000000000001</td>
		<td><b>卡号<b></td>
		<td>000000000002</td>
	</tr>
	<tr>
		<td>地区</td>
		<td>南京</td>
		<td><b>地区<b></td>
		<td>杭州</td>
	</tr>
	<tr>
		<td><b>网点<b></td>
		<td>工商江苏南京业务处理中心</td>
		<td><b>网点<b></td>
		<td >江苏徐州业务中心</td>
	</tr>
	<tr>
		<th colspan="2">币种</th>
		<td>人名币</td>
		<th colspan="2">钞汇标志</th>
		<td>钞票</td>
	</tr>
	<tr>
		<th colspan="2">金额</th>
		<td>1.00</td>
		<th colspan="2">手续费</th>
		<td>0.55</td>
	</tr>
	<tr>
		<th colspan="2">合计</th>
		<td colspan="4">人名币</td>
	</tr>
	<tr>
		<th colspan="2">交易时间</th>
		<td>2017年6月1日</td>
		<th colspan="2">时间戳</th>
		<td>2017-06-01-13.0000.00000</td>
	</tr>
	</table>
	<p>票据打印时间 ： 2017-06-01 15：00：12</p>
	<p><del>票据打印单位:江苏徐州业务中心</del></p>
	<p>操作员：大曹</p>
</body>
</html>
蜗牛也要奔跑
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
认识HTML
小脚的Blog
10-08 149
1.什么是HTML HTML是HyperText Markup Language(超文本标记语言)的简写，不是一种编程语言 ，而是一种标记语言，用于告诉浏览器如何构造页面。由一系列HTML元素组合成Web开 发人员想要的简单或者复杂的页面,用于搭建页面骨架。特点是语法简单，容量小，功能强大。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML 也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件 本身是一种文本文件，通过在文本文件中...
初步认识HTML
qq_43494997的博客
02-19 320
一：工具准备 工具推荐使用vscode： 下载地址： ================官网地址 ================ ================百度网盘 ================ 使用默认的扩展程序下载，箱子下载所需要的开发工具 这里给出笔者订阅的扩展程序： 二：认识HTML ①HTML基本语法： 一个HTML文档由一系列元素组成。HTML元素指的是从开始标签到结...
HTML标记语言篇--学习笔记01
weixin_30276935的博客
01-06 171
HTML标记语言篇 第1章 HTML基础 1.1 基本概念 WWW 是“World Wide Web”（全球广域网）的缩写，简称为Web，中文又称为“万维网”。 HTML（Hypertext Markup Language，超文本标记语言）是一种文本类、解释执行的标记语言，用于编写要通过WWW显示的超文本文件，称为HTML文件，也叫Web页面或网页。扩展名为.html或.htm 。HTM...
对HTML的认识
weixin_51654260的博客
12-02 1595
一、HTML的介绍 1、HTML的概述： html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。 超文本：音频，视频，图片称为超文本。 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。 作用：HTML是负责描述文档语义的语言。 注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解
html是一种纯文本类型语言,HTML学习(一)
weixin_31349647的博客
06-08 940
一、什么是HTML？HTML 是用来描述网页的一种语言。1、HTML指的是超文本编辑语言；2、HTML本身并不是一种编辑语言，而是一种标记语言(标记语言本事是用来被读取的，没有行为能力，是被动的；但是编程语言中有很多逻辑和行为能力的指令，是主动的)；3、标记语言是一套标记标签，HTML 使用标记标签来描述网页；4、HTML文档包含 HTML标签和纯文本， 也被称为网页；二、什么是HTML标签1、H...
初识HTML
m0_54202121的博客
10-04 377
一.css核心基础 1.css样式规则 选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；} 在书写css样式时，除了要遵守css样式规则，还必须注意以下几个特点： 1.css样式严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器，属性和值”都采用小写的样式。 2.多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加信仰是最好保留。 3.如果属性的值由多个单词组成且中间有空格，则必须为这个属性值加上英文状态下的引号。 <!--m
html-css基础复习.md
02-04
css html 基础复习，已经基础样式选择器 快速认识css html 初略领略div+css 的魅力 ！
儿童节快乐.html（祝所有儿童，儿童节快乐）
06-03
历史上，儿童节的起源可以追溯到19世纪末和20世纪初，当时人们开始认识到儿童是一个特殊的群体，需要受到特别的保护和照顾。随着时间的推移，儿童节逐渐成为国际性的节日，被越来越多的国家和地区所认可和庆祝。 在...
DOM初体验，认识DOM
12-19
文档对象模型——Document Object Model DOM可以视为一种API的应用 将文件视为一个文件对象，...HTML DOM 定义了访问和操作HTML文档的标准方法。 HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
HTML5_CSS3网页布局和样式精粹
08-28
对于初入门的网页设计者和开发者而言，学习网页设计和开发就应该从html5和css3开始，这是毋庸置疑的。对于有经验的工程师来说，如果想完整掌握html5和css3新技术，那么《HTML5+CSS3网页布局和样式精粹》是最合适不过...
Pagina-Dia-internacional-de-la-tierra:这是由国际地球日实现DHTML所创建的网页
04-29
DHTML是90年代末到21世纪初的一种前端开发技术，它结合了HTML、CSS、JavaScript以及DOM（文档对象模型），使得网页能够具有动态交互性和实时更新的能力。DHTML使得网页不再只是静态展示信息，而是可以通过用户交互来...
html是一种标记语言 由什么解释执行,HTML是一种标记语言，是由__解释执行的。...
weixin_36462640的博客
05-31 644
根据短文内容，从短文后的选项中选出能填入空白处的最佳选项。选项中有两项为多余选项。Everyone knows that fish is good for health.16But it seems that many people don’t cook fish at home. Americans eat only aboutfifteen pounds of fish per person ...
html是什么
Ambition_yugurt的博客
07-26 2768
如图我们所学习的语言一样，在编程的世界里，也有各种各样的语言，常见的web前端语言有html、css、JavaScript等，服务端语言有php、java、c#等等。那么html是什么呢？就让朗沃小编来为你解答。 1、html是什么 html又称为超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1.
HTML初步认识
darkcode007的博客
12-16 2396
HTML初步认识本篇博客给大家带来html最基础的东西，也就是初步认识html，打算从以下几个方面给大家介绍： 认识什么是纯文本文件txt HTML是负责描述文档语义的语言 HTML骨架和基本语法 可能大家会认为这纯文本文件和html没啥关系吧，我要告诉大家的是，虽然这的确和html没多大关系，但对纯文本文件的理解有助于更加深刻的去理解html，好，接下来我将一一给大家介绍关于html初步认识的这三
html css js网页设计
最新发布
07-12
HTML、CSS和JavaScript是构建网页和网站的基本技术，它们共同工作来创建和设计用户界面。下面是关于这三种技术的详细介绍： ### HTML (HyperText Markup Language) - **定义**：HTML是构建网页内容的标准标记语言。 - **作用**：用于创建网页的结构和内容，如段落、链接、图片、表格等。 - **语法**：使用标签（如 `<p>`, `<div>`, `<a>`, `<img>` 等）来定义网页元素。 ### CSS (Cascading Style Sheets) - **定义**：CSS是一种样式表语言，用于描述HTML文档的呈现方式。 - **作用**：用于设置网页的布局、颜色、字体和其他视觉元素。 - **语法**：通过选择器（如 `p`, `.myclass`, `#myid` 等）应用样式规则。 ### JavaScript - **定义**：JavaScript是一种脚本语言，通常用于网页上实现交互功能。 - **作用**：允许网页与用户进行交互，如响应用户操作、动态更新内容、动画效果等。 - **语法**：Java
基础资料之html笔记
04-03
HTML是一种用于描述网页的语言，它并不是一种编程语言，而是一种标记语言。标记语言是一套标记标签的集合。HTML使用标记标签来描述网页，标签通常被称为HTML标签，由尖括号包围的关键词组成，比如<html>。HTML标签...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值