HTML相关知识

2018-01-03 20:04:37来源:CSDN作者:qq78442761人点击

分享
HTML相关


JS:为网站添加各式各样的动态功能,为用户提供更流畅美观的动态效果。
CSS:解决内容与表现分离的问题。
HTML:包含网页的实际内容。




HTML源代码

<html><head><title>第一个网页</title></head><body><h1>Hello World</h1><p>Hello World</p></body></html>


HTML(Hyper Text Markup Language)
HTML结构和语法


可以用树形结构表示他:
1.<html>为根结点;
2.<head>为<html>子结点;
3.<body>为<html>子结点;


HTML元素
以开始标签起始<p>
以闭合标签终止</p>
闭合标签比开始标签多一个斜杠/
标签中间为元素的内容


属性元素:元素的额外信息;
标签属性:name,id,class,......
事件属性:onload,onerror,onclick,......






注释:<!-- XXXXXXX --> 注意:注释标签比较特别,HTML不区分大小写。
图片:<img src="http://XXX.XXX.com/XX/XX/XX.png" width="500" height="100" />
链接:<a href="http://XXX.XXX.com/XXX/XXX.htm">点击访问此网站</a>
表单:
<form>
username:
<input type="text" name="username" />
password:
<input type="passowrd" name="password" />
<input type="submit" value="Submit" />
</form>


内联框架:
<iframe src="http://XXX.XXX.com/XXX/XXX.htm" frameborder="0" width="480" height="240"></iframe>




HTML DOM:
DOM:文档对象模型(DOcument Object Model)将文档转换为树结构;


为什么要把文档转换为树结构:
1.更直观的了解页面元素;
2.通过JavaScript,可以对HTML进行任意操作;


下面是一个练习:

代码如下:

<html><head><title>我的第一个html网站</title></head><body><h1>Welcome To Join Us</h1><p>Hello World</p><!---第一个网站--><img src="http://img4.duitang.com/uploads/blog/201402/05/20140205142712_CtJem.jpeg" width="100" height="300" /> <br /><br /><a href="http://www.baidu.com">点击访问百度</a><br/><br/><form>username:<input type="text" name="username" />password<input type="password" name="password" /><input type="submit" value="Submit" /></form><br/><br/><iframe src="http://www.baidu.com" framborder="0" width="480" height="240"></iframe></body></html>

运行结果如下:



最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台