HTML开发概述知识点

最新推荐文章于 2024-09-07 10:36:26 发布

柒烨带你飞

最新推荐文章于 2024-09-07 10:36:26 发布

阅读量173

点赞数 1

分类专栏： HTML入门+实战小案例开发文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_61643743/article/details/130952510

版权

HTML入门+实战小案例开发专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文介绍了HTML的基础知识，包括文本标签元素如字体、标题、段落，超链接的target、rel和id属性，以及图像和表格的使用。还提到了通用元素的样式设置，如背景色和字体。文章强调了HTML的style属性在设置样式中的作用，并提醒读者一些过时的标签和属性应避免使用。

摘要由CSDN通过智能技术生成

✍作者：柒烨带你飞
💪格言：生活的情况越艰难，我越感到自己更坚强；我这个人走得很慢，但我从不后退。
📜系列专栏：HTML入门 + 实战小案例

前言

HTML(Hyper Text Markup Language)
网页是一个包含HTML标签的纯文本文件网页
是一个在互联网上显示的页面文档(Web文档)，

<!DOCTYPE html> <!-- 声明HTML的版本-->
<html lang="en"> <!--表明这是按照HTML规范来书写的HTML文档。-->
<head> <!--用于描述页面的头部信息-->
	<meta charset="utf-8"> <!--设置页面的编码格式,如果不明确指定编码格式，浏览 器很有可能将中文处理为乱  码-->
	<title>主页</title><!--用于设置页面的标题。-->
	</head>
	
<body> <!--文档的主体，显示页面的区域-->
	
	</body>
</html>

一，HTML常用元素和属性

</>，<></>有开始标签和结束标签的是html元素
没有的都是属性，如：body元素后面的bgcolor就是属性
<body bgcolor=""> 设置页面背景颜色

1，文本标签元素

	<font size="5" face="微软雅黑">你好，大号字体</font><br/>
	<font size="5" color="blue">你好，蓝色字体</font><br/>
	<font size="5" color="#8a2be2"><b>hello world</b></font><br/> <!--嵌套标签-->
	font后面会被弃用不赞成使用，建议使用统一样式
	
	<h1>1</h1> <!--标题h1-h6-->
	<i>斜体</i><br/>
	<b>粗体</b><br/>
	<strong>强调,也是粗体</strong><br/>
	
	<p>标记</p> <!--一个段落,块元素-->
	
	<span>标记</span><!--对文本中的字体应用样式-->
	&nbsp; 不换行空格
	<hr/> 添加一条水平线
	<br/> 换行

2，超链接

1. HTML 链接-target属性

使用 target =" "属性，你可以定义被链接的文档在何处显示。
<a>标签的 target 属性规定在何处打开链接文档。
下面的这行会在新窗口打开文档：

<a href="https://www.runoob.com/" target="_blank" >访问菜鸟教程!</a>
 _black 值就是表示打开一个新窗口
 还有其他值，可以去官方文档查询

2. HTML链接 rel属性

用于描述链接之间的关系
rel属性通常用来描述链接之间的关系，也就是说目的地址(href) 跟源（站点）之间的关系
rel是relationship的英文缩写

<a href="https://www.runoob.com/" target="_blank" rel="index">访问菜鸟教程!</a>
index表示链接的关系是文档索引
还有其他值，可以去官方文档查询，描述链接之间的关系，有助于SEO和各网页权重有好处

2. HTML 链接- id 属性

id 属性用于为 HTML 元素指定唯一的 id
在链接里面id属性可以用于创建一个html文档书签
用法：

在一个文档中添加<a id="tips">文档一部分内容</a>
然后添加一个链接，可以直接链接到，添加id属性这边
<a herf="#tips">链接到文档一部分内容</a>

<a href="1.计算机网络概述.pdf">计算机网络pdf</a> 
	<a href="tel:44545">拨打电话</a>
	<a href="sms:44545?body=你好，很高兴认识你">给作者发短信</a>
	<a href="mailto:...@qq.com">给作者写邮件</a>
	<a href="https://www.woniuxy.com/note/938">学院文化</a>
	<a href="https://www.woniuxy.com/note/#938">学院文化</a><!--加#号是访问上一级网页-->
			
<!--超链接除了可以链接网页网址和图像，还可以直接利用超链接发送邮件，发送短信，或拨打电话 手机上适用-->

3，图像

<img src="URL" alt="预备替换文本" />
<img src="URL" alt="预备替换文本" width=""heght="" /> 设置高度与宽度
<body background="URL"> 设置页面背景图
<a href="url"><img src="url" alt="预备替换文本"></a> 给图片加上超链接

<img src="URL" alt="预备替换文本" align="对齐方式" /> 图像文本排版

align	描述
align=	"left"对齐左边
align=	"right"对齐右边
align=	"middle"中央对齐
align=	"top"顶部对齐
align=	"bottom"底部对齐

4，表格

<table></table> 表格
	<thend bgcolor=""></thend>页眉 + 背景色
	<tr></tr>行  
		<td></td>单元格 rowspan="" 合并行 colspan="" 合并列
	border="" 边框
	cellspacing="" 单元格间距
	cellpadding="" 单元格填充
	bgcolor="" 单元格背景色
	height="" 高度
	width="" 宽度
	align="" 排列对齐 左中右
	valign="" 垂直对齐 上中下

5，通用元素样式设置

1，HTML 的 style 属性

提供了一种改变所有 HTML 元素的样式的通用方法。
style可以设置背景

<body style="background: #F7E606">
	<p style="background-color:green">你好呀</p>

style可以设置字体颜色和尺寸

	<h1 style="font-family:verdana">hello world</h1>
	<p style="font-family:arial;color: red;font-size: 40px;">my car</p>

style可以设置文本对齐

	<h1 style="text-align: center">This is a heading</h1>

下面这些标签和元素，不赞成使用，在未来的html和xhtml，这些标签元素和属性将被废弃
在这里插入图片描述

HTML4.01
XML + HTML4.01 = XHTML1.0
HTML5 XHTML
XHTML就是比html4.01更加严格讲究标准的一个版本
Xhtml可以理解为html+xml，就是用xml的语法来规范html。其实早期html语言是比较散漫的，像<p>1234532是可以被游览器正常解析的。后来就利用XML将html语言规范化，结构化
XHTML 1.0 是 XML 风格的 HTML 4.01。
HTML5 是下一代 HTML，取代 HTML 4.01
HTML和XML区别与联系
 区别与联系
 XML与HTML两种标记语言之间的区别 - 闪电博

博主的其他系列专栏📜📜📜