HTML
概念
- HTML 时超文本标记语言(Hyper Text Markup Language)
- Html 是一种标记语言(markup language)
HTML 基础
HTML
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 的用处。
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
HTML 5:
HTML 4.01:
“http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
标题
标题通过<h1> <h6> 等标签进行定义, h1 最大， h6 最小
<h1>This is a heading 1 </h1>
<h2>This is a heading 2 </h2>
<h3>This is a heading 3 </h3>
<h4>This is a heading 4 </h4>
<h5>This is a heading 5 </h5>
<h6>This is a heading 6 </h6>
段落
<p> this is a paragraph. </p>
<p> this is another paragraph. </p>
链接
<a href=http://www.w3school.com.cn>this is a link</a>
水平线
<hr />
图像
<img src="w3school.jpg" width="104" height="142" />
拆行
<br />
注释
<!-- This is a comment -->
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
只有Internet Explorer 执行的HTML 标签
HTML 属性
- 属性提供了有关HTML 元素的更多的信息，
- 总是在HTML 元素的开始标签中规定，
- 可以有多个name属性相同，但是id属性是唯一的。
HTML 引用
<q> 短的引用
浏览器通常会为元素包围引号
WWF 的目标是：构建人与自然的和谐共存的世界。
<blockquote> 长的引用
浏览器通常会对
元素进行缩进处理
以下内容引用自 WWF 的网站：
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
<abbr> 缩略词
定义缩写或者首字母缩略语
WHO成立于1948年。
<dfn>用于定义
元素定义项目或缩写的定义
WHO 成立于 1948 年。
<address> 用于联系信息
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
<cite> 用于著作标题
<p><cite>The Scream</cite>by Edward Munch.Painted in 1893.</p>
<bdo>双向重写
<bdo dir = "rtl"> This text will be written from right to left</bdo>
<kbd> 键盘输入
<samp> 计算机输出示例
<code> 编程代码示例
HTML CSS
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，可以通过改
变一个文件来改变整个站点的外观
内部样式表
当单个文件需要特别样式时，就可以使用内过 样式表。可以在head部分通过<style>标签定义内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。
<p style="color: red; margin-left:20px">
this is a paragraph
</p>
超链接
网页超链接
<a href="http://www.w3school.com.cn/" target="_blank"> Visit W3School</a>
网页内跳转
<a href="#C4"> 查看Chapter 4</a>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains像
HTML图像
<img src="boat.gif" alt="Big Boat" />
HTML 列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
the rows are numbered by Integer
- Coffee
- Milk
HTML <div>
block level element and inline element
the browser show it with a new line
HTML <span>
HTML CSS
example 1:
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright W3School.com.cn
</div>
</body>
css:
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
example 2:
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3School.com.cn
</footer>
</body>
css:
HTML Responsive Web Design with bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>W3School Demo</h1>
<p>Resize this responsive page!</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-md-4">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>
<div class="col-md-4">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
</body>
</html>
HTML frameset
<frameset cols="25%, 75%">
<frameset cols="120,*">
<frame src="frame_a.html">
<frame src="frame_b.html">
</frameset>
HTML iframe
<iframe name="iframe_a" width="200" height="200" frameborder="0"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
HTML form
<!DOCTYPE html>
<html>
<body>
<form action="/demo/demo_form.asp">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<input type="password" name="psw" >
单选按钮
<input type="radio" name="sex" value="male" checked>Male
复选框
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br>
<input type="radio" name="sex" value="female">Female
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<br><br>
<input type="submit" value="Submit">
</form>
<p>如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面。</p>
<p>first name 不会被提交，因为此 input 元素没有 name 属性。</p>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
