Web开发-HTML基础2

学校选修课的复习资料

资料来源：www.w3school.com.cn的学习笔记

1.HTML CSS

CSS(Cascading Style Sheets)，层叠样式表是用来静态装饰网页的计算机语言。

如果浏览器读到一个样式表，它会按照样式表来对文档进行格式化。有三种方法插入样式表：

(1).外部样式表

当样式要被应用到很多页面的时候，外部样式表是最理想的选择。你可以使用一个文件来修改整个页面的外观。

<head>
<link ref="stylesheet" type="text/css" href="mystyle.css">
</head>

(2).内部样式表

当单个文件需要特别样式的时候，就可以使用内部样式表。

<head>

<style type="text/css">
body{background-color:red}
p {margin-left:20px}  <!--左外边距-->
</style>

</head>

(3).内联样式

当特殊的样式是需要应用到个别元素的时候可以使用内联样式

<p style="color:red;margin-left:20px">
这是一段话
</p>

更多CSS的信息请参照CSS教程。

2.HTML连接 target属性

<a href="www.baidu.com" target="_blank">去百度</a>

把target参数值设置为"_blank"则在新的浏览页打开网址

3.HTML 锚(Archor)

锚可以在页面内进行跳转，用户不用再滚动页面寻找信息。

<a name="tips">基本的注意事项 - 有用的提示</a>

<a href="#tips">有用的提示</a>

注意：始终将整斜杠添加到子文件夹后方，例如：href="http://www.w3school.com.cn/html"就会向服务器发出两次HTTP请求，要写成href="http://www.w3school.com.cn/html/"。命名锚经常在大型文档的开始位置上创建目录。如果浏览器找不到已经定义的命名锚，那么就会定位到文档的顶端，不会有错误发生。

实例：

<html>
<body>

<p>
<a href="C4">查看第4章</a>
</p>

<h2>第一章</h2>
<p>bla bla bla bla</p>


<h2>第二章</h2>
<p>bla bla bla bla</p>


<h2>第三章</h2>
<p>bla bla bla bla</p>


<h2><a name="C4">第四章</a></h2>
<p>bla bla bla bla</p>

</html>
</body>

4. HTML图像

HTML中图像由<img>标签定义，它只包含属性，而没有闭合标签，要使用源属性(src)来定义。

替换文本：当无法加载的时候，将加载文本来告诉用户图片内容

<img src="boat.gif" alt="Big Boat">

<html>

<body background="/i/eg_background.jpg">  <!--背景图片-->
<!--align有left right top bottom middle-->

<img src"/i/eg_mouse.jpg" width="50" height="50">

<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />

5.HTML 表格

表格有<table>标签来定义。每个表格有若干行(<tr> table row)，每行被分割为若干单元格。字母td指表格数据(table data)

<html>
<body>

<p>一列：</p>
<table border="1">
<tr>
   <td>100</td>
</tr>
</table>


<p>一行三列：</p>
<table border="1">
<tr>
   <td>100</td>
   <td>200</td>
   <td>300</td>
</tr>
</table>


<p>两行三列：</p>
<table border="1">
<tr>
   <td>100</td>
   <td>200</td>
   <td>300</td>
</tr>
<tr>
   <td>400</td>
   <td>500</td>
   <td>600</td>
</tr>
</table>
</body>
</html>

表格的表头用<th></th>(table header)定义，在大多数浏览器中表头是居中加粗的文字。

注意：在有边框的表格中，空白的单元会被省略，若加一个空白占位符就可以正常显示边框

其他参数请在使用时参照手册。

6.HTML列表

列表分为无序列表、有序列表和自定义列表。

无序列表是一个项目的列表，用黑点开始每一项。无序列表的标签为<ul></ul>，每一项的标签为<li></li>

<html>
<body>
    <ul>
      <li>Coffee</li>
      <li>Milk</li>
    </ul>
</body>
</html>

有序列表同样是列表，不用黑点标记每项，而用数字1234...有序标记，有序列表标签为<ol></ol>

<html>
<body>
   <ol>
      <li>Coffee</li>
      <li>Milk</li>
   </ol>
</body>
</html>

自定义列表是每个项和其注释的组合，以<dl></dl>标签标注，每个自定义项用<dt></dt>标注，每个注释用<dd></dd>标注。自定义列表的内部可以是图片、段落、超链接、换行符以及其他列表。

<html>
<body>
   <dl>
      <dt>Coffee</dt>
      <dd>咖啡</dd>
      <dt>Milk</dt>
      <dd>牛奶</dd>
   </dl>
</body>
</html>

7.元素类型

(1).HTML块元素(Block Level Element)

块级元素在浏览器显示时，通常会以新行来开始(和结束)。

例子：<h1>,<p>,<ul>,<table>

(2).HTML内联元素(Inline Element)

内联元素在显示时不会以新行开始。

例子：<b>,<td>,<a>,<img>

(3).HTML <div>元素

HTML<div>元素是块级元素，它是可用于组合其他HTML的容器。

<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果同CSS一同使用，<div>元素可用于对大的内容块设置样式属性。

<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

<div style="color:#00FF00">
    <h3>This is a header</h3>
    <p>This is a paragraph.</p>
</div>

(4).HTML <span>元素

HTML<span>元素是内联元素，可用作文本的容器。

<span>元素也没有特定的含义。

当于CSS一同使用时，<span>元素可用于部分文本设置样式属性。

8.HTML类

对HTML设置类，使我们能够为元素的类定义CSS样式。

<!DOCTYPE html>
<html>
<head>
<style>
.cities{
    background:red;
    color:white;
    margin:20px;
    padding:20px;
}
</style>
</head>

<body>

<div class=".cities">
<h2>London<h2>

<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>

</body>
</html>

在之后其他的<div>元素中也可以使用"cities"类

我们也可以设置分类行内元素，使用<span>元素。

<!DOCTYPE html>
<html>
<head>
<style>
   span.red{color:red;}
</style>
</head>

<body>
<h1>我的<span class="red">重要的</span>标题</h1>

</body>
</html>

9.HTML布局

用<div>元素的HTML布局，能够轻松的通过CSS对其进行定位。

<!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>

<div id="header">
<h1>City Gallery</h1>
</div>


<div id="nav">
London</br>
Paris</br>
Tokyo</br>
</div>

<div id="section">
<h2>London</h2>
<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>
</div>

<div id="footer">
Copyright W3school.com.cn
</div>

</body>
</html>

10.HTML 响应式Web设计

RWD(Responsive Web Design)，是指改变网页尺寸时会改变内容分布来达到最佳效果的网页设计，对移动端设备是必要的设计。

创建RWD有两种方法，一种为自己创建：

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.city{
float:left;
margin:5px;
padding:15px;
width:300px;
height:300px;
border:1px solid black;
}
</style>
</head>

<body>
....

另外一种方法为使用Bootstrap

<!DOCTYPE html>
<html>
<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content="width=device-width",initial-scale=1>
   <link ref="stylesheet"
    href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
  
<div class="container">
<div class="jumbotron">
    <div class="col-md-4">
     <h2>London</h2>
     <p>...</p>
    </div>
</div>
</div>

</body>
</html>

更多Bootstrap的信息请参考Bootstrap教程。

猜你喜欢