一、 html基本构成
HTML标签:
<标签>内容</标签>
HTML 元素: (包含整个部分)
<p>This is a paragraph.
</p>
文件: .htm .html 扩展名没有区别
二、 html 5
HTML5 中的一些有趣的新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
HTML5 的标签及属性描述 http://www.w3cschool.cc/tags/html-reference.html
三、基本标签
标题 <h1>这是一个标题</h1>
段落 <p>这是一个段落。</p>
链接 <a href="http://www.w3cschool.cc">这是一个链接</a>
图像 <img src="w3cschool.png" width="104" height="142">
注释 <!-- 这是一个注释 -->
水平线 <hr />
html字符实体
HTML布局 div元素
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
Main Title of Web Page
Menu
HTML
CSS
JavaScript
HTML
CSS
JavaScript
Content goes here
Copyright © W3CSchool.cc
四、HTML CSS
CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
- 内联样式- 在HTML元素中使用"style" 属性
- <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
- <head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
- 外部引用 - 使用外部 CSS 文件
- <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
定义背景颜色
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
html表单:文本输入,复选框,提交按钮等;
html框架:通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
六、HTML脚本
浏览器不支持script时显示的内容
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
xhtml规范了HTML