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解析过程