第一章 HTML 基础学习

HTML语义表达能力强大

XML（eXtensible Markup Language）标签可以自己定制，只要能够配平就可以了

HTML（Hyper-Text Markup Language）标签是由W3C选定好的，赋予特殊含义的封闭的标签群落

W3C:World-Wide-Web

编辑器：sublime,brackets(emmet插件)

IDE：myeclipse

1. B/S开发的知识体系结构

2. B/S和C/S优缺点

3. 标记语言及其意义

4. 标记语言的两大重大实现(XML,HTML)

5 HTML是什么？W3C是什么？

6 HTML标记的内存存储和渲染流程

文字->图片（渲染 render）

7. 第一代HTML标记 <学习参考网站：https://www.w3schools.bootcss.com>

HTML早期设计就是用来在军事部门和各个高校，科研之间进行文档的传递。

1）h1-h6 标题标签（h:heading）

从h1开始，字体逐渐缩小，该标签早起主要用于论文的多级别标题设置。

a.不能逆向嵌套。

b.H1重要度最高，H6最小(做好设置，有利于搜索引擎分配权重)

2）p 段落标签（paragraph）

3）ul,ol,li

ul:unordered list

li:list item

ol:ordered list

例子：

<ul> 
   <li>星期一</li>
   <li>星期二</li>
   <li>星期三</li>
</ul>

<ol>
   <li>语文课</li>
   <li>数学课课</li>
   <li>英语课</li>
</ol>

4)dl,dt,dd

dl:definition list

dt:definition title

dd:definition descirbution

5)sub,sup,b(bold),i(italic)

6)br(换行)

（break and return）在网页中换行只认 , \n和回车均无效

7）font :文字

常见属性：size（大小） color(颜色) ，face

This is some text!

This is some text

8)Hr:水平标尺 horizontal ruler

一些简单的HTML例子：

<!DOCTYPE html>
<html>
<head>
	<title>first page</title>
</head>
<body>
	this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!

	this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!
	<p>
		this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!

	    this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!this is a bool!
	</p>
	<!-- 大多数网页标签是双标签，但是也有些是单标签的 -->
	<ul type="disc" ><!-- type="square"--><!-- type="circle" -->
		<li>
			星期一:
			<ol start="100" type="1" reversed> <!-- start是开始排名点，type是类型，reversed是自减，不写默认自增， -->
				<li>语文课</li>
				<li>数学课</li>
				<li>英语课</li>
			</ol>
		</li>
		<li>星期二:</li>
		<li>星期三:</li>
	</ul>
	<hr>
	<img src="DHTML原理说明.png" alt="DHTML原理说名" width="300" height="300">
	
</body>
</html>

<!-- 标签（tag） 元素（element） html,head,title ,body,button -->
<html>
	<head>
		<title>first page</title>
		<script>
			function $(id)
			{
 			  return document.getElementById(id);//id定位法 var variable
			}
			function setCorlor(){
			 //js编程
			 //找到内存中的这个div对象
			 //alert("you click me!...");
			 //var divObj=document.getElementById("mydiv");//id定位法 var variable	
			 //alert("div的类型是："+typeof divObj);
			 //alert("div的id是："+divObj.id);
			 //alert(divObj);
  			 var divObj=$("mydiv");
			 var newColor=$("newColor");
			 var actMsg=$("actMsg");
			 divObj.style.borderColor=newColor.value;
			 
			 actMsg.innerHTML="DIV颜色改变为："+newColor.value;
			}
			function myFunction()
			{
			 var newColor=$("newColor");
			 var actMsg=$("actMsg"); 
			 if(newColor.value!="red")
			   actMsg.innerHTML="DIV颜色改变为："+newColor.value;
			}
		</script>
	</head>
	<body>
		<div id="mydiv" style="width:100px;height:100px;border:5px solid red">
		</div>
		请输入div的新颜色:<input type="text" id="newColor" value="green"></input><button onclick="setCorlor();">确定</button>
		<hr>
		<p id="actMsg" onclick="myFunction();">初始颜色为红色</p>
	</body>
	

</html>

9）HTML解析过程

第一章 HTML 基础学习

猜你喜欢