HTML5 anterior end first week learning process (Day02)

2020 February 12
The next day the front end of the study, learned something today feeling pretty much, but also busy recently graduated design of open questions, too many things, I hope you can stick it!
1. This lesson learning objectives.

1. Master the common label HTML. Emphasis
2. Commonly used to master HTML tag attributes.
3. Emmet shortcuts to master writing.
4. Able to complete simple HTML pages produced by label basis.

II. Tag attributes.
<meta charset = "UTF-8 " />

1. meta tags, only one label, single-label.
2. meta meta-information stored setting contents of some pages.
3. charset = "UTF-8", the label property.
   Features:
   . A written at the beginning label.
   b Format: attribute name = attribute value
   : Addition of the tag functionality.
   Example: man (handsome, greasy uncle, technology Daren).

Charset: encoding format, character set.
. a utf-8: contains all the symbols world.
. b ansi: does not support Chinese, English.
. c gb2312: Chinese encoding Chinese.

Three. HTML tags commonly used.

1. br, hr.
   br: newline tag, a single label. <br>
   HR: horizontal dash, single-label. <hr>

2. Title tag.
   H1 tags: One title tag.
   H2 tags: II title tag.
   H3 tags: Three title tag.
   H4 Tags: fourth title tag.
   H5 Tags: fifth title tag.
   H6 tags: VI title tag.
   The title tag comes with text size and bold effect.
   H1 Title One: a website which appears only one on it.
   Note: When generating shortcuts by emmet, can not appear in front of the space between the tab key and content.

3. Hyperlink tags.
   A label: on behalf of hyperlinks. <a href=""> format display text </a>
   Href attributes: specify the address hyperlink to jump. For example: URL.
   Target attribute: Specify a new page was opened. Target = "_ blank" opens in a new window.
   How to create a web page?
   a. Select the current project Day02.
   b. Right-click, select New, select the html file again.
   
   . c
   Html File name: hump nomenclature (small hump), consisting of several words, except for the first letter of the first word, the first letter of every other word is capitalized. helloWorld, the project name HelloWorld

4. Pictures label.
   Img: to display the picture. Single-label, only to display the picture.
   Load picture Source:
   1. Network Photo: network must give the URL of the picture. Find pictures, right Copy Image URL.
   2. The local picture: the picture within the current project. Use relative paths for a visit.
   Img attributes:
   Src: store the address of the picture. Format: src = "Image Address"
   Alt: Tip the contents when the picture is not loaded successfully displayed. Note: The picture shows success does not appear.
   Title: The title of the picture. When the mouse over the picture will be displayed.
   Width: Set the width of the image. Value, unit: px.
   Height: Set the height of the picture. Value, unit: px.

   注意：图片修改大小，尽量只给一个值（宽度或者高度），另外一个值
         会根据图片的原始尺寸等比例缩放，不会失真。
   

5. Paragraph tags, em, strong.
   P: paragraph tags, used to store a piece of text. Not much of a piece of text content points.
   Em: for emphasis, used to make text italic settings.
   Strong: identifies stressed to make text bold setting.

6. Unordered list.
   ul li unordered list each list item.
   Note: ul and li must be a combination occur, and that they can not have other labels.
   Properties:
   of the type: change list bullets. Circle (open circles), disc (solid circles), square (solid rectangle)

7. Ordered list.
   Ol: an ordered list.
   Li: list item.
   Properties:
   of the type: Change the List Bullet. 1, A, a, I, i.

8. Semantic tags.
   Explanation: According to the characteristics of the content of the page, select the appropriate HTML tags written.
   The advantages of semantic labels:
   1. Easy SEO optimized so that search engines better understand the webpage.
   2. easy to read and modify.
   3. In the absence of CSS, the page can exhibit good content structure.

IV. Four. Emmet shortcut

V. Learning link.
Learning Link: W3SCOOL https://www.w3school.com.cn/html/index.asp
Learning Link: rookie tutorial https://www.runoob.com/html/html-tutorial.html

