元素:
HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束)
大多数 HTML 元素可拥有属性
图片.png
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:
等同于
。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。
HTML 的样式属性:
图片.png
style 属性的作用:
提供了一种改变所有 HTML 元素的样式的通用方法。
样式是 HTML 4 引入的,它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式,能够通过使用 style 属性直接将样式添加到 HTML 元素,或者间接地在独立的样式表中(CSS 文件)进行定义。
只能在CSS或style标签中定义,已经废弃的标签:
5845511-86279edf2aa37992.png
文本格式化标签:
图片.png
计算机输出标签:
图片.png
预排版标签
:
1、保留空白字符
2、能够以正常排版方式显示空格与段落
3、字体是等宽字体
如 :
Marry
had a
little
lamb
引用、引用和术语定义:
图片.png
浏览器通常会对
元素进行缩进处理HTML 元素定义缩写或首字母缩略语:
对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
用于联系信息的 HTML
:HTML
元素定义文档或文章的联系信息(作者/拥有者)。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。
HTML 计算机代码格式:
图片.png
通常,HTML 使用可变的字母尺寸,以及可变的字母间距。
在显示计算机代码示例时,并不需要如此。
, , 以及
元素全都支持固定的字母尺寸和间距。
元素不保留多余的空格和折行
HTML 链接:
target 属性:定义被链接的文档在何处显示 target=”_blank:新窗口
name 属性:
图片.png
HTML图像:
使用style控制宽与高,以防样式比例影响大小
URL 指存储图像的位置。如果名为 “boat.gif” 的图像位于 www.w3school.com.cn 的 images 目录中,那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。
注释:img 元素中的 “usemap” 属性可以引用 map 元素中的 “id” 或 “name” 属性(根据浏览器)
HTML 表格:
表格的表头使用
标签进行定义。表示行表示列 可用空位占位符 表示空白元素
图片.png
无序列表:
无序列表始于
- 标签。每个列表项始于
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表:
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于
- 标签。每个列表项始于
- 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
HTML
元素HTML
元素是块级元素,它是可用于组合其他 HTML 元素的容器。元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。如果与 CSS 一同使用,
元素可用于对大的内容块设置样式属性。元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用HTML 元素
HTML 元素是内联元素,可用作文本的容器。
元素也没有特定的含义。
当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。
CSS定制布局的使用场景:
1、内联-在HTML元素中使用样式属性
This is a Blue Heading
2、内部——在HTML 部分中使用< style >元素
a.在head中定义样式(布局与格式):
/ #header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
在body中分块使用布局:
b.在head中直接定义标签属性:
body {background-color: lightgrey;}
h1 {color: blue;}
p {color: green;}
3、外部——使用一个或多个外部CSS文件
在head中使用link标签: 外部样式表内容与2.b接近。
CSS各种样式属性:http://w3schools.bootcss.com/html/html_css.html
HTML5 的网站布局:
图片.png
图片.png
响应式 Web 设计:
1、分类块级元素定制布局,使用
元素的 HTML 布局:在head中定义样式类:
div.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
可用于定义表格布局类table.lamp,在表格标签中使用。
在body中分块,块元素引用样式:
。。。。2、使用 W3.css动态css框架,在head中添加依赖
【测试】:http://w3schools.bootcss.com/html/tryhtml_w3css.html?filename=tryhtml_w3css
3、bootstrap
HTML 框架(初始字符:This page is displayed in an iframe):
URL是显示该框架页面的地址
width=”200″ height=”200″ 使用高度和宽度属性或百分比例来指定大小
style=”border:none red”” 去除框架边界,定义边界颜色等
在框架中显示web页面:
一个iframe可以作为一个链接的目标框架。
链接的目标属性必须引用iframe的name属性
HTML 框架(初始字符:This page is displayed in an iframe):
在页面头元素的标签如下:
图片.png
1、HTML
:在浏览器选项卡中定义一个标题
为页面添加添加到收藏夹时的标题
在搜索引擎结果中显示页面的标题
2、HTML
在< style >元素中,您指定在浏览器中HTML元素的呈现方式
3、HTML :
元素将页面关系定义为外部资源。
元素通常用于链接样式表
4、HTML:
元素用于指定页面描述、关键字、作者和其他元数据。
元数据由浏览器(如何显示内容)、搜索引擎(关键字)和其他web服务使用。
5、HTML JavaScript:
标记用于为禁用脚本或者不支持客户端脚本的浏览器的用户提供另一种内容,元素可以包含您可以在普通HTML页面的< body >元素中找到的所有元素。检测当前浏览器不支持时,该标签内容会显示HTML 字符实体:
图片.png