HTML基础（上）

最新推荐文章于 2023-09-22 21:26:35 发布

朝阳…晚霞

最新推荐文章于 2023-09-22 21:26:35 发布

阅读量272

点赞数 2

分类专栏： web前端文章标签： html

本文链接：https://blog.csdn.net/qq_45331873/article/details/109487941

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

新手入门之HTML简介

1. HTML语法规范

1.1 基本语法概述

 HTML标签是由尖括号包围的关键词，例如<html>。
 HTML标签通常是成对出现的，例如<html>和</html>，我们称之为双标签，标签对中的第一个标签是开始标签，第二个是结束标签。
 有些特殊的标签必须是单标签，例如<br/>,称之为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系

 		包含关系：
 			<head>
 				<title> </title>
 			</head>
 		并列关系：
 			<head> </head>
 			<body> </body>

2. HTML基本结构标签

2.1第一个HTML网页

每个网页都有一个基本的结构标签（也称之为骨架标签），页面内容也是在这些基本标签上书写。 HTML页面也称之为HTML文档。

 	<html></html>——————HTML标签————页面中最大的标签，我们称之为根标签
 	<head></head>——————文档头部————注意在head标签中我们必须要设置的标签是title
 	<title></title>————文档标题————让页面拥有一个属于自己的网页标题
 	<body></body>——————文档主题————元素包含文档的所有内容，页面内容基本都在body中
 	
 	<html>
 			<head>
 				<title>我的第一个页面</title>
 			</head>
 			<body>
 				欢迎观看朝阳...晚霞CSDN博客
 			</body>
 	</html>

3.开发工具

	visual studio code （VScode）
		！即可以默认创建html骨架
	VScode使用
		1.双击打开软件
		2.新建文件（Ctrl+N）
		3.保存（Ctrl+S），注意保存为html文件
		4.Ctrl+加号键，Ctrl+减号键 可以缩小放大试图
		5.生成骨架结构 ！+Tab
		6.右键选择 open in defult browser浏览器打开

3.1 文档类型声明标签

    - <!DOCTYPE> 文档类型声明，作用是告诉浏览器使用哪种HTML版本显示网页

	- <!DOCTYPE html> 这句话是告诉当前采用的是HTML5版本来显示网页

	注意:
				1.<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前

				2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签

3.2 lang语言种类

用于定义当前文档显示的语言

 	1.en定义语言为英文
 	2.zh-CN定义为中文
 	简单来说定义为en就是英文网页，zh-CN就是中文网页，对于文档显示来说，en也可以显示中文，zh-CN也可以显示英文
 	3.fr定义为法语

3.3 字符集

 	字符集（Character set）是多个字符的集合，以便计算机能够识别和存储各种文字。
	在<html>标签中，可以通过<meta>标签的charset属性规定HTML文档应该使用哪种字符编码
   				<meta charset="UTF-8" />
	charset常用的值有：GB2312(简体中文)、BIG5(繁体中文)、GBK(简体和繁体中文)、UTF-8(万国码，基本包含全世界所有需要的字符)

4. HTML常用标签

4.1 标签语义

根据标签的语义，在合适的地方添加一个合理的标签，可以使页面结构更清晰

4.2标题标签

		HTML提供了6个等级的网页标题，即<h1> - <h6>。
		例如：
			<h1> 我是一级标题 </h1>
			h是单词head的缩写，意为头部、标题。
			标签语义：作为标题使用，并且依据重要性递减。

4.3段落和换行标签

4.3.1 段落

	在网页中能够将文字有条理的显示出来，将这些文字分段的显示。在HTML标签中，<p>用于定义段落
	例如：
			<p>我是一个段落标签</p>
			单词paragraph的缩写，意为段落。

4.3.2 换行

	HTML中，一个段落中的文字从左到右依次排列，直到浏览器窗口的右端，然后才能换行，若希望在文字中强制换行，需要使用换行标签<br />。
	单词break的缩写，意为打断、换行
	标签语义：强制换行
	特点：
		1.<br />单标签
		2.<br />标签只是简单的换行，跟段落不一样，段落之间会存在间距

