第一章 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）在网页中换行只认<br/>, \n和回车均无效
7）font :文字
常见属性：size（大小） color(颜色) ，face
<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text</font>
<!-- 注：大多数网页元素都是双标签的，但是有一些是单标签的 -->
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解析过程
上一篇： Logstash概念与原理