目录
前端基础语法
<!DOCTYPE html>
声明<html>描述网页</html>
<body>可见的页面内容</body>
<h1>标题</h1>
<h1 style="text-align:center">标题居中</h1>
<p>段落</p>
<a href="http://www.w3school.com.cn">链接</a>
<img src="图片.jpg" width="104" height="142" />
<img src="图片url地址" />
name='Bill "HelloWorld" Gates'
属性值本身就含有双引号,就必须使用单引号<hr/>
添加水平线<!--这是一段注释。注释不会在浏览器中显示。-->
<br />
换行<p>第一行<br/>第二行<br/>通过br标签在不产生一个新段落的情况下进行换行</p>
- 所有连续的空格或空行都会被算作一个空格
<p style="font-family: arial; color: red; font-size: 30px">字体,颜色,字体大小</p>
<q>打双引号</q>
“打双引号”<blockquote>缩进处理</blockquote>
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
通过 abbr 对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
文本格式化标签
预格式文本
<pre>
预格式文本。
它保留了 空格
和换行。
适合用来显示代码
for i = 1 to 10
print i
next i
</pre>
使用添加到 head 部分的样式信息对 HTML 进行格式化
1.外部样式表
当样式需要被应用到很多页面的时候,可以采用外部样式表。使用外部样式表,就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- rel:规定当前文档与被链接文档之间的关系。stylesheet表示文档的外部样式表。
- type:规定被链接文档的类型。
- href:规定被链接文档的位置。
2.内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 style 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: green}
p {margin-left: 20px}
</style>
</head>
3. 内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
div
table 表格
- 每个表格由 table 标签开始。
- 每个表格行由 tr 标签开始。
- 每个表格数据由 td 标签开始。
- 比如三行两列,就要有三个
<tr></tr>
,每个 tr 中有两个<td></td>
- border 指表格边框的粗度
<h4>三行两列</h4>
<table border="8">
<tr>
<th>表头</th>
<th>默认粗体居中</th>
</tr>
<tr>
<td>1111111111</td>
<td>2222222222</td>
</tr>
<tr>
<td>3333333333</td>
<td>4444444444</td>
</tr>
<tr>
<td>5555555555</td>
<td>6666666666</td>
</tr>
</table>
无序列表(ul)和有序列表(ol)
div
-
把文档分割为独立的、不同的部分
-
div 元素是块级元素,可用于组合其他 HTML 元素的容器。
-
div 元素没有特定的含义,它属于块级元素,浏览器会在其前后显示折行。
-
如果与 CSS 一同使用,可对大的内容块设置样式属性。
span
- span 标签用来组合文档中的行内元素,以便通过样式来格式化它们。
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<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 W3Schools.com
</footer>
</body>
</html>
综合使用
<!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">
<style>
.row {
color:green;
}
.col-md-4 {
font-size:30px;
}
</style>
</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-5">
<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>
script 脚本:用于定义客户端脚本,比如 JavaScript。
- 必需的 type 属性规定脚本的 MIME 类型。
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
</body>
</html>
html的头部元素
title
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3>标题</h3>
<p>段落</p>
<div class="test" style="color:green">
<h3>div内部的标题</h3>
<p>div内部的段落</p>
</div>
<p>
<span>
some text.
</span>
some other text.
</p>
</body>
</html>
meta
-
元数据(metadata)是关于数据的信息。
-
meta 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
-
被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
-
始终位于 head 元素中。
-
content 属性始终要和 name 属性或 http-equiv 属性一起使用。定义与 http-equiv 或 name 属性相关的元信息
-
content 属性提供了名称/值 对中的值。该值可以是任何有效的字符串。