4.4 文本的格式化标签

		当文字需要设置粗体、斜体或下划线等效果，此时就需要文本格式化标签
		加粗——————<strong></strong>或者<b></b>
		倾斜——————<em></em>或者<i></i>
		删除线————<del></del>或者<s></s>
		下划线————<ins></ins>或者<u></u> 
		注：推荐使用第一种标签。

4.5 div和 span标签

		这两个标签是没有语义的，他们就是一个盒子，用来装内容
		例如：
			<div>这是头部</div>  (独占一行)
			<span>今日价格</span>
			注：div是分割，分区；span是跨度、跨距。

4.6 图像标签和路径

4.6.1 图像标签

			在HTML标签中，<img>标签用于定义HTML页面中的图像。
			例如：
				<img src="图片的URL"/>———————————————————————图片路径
				<img src="图片的URL" alt="图片显示失败"/>————替换文本，图像不能显示的文字
				<img src="图片的URL" title="图像提示"/>——————提示文本，鼠标放在图像上，显示的文字
				<img src="图片的URL" width="500"/>———————————设置图像的宽度
				<img src="图片的URL" height="500"/>——————————设置图像的高度
				<img src="图片的URL" border="500"/>——————————设置图像的边框粗细
			特点：
				1.图像标签可以拥有多个属性，必须写在标签后面。
				2.属性之间不分先后顺序，用空格隔开。
				3.属性采取键值对的格式，即属性="属性值"。

4.6.2 路径

	目录文件夹：就是普通文件夹，；里面放着页面需要的相关素材，如html文件、照片等。
	根目录：打开目录文件件的第一层就是根目录

4.6.2.2 路径

	1.相对路径
		以引用文件所在的位置为参考基础，而建立出的目录路径
		简单来书就是图片相对于HTML页面的位置		
		同一级路径————————图片文件位于html文件同一级
		下一级4.———/————图片文件位于html文件下一级
		上一级路径———../——图片文件位于html文件上一级
	2.绝对路径
		指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径————\

4.7超链接标签

		在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

4.7.1.链接的语法格式

			例如：
				<a href="跳转目标" target="目标窗口的弹出方式"> 文字或图像 </a>
				两个属性：
					href:用于指定链接目标的URL地址
					target:用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

4.7.2.链接的分类

			1.外部链接
				网站外部页面之间的相互链接
			2.内部链接
				网站内部页面之间的相互链接
			3.空链接
				如果没有特定的链接时，用空链接代替。
					<a herf="#">空链接</a>
			4.下载链接
				herf中的地址是一个文件或压缩包，会下载此文件
					<a herf="#img.zip">下载链接</a>
			5.网页元素链接
				文本、图像、表格、音频等都可以添加超链接。
					<a herf="http://www.baidu.com"><img src="img.jpg"></a>
					点击图片就可以跳转至百度
			6.锚点链接
				快速定位到当前页面中的某个位置
					首先，在链接文本的herf属性中，设置属性值为#名字的形式
						<a herf="#name">文字形式</a>
					其次，找到目标位置标签，里面添加一个id属性 = 名字，
						<h3 id="name">文字形式 </h3>

5. HTML中的注释和特殊字符

5.1 注释

		HTML中的注释以“<！--”开头，以“-->”结尾。可以用Ctrl+/即可快速注释

5.2 特殊字符

		<——————小于号——————&it;
		>——————大于号——————&gt;
		————————空格———————&nbsp;

朝阳…晚霞

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
HTML基础（上）

HTML基础（上）1. HTML语法规范1.1 基本语法概述1.2 标签关系2. HTML基本结构标签2.1第一个HTML网页3.开发工具3.1 文档类型声明标签3.2 lang语言种类3.3 字符集4. HTML常用标签4.1 标签语义4.2标题标签4.3段落和换行标签4.3.1 段落4.3.2 换行4.4 文本的格式化标签4.5 div和 span标签1. HTML语法规范1.1 基本语法概述 HTML标签是由尖括号包围的关键词，例如<html>。 HTML标签通常是成对出现的，例如
复制链接

扫一扫