Code blocks have learned today:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>HTML常用标签</title>
	</head>
	<body>
		<!-- br:换行标签  hr:水平横线。 -->
		哥是老司机，要开车喽！<br>
		<hr>
		滴滴，学生卡！<br>
		<hr>
		滴滴，幼儿园卡！<br>
		<hr>
		滴滴，老年卡！<br>
		<hr>
		
		<!-- 标题标签 h1~h6-->
		<!-- 1号标题标签 -->
		<h1>我是1号标题</h1>
		<!-- 2号标题 -->
		<h2>我是2号标题</h2>
		<!-- 3号标题 -->
		<h3>我是3号标题</h3>
		<!-- 4号标题 -->
		<h4>我是4号标题</h4>
		<!-- 5号标题 -->
		<h5>我是5号标题</h5>
		<!-- 6号标题 -->
		<h6>我是6号标题</h6>
		
		<!-- 
			快速生成代码的方式：
				1.快速生成一个标签。 标签名称+tab。 
				2.快速生成1个标签并且标签内带内容。 
					标签名称{标签的内容}+tab。
				3.快速生成多个标签。
					标签名称*标签个数。 比如：h1*6+tab, 生成6个h1标签。
				4.如何快速生成h1~h6标签。
					1, 2, 3, 4, 5, 6
					shift+4
					h$*6, $是占位符，在生成6个标签的过程中，逐步生成h1,h2,h3,h4,h5,h6.
					h${我是$号标题}*6
		 -->
		<h1>我是1号标题</h1>
		<h2>我是2号标题</h2>
		<h3>我是3号标题</h3>
		<h4>我是4号标题</h4>
		<h5>我是5号标题</h5>
		<h6>我是6号标题</h6>
		
		<!-- 超链接标签： a -->		
		<a href="https://www.baidu.com/">百度一下，你就知道</a>	
		<!-- 练习：超链接链接到蓝鸥官网 -->
		<a href="http://www.lanou3g.com/" target="_blank">点我，跳转到蓝鸥官网</a>
		<!-- 需求：如何在一个新的窗口打开网页？ -->
		<!-- 
			需求：跳转到自己的网页？
			访问自己的网页，需要找到自己网页的路径。
			1.相对路径。
			2.绝对路径。http://www.lanou3g.com/， https://www.baidu.com/
		 -->
		<a href="two.html">第二个网页</a>
		<a href="three.html">第三个网页</a>
		<!-- 
			相对路径：
				1.先找到同级的路径。
				2.再找对应的文件夹的下一级。  / 下一级  ../ 上一级
			
		 -->
		<a href="other/four.html">第四个网页</a>
		
		
		<!-- 实现回到顶部效果 -->
		<a href="#">回到顶部</a>
		
		<!-- 
			图片标签 img 
			显示图片：
				1.网络图片： 图片网址。
				2.本地图片：
					
		-->
		<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1191630624,1109312732&fm=26&gp=0.jpg" alt="世宇的帅照" >
		<!-- 本地图片 -->
		<img src="img/2.jpg" title="成都小甜甜">
		<!-- 练习：网页上显示刘宇宁的图片 -->
		<img src="img/boy/1.jpg" width="200" height="400">
		
		<!-- 段落标签 p(paragraph)-->
		<p>
			这是一场针对武汉疫情防控工作中暴露出的突出问题开展的紧急约谈。<em>9日</em>，武汉市对确诊还未住院的新冠肺炎重症患者进行集中收治。有关中央媒体记者跟踪采访发现，当晚在将患者转运至武汉同济医院中法新城院区的过程中，武昌区由于<strong>工作滞后、衔接无序、组织混乱</strong>，不仅转运车辆条件差，街道和社区工作人员也没有跟车服务，导致重症病人长时间等待继而情绪失控，做法十分恶劣。
		</p>
		
		<!-- 无序列表 ul -->
		HTML 是用来描述网页的一种语言。
		<ul type="square">
			<!-- 列表项 li -->
			<li>HTML 指的是超文本标记语言 (Hyper Text Markup Language)</li>
			<li>HTML 不是一种编程语言，而是一种标记语言 (markup language)</li>
			<li>标记语言是一套标记标签 (markup tag)</li>
			<li>HTML 使用标记标签来描述网页</li>
		</ul>
		
		<!-- 有序列表 ol -->
		人的年龄：
		<ol>
			<li>三十而立</li>
			<li>四十不惑</li>
			<li>五十知天命</li>
		</ol>
		<!-- 练习 -->
		按顺序罗列一下您心中的女神：
		<ol type="i">
			<li>妲己</li>
			<li>王昭君</li>
			<li>杨玉环</li>
			<li>貂蝉</li>
			<li>西施</li>
		</ol>
		<!-- 练习 -->
		<!-- 外层有序列表 -->
		<ol>
			<li>第一章
				<!-- 内层有序列表 -->
				<ol>
					<li>第一节</li>
					<li>第二节</li>
					<li>第三节</li>
				</ol>
			</li>
			<li>第二章</li>
			<li>第三章</li>
		</ol>
		
		
		<!-- 标签语义化 -->
		<p>
			疫情发生以后，全国各地坚持一方有难、八方支援，各地区前往湖北和武汉支援的广大医务工作者、人民解放军指战员以及各方面人员发扬越是艰险越向前的大无畏革命精神，闻令而动，坚忍不拔，不怕牺牲，攻坚克难。从除夕夜星夜驰援，到元宵节紧急集结，全国各地一批批医务人员奔赴、奋战武汉一线；数十家单位紧密配合、全国各地建设力量迅速汇聚，短时间内建好武汉火神山、雷神山医院；建立对口支援机制，各省份全力支持湖北各地市加强病人救治、疫情防控工作；军队保证医疗物资和人员有效投送，抽组大量医护人员奔赴疫情防控最前线。力量向湖北、向武汉集结，资源向湖北、向武汉倾斜，全国人民与湖北人民、武汉人民同舟共济，凝聚起众志成城抗击疫情的强大力量。
		</p>
		
	</body>
</html>