初识HTML5

最新推荐文章于 2024-07-10 01:10:22 发布

小平头＠king

最新推荐文章于 2024-07-10 01:10:22 发布

阅读量1.6k

点赞数 7

分类专栏： HTML+CSS3 文章标签： html css

本文链接：https://blog.csdn.net/weixin_53545557/article/details/112724108

版权

HTML+CSS3 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

一：创建第一个HTML5页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个网页</title>
	</head>
	<body>
		这是我的第一个HTML5页面哦
	</body>
</html>

<title></title>里面为标题
<body></body>里面为内容

显示结果
在这里插入图片描述

二：HTML5基础

1.HTML5文档的基本格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
	</head>
	<body>
	</body>
</html>

1.1`<DOCTYPE>`标记

<DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML标准规范，HTML5文档中的DOCTYPE声明非常简单，代码如下：

<!DOCTYPE html>

1.2`<HTML>`标记

<HTML>标记位于<!DOCTYPE>标记之后，也称为根标记，用于告知浏览器其自身是一个HTML文档。

1.3`<head>`标记

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后，主要用于封装其他位于文档头部的标记，例如<title> <link> <style>等。注意：一个HTML文档只能含有一对<head>标记

1.4`<body>`标记

<body>标记用于定义HTML文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本,图像，音频和视频等信息都必须位于<body>标记内，<body>标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记后，与<head>标记是并列关系

2.HTML5语法

1.标签不区分大小写

<P>这里的p标签大小写不一致</p>

2.允许属性值不使用引号

例如：

<input checked=a type=checked/>
<input readonly=readonly type=text/>

等价于：

<input checked="a" type="checked"/>
<input readonly="readonly" type="text"/>

以上两个代码运行效果相同

3.允许部分属性值的属性省略

例如：

<input checked="checked" type="chesked">

可省略为：

<input checked type="checked"/>

在这里插入图片描述

3.HTML标记

1.单标记和双标记

（1.）双标记格式：<标记名>内容</标记名>
例如：

<h2>博主真帅</h2>

（2.）单标记格式：< 标记名 />
例如：

