初识HTML5

一:创建第一个HTML5页面


<html>
	<head>
		<meta charset="utf-8">
		<title>第一个网页title>
	head>
	<body>
		这是我的第一个HTML5页面哦
	body>
html>
<title>title>里面为标题
<body>body>里面为内容

显示结果
初识HTML5_第1张图片

二:HTML5基础

1.HTML5文档的基本格式


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

1.1标记

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


1.2标记

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

1.3标记

标记用于定义HTML文档的头部信息,也称为头部标记,紧跟在标记之后,主要用于封装其他位于文档头部的标记,例如 <link> <style></code>等。注意:一个HTML文档只能含有一对<code><head></code>标记</p> <h3>1.4<code><body></code>标记</h3> <p><code><body></code>标记用于定义HTML文档所要显示的内容,也称为主体标记。浏览器中显示的所有文本,图像,音频和视频等信息都必须位于<code><body></code>标记内,<code><body></code>标记中的信息才是最终展示给用户看的。一个HTML文档只能含有一对<code><body></code>标记,且<code><body></code>标记必须在<code><html></code>标记内,位于<code><head></code>头部标记后,与<code><head></code>标记是并列关系</p> <h2>2.HTML5语法</h2> <h3>1.标签不区分大小写</h3> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>P</span><span class="token punctuation">></span></span>这里的p标签大小写不一致<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <h3>2.允许属性值不使用引号</h3> <p>例如:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span>a</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>checked/</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span>readonly</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span>text/</span><span class="token punctuation">></span></span> </code></pre> <p>等价于:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">readonly</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>readonly<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> </code></pre> <p>以上两个代码运行效果相同</p> <h3>3.允许部分属性值的属性省略</h3> <p>例如:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>chesked<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>可省略为:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">checked</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checked<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/26094d09bf74424d85cacc3664b7d623.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/26094d09bf74424d85cacc3664b7d623.jpg" alt="初识HTML5_第2张图片" width="650" height="424" style="border:1px solid black;"></a></p> <h2>3.HTML标记</h2> <h3>1.单标记和双标记</h3> <p>(1.)双标记格式:<code><标记名>内容</标记名></code><br> 例如:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>博主真帅<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> </code></pre> <p>(2.)单标记格式:<code>< 标记名 /></code><br> 例如:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>(此为换行标签) </code></pre> <h3>2.注释标记</h3> <p>语法格式:</p> <pre><code class="prism language-html"><span class="token comment"><!--注释语句--></span> </code></pre> <h2>4.标记的属性</h2> <p>语法格式</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标记名</span> <span class="token attr-name">属性1</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>属性值1<span class="token punctuation">"</span></span> <span class="token attr-name">属性2</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>属性值2<span class="token punctuation">"</span></span> <span class="token attr-name">……</span><span class="token punctuation">></span></span>内容<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标记名</span><span class="token punctuation">></span></span> </code></pre> <p>例如:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">align</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>标题文本<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> </code></pre> <h2>5.HTML5文档头部相关标记</h2> <h3>1.设置页面标题标记<code><title></code></h3> <p>内容显示在浏览器窗口的标题栏中<br> 格式为:<code><title>网页标题名称

2.引用外部标记

中使用标记可引用外部文件,一个页面允许使用多个标记引用多个外部文件
格式为:

3.内嵌式标记
在HTML中使用style标记时,常常定义其属性为type,相应的属性值为text/css表示使用内嵌式的css样式

三.文本控制标记

1.标题和段落标记

1.标题标记:

通常使用h为标题标记,从

重要性递减
格式为标题文本


<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>

运行效果:
初识HTML5_第3张图片

  • left:文字左对齐(默认值)
  • center:文字居中对齐
  • right:文字右对齐

2.段落标记

段落标记就是


格式:

段落文本

3.水平线标记

格式:


4.换行标记


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

效果:
初识HTML5_第4张图片

2.文本格式化标记

标记 显示效果
文字以粗体方式显示
文字以斜体方式显示
文字以删除线方式显示
文字以加下划线方式显示

特殊字符:
初识HTML5_第5张图片

四.图像标记

1.常用图像格式

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

2.图像标记

格式:


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

效果:
初识HTML5_第6张图片
(1.)图像的宽度,高度属性width,height
(2.)图像的边框属性border

五.超链接标记

1.创建超链接

格式:
在上面的语法中,标记用于定义超链接,href和target为其常用属性,具体解释如下:
(1.)href:用于指定链接目标的地址,当为
标记应用href属性时,他就具有了超链接的功能。
(2.)target:用于指定链接页面的打开方式,其取值有self和blank两种,self为默认值,意为在原窗口打开,blank为在新窗口打开。

2.锚点链接


<html>
	<head>
		<meta charset="utf-8">
		<title>锚点链接title>
	head>
	<body>
	<h1>LISAh1>
	<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>

运行效果:
初识HTML5_第7张图片
点击个人作品和人物评价会出现相应的跳转

你可能感兴趣的:(HTML+CSS3,html,css)