HTML入门基础(1)
程序员文章站
2022-06-23 09:43:17
目录：怎么建立简单的网页认识基础标签创建一个最简单的网页HTML的基础知识基础标签html字体基础标签文字颜色设置文字的尺寸设置文字字体设置文字的格式（斜体，加粗，上标，小标，中标。）利用基础标签做一个简单的实现效果高级标签做一个链接图标怎么建立简单的网页认识基础标签 声明为 HTML5 文档 元素是 HTML 页面的根元素 元素包含了文档的元（meta）数据，如
目录：
一，怎么建立简单的网页
1. 认识基础标签
<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落
2. 创建一个最简单的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的网页</title>
</head>
<body>
<p>欢迎来到这里</p>
</body>
</html>
实现效果：
二， HTML的基础知识
1. 基础标签
标题标签号h1-h6
<h1>标题内容</h1> 一个页面建议只有一个h1
段落标签p，段内换行标签<br/>
<p>段落内容</p>
1),每个段落自动换行
2)，段落内的文字忽略连续空格也不会显示空格，
会将连续空格变成一个空格，会将段内的换行变成一个空格。
段内换行标签<br/>
1），单独出现的标签，直接结束。
空格字符 
2），特殊字符，全小写
例子
段内文字忽略连续 空格
也不会显示空行，且不会换行
<body>
<p>段内文字忽略连续 空格<br/>
<br/>
也不会显示空行，且不会换行
</p>
</body>
预留格式pre
定义预留格式的文本
文本中的空格和换行符都会被保留下来
例子
这是预留格式文本。它保留了 空格
和空行。
Pre标签很适合现实计算机代码
for i=1 to 10
Print i
Next i
<body>
<pre>
这是预留格式文本。它保留了 空格
和空行。
</pre>
<p> Pre标签很适合现实计算机代码</p>
<pre>
for i=1 to 10
Print i
Next i
</pre>
水平线标签<hr/>
注释标签<!--注释内容-->
1），注释可以跨行
（1）.html字体基础标签
1>. 文字颜色
html颜色代码点击查看
规则：
输入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的网页</title>
</head>
<body>
浅红色文字：<font color="#dd0000">网络人VS灰鸽子</font><br />
深红色文字：<font color="#660000">网络人VS灰鸽子</font><br />
浅绿色文字：<font color="#00dd00">网络人VS灰鸽子</font><br />
深绿色文字：<font color="#006600">网络人VS灰鸽子</font><br />
浅蓝色文字：<font color="#0000dd">网络人VS灰鸽子</font><br />
深蓝色文字：<font color="#000066">网络人VS灰鸽子</font><br />
浅黄色文字：<font color="#dddd00">网络人VS灰鸽子</font><br />
深黄色文字：<font color="#666600">网络人VS灰鸽子</font><br />
浅青色文字：<font color="#00dddd">网络人VS灰鸽子</font><br />
深青色文字：<font color="#006666">网络人VS灰鸽子</font><br />
浅紫色文字：<font color="#dd00dd">网络人VS灰鸽子</font><br />
深紫色文字：<font color="#660066">网络人VS灰鸽子</font><br />
</html>
效果实现：
2> .设置文字的尺寸
规则：
<font size="大小">内容</font>
size为1：<font size="1">HTML学习</font><br />
size为2：<font size="2">HTML学习</font><br />
size为3：<font size="3">HTML学习</font><br />
size为4：<font size="4">HTML学习</font><br />
size为5：<font size="5">HTML学习</font><br />
size为6：<font size="6">HTML学习</font><br />
size为7：<font size="7">HTML学习</font><br />
实现效果：
3> . 设置文字字体
规则：
<font style="font-family:字体">内容</font>
字型为宋体：<font style="font-family:宋体">网络人VS灰鸽子</font><br />
字型为楷体：<font style="font-family:楷体">网络人VS灰鸽子</font><br />
字型为黑体：<font style="font-family:黑体">网络人VS灰鸽子</font><br />
字型为隶书：<font style="font-family:隶书">网络人VS灰鸽子</font><br/>
实现效果：
4> .设置文字的格式（斜体，加粗，上标，小标，中标。）
常见设置
<B> </B> 粗体 HTML语言
<I> </I> 斜体 HTML语言
<U> </U> 加下划线 HTML语言
<TT> <TT> 打字机字体 HTML语言
<BIG> </BIG> 大型字体 HTML语言
<SMALL> </SMALL> 小型字体 HTML语言
<BLINK> </BLINK> 闪烁效果 HTML语言
<EM> </EM> 表示强调，一般为斜体 HTML语言
<STRONG> </STRONG> 表示特别强调，一般为粗体 HTML语言
<CITE> </CITE> 用于引证、举例，一般为斜体 HTML语言
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的网页</title>
</head>
<body>
<b>这是粗体文字</b><br>
<strong>这也是粗体文字</strong><br>
<i>这是斜体文字</i><br>
<em>这也是斜体文字</em>
<br>
<!-- — 上标格式标签为双标签<sup></sup>，多用于数学指数的表示，比如某个数的平方或立方。
— 下标格式标签为双标签<sub></sub>，多用于注释，以及数学的底数表示。
— 中划线标签为双标签<strike></strike>，多用于删除效果。 -->
a<sup>2</sup><br>
李白<sub>窗前明月光</sub><br>
<strike>窗前明月光</strike>
</html>
实现效果：
三，利用基础标签做一个简单的实现效果
代码实现效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>将进酒</title>
</head>
<body>
<h1 align="center" style="font-family: 楷体">将进酒</h1>
<p align="center"><font color="#000000" size="1" style="font-family: 楷体" ><pre> 【唐】.李白</pre></font></p>
<hr>
<p align="center"><font color="#AE0000" style="font-family: 楷体" size="3"><b>君不见，黄河之水天上来，奔流到海不复回。</b></font></p>
<p align="center"><font color="#AE0000" style="font-family: 楷体" size="3"><b>君不见，高堂明镜悲白发，朝如青丝暮成雪。</b></font></p>
<p align="center"><font color="#AE0000" style="font-family: 楷体" size="3"><b>人生得意须尽欢，莫使金樽空对月。</b></font></p>
<p align="center"><font color="#AE0000" style="font-family: 楷体" size="3"><b>天生我材必有用，千金散尽还复来。</b></font></p>
<p align="center">烹羊宰牛且为乐，会须一饮三百杯。</p>
<p align="center">岑夫子，丹丘生，将进酒，杯莫停。</p>
<p align="center">与君歌一曲，请君为我倾耳听。</p>
<p align="center">钟鼓馔玉不足贵，但愿长醉不复醒。</p>
<p align="center">古来圣贤皆寂寞，惟有饮者留其名。</p>
<p align="center">陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p align="center">主人何为言少钱，径须沽取对君酌。</p>
<p align="center">五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<hr>
<p align="center">
<b>
<font style="font-family: 楷体" size=2 color="#5E005E">
<pre >
【注释】
⑴将进酒：属汉乐府旧题。将(qiāng)：愿，请。 《将进酒》选自《李太白全集》。 这首诗大约作于天宝十一年(752)
。距诗人被唐玄宗“赐金放还”已达八年之久。当时，他跟岑勋曾多次应邀到嵩山(在今河南登封市境内)
元丹丘家里做客。
⑵君不见：你没有看见吗?是乐府体诗中提唱的常用语。君：你，此为泛指。
⑶天上来：黄河发源于青海，因那里地势极高，故称。
⑷高堂：在高堂上。另译为父母。
⑸朝：早晨。
⑹青丝：黑发。此句意为在高堂上面对明镜，深沉悲叹那一头白发。
⑺得意：高兴
⑻须：应当。 陆卓抗书法(2张)
⑼尽欢：纵情欢乐。
⑽千金：大量钱财。
⑾还复来：还会再来。
⑿且为乐：姑且作乐。
⒀会须：应当。
⒁岑夫子：指岑(cén)勋。
⒂丹丘生：元丹丘。二人均为李白的好友。
⒃杯莫停：译作“君莫停”。
⒄与君：给你们，为你们。君，指岑、元二人。
⒅倾耳：表示注意去听。
⒆钟鼓：富贵人家宴会中奏乐使用的乐器。
⒇馔(zhuàn)玉：美好的食物。形容食物如玉一样精美。馔，食物。玉，像玉一般美好。 ①不愿醒：也有版本为“不用醒”或“不复醒”。(现高中教材之人民教育出版社---普通高中课程标准实验教科书---中国古代诗歌诗歌散文欣赏中是----但愿长醉不愿醒) ②陈王：指陈思王曹植。
③平乐：平乐观，宫殿名。在洛阳西门外，为汉代富豪显贵的娱乐场所。
④恣(zì)：放纵，无拘无束。
⑤谑(xuè)：玩笑 。
⑥言少钱：译作“言钱少”。
⑦径须：干脆，只管，尽管。陆卓抗书法
⑧沽(gū)：通“酤”，买或卖，这里指买。
⑨五花马：指名贵的马。一说毛色作五花纹，一说颈上长毛修剪成五瓣。
⑩千金裘：价值千金的皮衣。将出：拿去。 尔：你们，指岑夫子和丹丘生。 销：同“消”。
万古愁：无穷无尽的愁闷。
</pre>
</font>
</b>
</p>
</body>
</html>
四，高级标签
1.超链接
超链接a
真实链接
<a href=“网址”>文字或图片</a> href超链的属性
虚拟超链接
<a href=“#”>文字或图片</a> 再点击时鼠标会变成一个小手，而并不 会跳转位置
img标签
图像的格式
JPG 有损压缩（打开的快又不失真，去掉一些不太关键的信息，保留起来 大部分有用的信息，这样不会影响到用户的观看效果），色彩丰富图片
GIF 简单动画，背景透明
PNG 无损压缩、透明、交错、动画。
插入图像 img
图片的位置默认为bottom
<img src=”w3school.gif”alt=”w3c”/ align="middle/top/bottom"> src属性：路径+文件名
Alt:再找不到图片时会返回alt所对应的文字
绝对路径的设置方式
以根本目录为基准
<img src=”C：\site\logo.gif”/>
相对路径
以该文档所在位置为基准
<img src=”logo.gif”/>
video视频标签基本操作
<video width="320" height="240" controls="controls">
<source src="2.mp4" type="video/mp4">
</video>
<source>New 定义了media元素的多媒体资源(<video> 和 <audio>)
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
属性：
controls 属性规定浏览器应该为视频提供播放控件。
如果设置了该属性，则规定不存在作者设置的脚本控件。
浏览器控件应该包括：
播放
暂停
定位
音量
全屏切换
字幕（如果可用）
音轨（如果可用）
autoplay 如果出现该属性，则视频在就绪后马上播放。
loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
scr 要播放的视频的 URL
preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
（1）.代码实现超链接：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级标签</title>
</head>
<body>
<a href="https://blog.csdn.net/pythonsnail/article/details/107238625"><font size="3" color="blue" style="font-family: 楷体">HTML颜色代码</font></a>
</body>
</html>
（2）.代码实现插入图片：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级标签</title>
</head>
<body>
<img src="1.jpg" alt="加载失败" width="200" height="200" align="bottom" />
</body>
</html>
（3）.插入视频
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级标签</title>
</head>
<body>
<video width="320" height="240" controls="controls">
<source src="2.mp4" type="video/mp4">
</video>
</body>
</html>
五，做一个链接图标
实现效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级标签</title>
</head>
<body>
<font size="1" color="blue" style="font-family: 楷体">QQ登陆，请点击</font>
<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&redirect_uri=http%3A%2F%2Fspcdp.cdposs.qq.com%2Fauth%2Fcallback&client_id=101477813&state=http%3A%2F%2Fspcdp.cdposs.qq.com%2F">
<img src="qq.jpg" alt="加载失败" width="25" height="12"></a>
</body>
</html>
本文地址：https://blog.csdn.net/pythonsnail/article/details/107232927
下一篇： flutter直接上传文件到阿里云oss