HTML
HTML标签
- 是由尖括号包围的关键词，如<HTML>；
- 通常是成对出现的，比如<p></p>
HTML元素
- “HTML标签”和"HTML元素"通常都是描述相同的意思。但是严格来说，一个HTML元素包含了开始标签与结束标签
如: <p>梅科尔工作室</p> - <br>为换行。
HTML空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br>就是没有关闭标签的空元素
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使<br> 在所有浏览器中都是有效的，但使用 <br/>其实是更长远的保障。
HTML结构
<html>
<head>
????<title>页面标题</title>
</head>
<body>
????<h1>这是一个标题</h1>
????<p>这是一个段落</p>
????<p>这是另一个段落</p>
</body>
HTML标题
- HTML标签通过<h1>~<h6>来进行定义的。
- h1对应的字体字号最大，随着数字的增大字体逐渐变小。
- 请确保将HTML只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。使用时应将h1用作主标题，代表最重要的，其后是h2，代表次重要的，之后以此类推。
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
HTML段落
HTML段落是通过标签<p>来定义的。
<p>这是一个段落</p>
<p>这是另外一个段落</p>
HTML链接
HTML链接是通过标签<a>来定义的
<img src = "/image/logo.png" width="258" height="39"/>
HTML元素
属性是HTML元素提供的附加信息。
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般开始于开始标签
- 属性总是以名称/值对的形式出现。比如：name = “value”。
HTML属性参考
| 属性 | 描述 |
|---|
| class | 为html元素定义一个或多个类名(classname) (类名从样式文件引入) | | id | 定义元素的唯一id | | style | 规定元素的行内样式 | | title | 描述了元素的额外信息 |
HTML水平线
<hr>标签在HTML页面中创建水平线。可用于分隔内容。
水平线
HTML注释
浏览器会忽略注释，不会显示。
HTML段落
段落通过<p>来定义。
<p>这是一个段落</p>
<p>这是另一个段落</p>
- 浏览器会自动地在段落的前后两行添加空行。(</p>是块级元素)
HTML折行
如果希望在不产生一个新段落的情况下进行换行，请使用<br>标签
<p>这个<br>段落<br>演示了分行的效果</p>
结果显示为：
这个
段落
演示了分行的效果
HTML输出格式影响
对于HTML，无法通过在HTML代码中添加额外的空格或换行来改变输出的效果。
当显示页面的时候，浏览器会移除源代码中多余的空格和空行。所有连续的空格都会被显示为一个空格，多个空行同理。
HTML文本字体
<b>加粗文本</b>
<br>
<i>斜体文本<i>
<br>
<code>电脑自动输出</code>
<br>
这是<sub>下标</sub>和<sup>上标</sup>
通常标签<strong>替换加粗标签<b>来使用，<em>替换<i>使用
HTML<head>
<title>元素
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎页面的标题
<base>元素
<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
<link>元素
- <link>标签定义了文档与外部资源之间的关系。
- <link> 标签通常用于链接到样式表:
<style>元素
- <style>标签定义了HTML文档的样式文件引用地址.
- <style>元素中你也可以直接添加样式来渲染 HTML 文档:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML图像
<img src = "url" alt="some_text">
url指存储图像的位置。
- 浏览器将图像显示在文档中图像标签出现的地方。如果你的图像标签置于两个段落之间，那么浏览器会首先希纳是第一个段落，然后显示图片，最后显示第二段。
alt属性
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
设置图像的高度与宽度
<img src="maker.jpg" alt="Pulpit rock" width="304" height="228">
属性值默认为像素
HTML表格
- 表格由<table>标签定义
- 表格内行由标签<border=“1”
cellpadding=“10”>定义，每行内由<td>标签分割为若干单元格。td数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格和边框属性
使用<border>；<table border=“1”>
表格表头
使用<th>标签进行定义。大对数表头会把表头显示为粗体居中的文本
单元格边距
<table border=“1” cellpadding=“10”>
跨列
<td colspan=“2” style=“background-color:#FFA500;”>
表示占两列的长度，这两劣合并成一列
HTML列表
无序列表：有序列表始于<ul>标签。每个列表项始于<li>标签
有序列表：有序列表始于<ol>标签。每个列表项始于<li>标签
自定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- White cold drink</dd>
</dl>
浏览器显示如下：
Coffee
- black hot drink
Milk
- White cold drink
HTML区块
大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始(和结束)。如：<h1><p><ul><table>
内联元素在显示时通常不会以新行开始。如：<b>,<td>,<a>,<img>
<div>元素
<div>为块级元素，可用于组合其他HTML元素的容器。如果与CSS一同使用，<div>元素可用于对大的内容块设置样式属性
<span>
<span>为内联元素，可用作文本的容器。
如果与CSS一同使用，<div>元素可用于对部分文本设置样式属性
CSS
CSS实例
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
id和class选择器
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，CSS中id选择器以“#”来定义。
#para1{
text-align:center;
color:red;
}
class选择器
class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."表示：
.center{text-align:center;}
所有拥有center类的HTML元素均为居中
也可以指定特定的HTML元素使用class。
在以下实例中，所有的p元素使用class = "center"让该元素的文本居中。
p.center{text-align:center}
如何插入样式表
CSS 可以通过以下方式添加到HTML中:
- 内联样式- 在HTML元素中使用"style" 属性
- 内部样式表 -在HTML文档头部 区域使用<style>元素 来包含CSS
- 外部引用 - 使用外部 CSS 文件
内联样式表
使用<style>标签在文档头部定义内部样式表。
<head>
<style>
hr{color:sienna;}
p {margin-left:20px;}
body{background-image:url("images/back40.gif");}
作业总结
多个按钮居中，一排显示：
.btn{
display:inline-block;
margin: 0 auto;
outline:none;
border:none;
}
float:left使得多个块可以在同一行显示，但是有个大坑，这会使得其父元素背景的图片被遮住。因为运用了这个属性的块浮动，使得其父元素没有被子元素撑开，使得背景图片没有办法被展示出来。
|