<br/>(此为换行标签）

2.注释标记

语法格式：

<!--注释语句-->

4.标记的属性

语法格式

<标记名 属性1="属性值1" 属性2="属性值2" ……>内容<标记名>

例如：

<h1 align="center">标题文本</h1>

5.HTML5文档头部相关标记

1.设置页面标题标记`<title>`

内容显示在浏览器窗口的标题栏中
格式为：<title>网页标题名称</title>

2.引用外部标记`<link>`

在<head>中使用<link>标记可引用外部文件，一个页面允许使用多个<link>标记引用多个外部文件
格式为：<link 属性="属性值"/>

3.内嵌式标记`<style>`

位于<head>头部标记中
格式为：<style 属性="属性值">样式内容</style>
在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css表示使用内嵌式的css样式

三.文本控制标记

1.标题和段落标记

1.标题标记：

通常使用h为标题标记，从<h1>到<h6>重要性递减
格式为<hn align="对齐方式">标题文本</hn>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标记的使用</title>
	</head>
	<body>
		<h1>1级标题</h1>
		<h2>2级标题</h2>
		<h3>3级标题</h3>
		<h4>4级标题</h4>
		<h5>5级标题</h5>
		<h6>6级标题</h6>
	</body>
</html>

运行效果：
在这里插入图片描述

left：文字左对齐（默认值）
center：文字居中对齐
right：文字右对齐

2.段落标记

段落标记就是<p>
格式：<p align="对齐方式">段落文本</p>

3.水平线标记

格式:<hr 属性="属性值"/>

4.换行标记`<br/>`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用br标记换行</title>
	</head>
	<body>
		<p>使用HTML制作网页时通过br标记<br/>可实现换行效果</p>
		<p>如果像在word中一样	
		敲回车换行就不起作用了</p>
	</body>
</html>

效果：

2.文本格式化标记

标记	显示效果
`<b></b>`和`<strong></strong>`	文字以粗体方式显示
`<i></i>`和`<em></em>`	文字以斜体方式显示
`<s></s>`和`<del></del>`	文字以删除线方式显示
`<u></u>`和`<ins></ins>`	文字以加下划线方式显示

特殊字符：
在这里插入图片描述

四.图像标记

1.常用图像格式

目前网页上常用的图像格式有GIF，JPG和PNG三种

2.图像标记`<img/>`

格式：<img src="图像URL"/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图像标记img的属性</title>
	</head>
	<body>
		<img src="img/2021-01-17%20(2).png"/>
	</body>
</html>

效果：
在这里插入图片描述
（1.）图像的宽度，高度属性width，height
（2.）图像的边框属性border

五.超链接标记

1.创建超链接

格式：<a href="跳转目标" target=""目标窗口的弹出方式"></a>
在上面的语法中，<a>标记用于定义超链接，href和target为其常用属性，具体解释如下：
（1.）href：用于指定链接目标的地址，当为<a>标记应用href属性时，他就具有了超链接的功能。
（2.）target：用于指定链接页面的打开方式，其取值有self和blank两种，self为默认值，意为在原窗口打开，blank为在新窗口打开。

2.锚点链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚点链接</title>
	</head>
	<body>
	<h1>LISA</h1>
	<h2>目录</h2>
	<p>1早年经历<br/>
	2演艺经历<br/>
	3<a href="#one">个人生活</a><br/>
	4主要作品<br/>
	5社会活动<br/>
	6获奖记录<br/>
	7<a href="#two">人物评价</a>
	</p>
	<p><strong>1早年经历</strong></p>
		<p>LISA早年时曾是泰国舞队We Zaa Cool的成员，与BamBam和Ten在同一个舞队 [11]  。后于2010年在YG Entertainment泰国选拔赛上获得第一名，并在2011年4月开始练习生的生涯 [12]  。2012年5月11日，YG Entertainment发布了她的舞蹈视频，总点击率超过600万 [13-14]  。2013年11月，出演TAEYANG歌曲《RINGA LINGA》的MV [15]  。2015年3月，与B.I、BOBBY合作拍摄休闲服饰品牌的秋冬季概念视频 [16]  。她在YG Entertainment接受了5年的训练，出道前曾和休闲服饰品牌签约成为专属模特。刚到韩国时她不会说韩语，而金智秀会教她说。而且由于她们的家人相距遥远，他们经常在一起消磨时间 </p>

	<p><strong>2演艺经历</strong></p>	
		<p>2016年8月8日，成为BLACKPINK的成员从而正式出道 [18]  ，并随组合发行首张单曲专辑《SQUARE ONE》，主打曲为《WHISTLE》和《BOOMBAYAH》 [19]  ，专辑在印尼、马来西亚、土耳其、泰国等十四个国家的iTunes专辑榜夺得冠军，主打曲《WHISTLE》发行四个小时后，在韩国所有音乐网站的热门歌曲榜夺得冠军，另一主打曲《BOOMBAYAH》也进入了前五位 [1]  ，两首主打曲的MV总播放量超过1000万 [20]  ；21日，随组合凭歌曲《WHISTLE》在《人气歌谣》获得岀道后首个一位，创下女团一位最短时间记录 [21]  ；随后，全团出演首个综艺节目《BLACKPINK TV》。11月1日，随组合发行第二张单曲专辑《SQUARE TWO》 [2]  。12月，随组合在Mnet亚洲音乐大奖获得Best of Next、最佳MV奖两个奖项 [3]  。
		《青春有你第二季》
		《青春有你第二季》(2张)
		2017年6月22日，随组合发行单曲《As If It's Your Last》，歌曲MV发布16小时后点击率超过一千万，也横扫韩国音乐排行榜单第一名，创造了KPOP女子组合中历时最短登iTunes18个地区第一名的成绩 [22]  。7月20日，随组合在日本武道馆举行首场海外Showcase，正式宣布在日本出道 [4]  。8月30日，随组合正式发行日语出道音乐专辑《Blackpink》 [5]  。11月，随组合演唱的单曲《As If It’s Your Last》被华纳兄弟出品的动作科幻片《正义联盟》选为插曲 [23]  。
		2018年1月，随组合演出的真人实境秀综艺节目《Blackpink House》首播。3月28日，随组合发行首张日语迷你专辑的后续改版专辑《Re: Blackpink》。6月15日，随组合发行迷你专辑《SQUAREUP》，专辑包含了多种曲风，同时专辑也刷新了韩国流行音乐历史上女性歌手拿下最多国家榜单1位的纪录 [24]  。7月24日起，随组合举行出道后的首场巡回演唱会“BLACKPINK Arena Tour 2018” [6]  。9月23日，随组合发行单曲《So Hot》。10月25日，随组合发行与杜阿·利帕的合作演唱的单曲《Kiss and Make Up》，该曲收录于杜阿·利帕的首张个人录音室专辑《Dua Lipa》中 [25]  。
		2019年1月，随组合在曼谷开始“BLACKPINK 2019 WORLD TOUR with KIA [IN YOUR AREA]”世界巡回演唱会 [7]  。3月16日，被评选为TC Candler亚太区最美面孔 [26]  。4月5日，随组合发行迷你专辑《KILL THIS LOVE》，专辑刷新《Square Up》取得的各项成绩，并打入英国官方榜单公司专辑主榜 [27]  。10月15日，综艺节目《青春有你第二季》官宣LISA担任节目导师，这也是其中国综艺的首秀 [28]  ；16日，随组合发行迷你专辑《Kill This Love》的日语版，并开始在日本展开多项的活动 [29]  。
		2020年3月12日，作为舞蹈导师参加的综艺节目《青春有你第二季》在爱奇艺上线 [8]  。5月28日，随组合发行与Lady Gaga的合作单曲《Sour Candy》 [30]  ，歌曲刷新了K-pop女子组合歌曲排名，同时也成为组合最畅销的歌曲。6月13日，随组合出演真人秀《24/365 with Blackpink》，该节目记录了她们的回归，并通过综艺分享了她们的日常生活 [31]  ；26日，随组合发行单曲《How You Like That》，这是组合首张正规专辑先行曲 [32]  ，歌曲在英国官方单曲榜和美国Billboard Hot100分别进入第20位和第33位，刷新了K-POP女团的历史 [33]  。8月28日，随组合发行与赛琳娜·戈麦斯的合作单曲《Ice Cream》，这是组合首次尝试的可爱清新概念歌曲，在发售第一天就成为iTunes Worldwide歌曲排行榜的第一名 [34]  ；之后，在Spotify全球前50排行榜和美国前50榜单中分别名列第4和第3名，并于4日公布的英国官方单曲Top100榜单中首次进入第39位 [35]  。10月2日，随组合发行正式专辑《THE ALBUM》。</p>
	<h3   id="one">3个人生活</h3><br/>

	<p>LISA的继父是泰籍瑞士人，是一名泰国菜厨师 [37]  ，但她却是队中厨艺最差的成员。</p>


	<p><strong>4主要作品</strong></p>
		<p>KILL THIS LOVE
		2019-10-16
		
		........</p>

	<h3  id="two">7人物评价</h3>
	<p>LISA以超群的身材比例和外貌博得许多关注 [14]  ，她拥有与众不同的魄力、帅气和性感，散发出了Girl Crush的魅力。除了母语外，LISA还熟练掌握韩语、英语、日语，是一名国际化人才。她也凭借完美的身材比例和异国韵味，吸引了众人的视线 [42]  。她从小展现出舞蹈方面的才华，经过训练后，造就了她出众的舞蹈实力，她也在语言方面具有优势。在个人写真中，她展现出个性十足的魅力，也散发出异国风情和神秘感十足的魅力 [43]  。
	LISA被称为“人间芭比”，她分享的各种照片都会在网上传播，甚至引领妆发潮流。海报中她换了银棕色新发色，配上卷翘的芭比睫毛和玫粉色唇妆，高冷又性感，突破了以往甜美的形象，增添了更多的高级感。LISA最常见的发色就是一头金发，有时会加一些渐变显出层次感，配上自然的波浪卷，真的如芭比娃娃般甜美可爱。有时她的浅金色渐变灰发也会引起不小的轰动，天使般的脸庞配上这金银色系染发更有种不食人间烟火的美感。银色调的染发搭配西柚色唇妆，都是高亮的颜色，甜美又显白 [44]  。（新浪评）</p>
	
	</body>
</html>