un1
/
1test.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a1{
				width: 1180px;
				height: 100px;
				margin: 0 auto;/* 有宽度的块状元素居中显示 */
			}
		</style>
	</head>
	<body>

		<!--

内容   表现   行为
html   css   js

html   hyper text markup language   超文本标记语言
用来告诉浏览器这是什么内容

标记：被三角符号包起来的东西(作用是体现语义)

双标记：成对出现，一个表示开始，一个表示结束，类似括号（）
单标记：只出现一个就能生效的，<img>

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

块状元素：div   独占一行，一行只能显示一个，竖向排列的
可以设置宽高，但还是会独占一行（块状元素怎么横向排列？）

行内元素：span  只占内容宽度，一行可以显示多个，横向排列
不可以设置宽高，只占内容宽高


规范：
1 双标记只能嵌套使用，不能交叉使用 【（）】
2 代码里面换行和空格无效，需要用<br>和&nbsp;等特殊字符代替
3 不区分大小写，所有代码可以一行显示

-------------------------------------------------------------------------------------------

CSS  层叠样式表：用来控制网页显示效果的

css使用方式：

1 行内样式：（适用于少量属性的设置）
直接在标记里面插入style="属性:值;属性:值"
<h2 style="color: red; background-color: #008000">测试</h2>
<img src="123.png" style="width: 100px; height: 100px;">

2 内嵌样式：
在页面中嵌入
<style>
选择器{属性:值;属性:值;}
选择器{属性:值;属性:值;}
</style>

选择器：因为html和css的分离，所以需要选择器去帮助html匹配到对应的css
1 标签选择器：通过标签名字来匹配
2 类(class)选择器：通过class命名来匹配


3 外链样式：


-->
		<span style="background-color: red; width: 100px; height: 100px;">1234789</span>


		<h2 class="a1" style="color: red; background-color: #008000">测试</h2>
		<img src="123.png" style="width: 100px; height: 100px;">


		12&nbsp;&nbsp;&nbsp;3
		<br>
		<br>
		456
		&lt; akjdsfblsakhfksajdhflkjashlfkjah &gt;

		<h1>标题</h1>
		<h2>标题</h2>
		<h3>标题</h3>
		<h4>标题</h4>
		<h5>标题</h5>
		<h6>标题</h6>
		<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
		</p>
		<p>段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
		</p>
		<div>无语义标记</div>
		<span>无语义标记</span>
		<b>加粗</b>
		<i>斜体</i>
		<a href="#">超链接</a>
		<hr>
		<img src="123.png">


	</body>
</html>