✍作者:柒烨带你飞
💪格言:生活的情况越艰难,我越感到自己更坚强;我这个人走得很慢,但我从不后退。
📜系列专栏: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><!--对文本中的字体应用样式-->
不换行空格
<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两种标记语言之间的区别 - 闪电博
博主的其他系列专栏📜📜📜
创作不易,😊如果觉得文章不错或能帮助到你学习,可以点赞👍收藏📁评论📒+关注哦!留下你的看法和建议💕
我们下期见✍️