HTML基础知识整合复习总结

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
====================================== HTML基础知识整合复习总结 ======================================<!DOCTYPE> 声明帮助浏览器正确地显示网页。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
带有 HTML5 DOCTYPE 的 HTML 文档:【<!DOCTYPE html>】放于html文件最顶端。
HTML:1991年;XHTML 1.0:2000年;HTML5:2012年;XHTML5:2013年。常用声明如下:
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 。
浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容;HTML 文档包含 HTML 标签和纯文本。
【标题】h1-h6:42,31,25,21,17,16.p:21.【big:25】【text:21】【small:17】开始标签常被称为开放标签(opening tag),结束标签常称为闭合标签(closing tag)。
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。某些 HTML 元素具有空内容(empty content)
空元素在开始标签中进行关闭(以开始标签的结束而结束);大多数 HTML 元素可拥有属性。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。
HTML 标签对大小写不敏感,但万维网联盟(W3C)在 HTML 4 中推荐使用小写。属性值应该始终被包括在引号内。
双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号。
适用于大多数 HTML 元素的属性:class【规定元素的类名(classname)】,id【规定元素的唯一 id】,
style【规定元素的行内样式(inline style)】,title【规定元素的额外信息(可在工具提示中显示)】。当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。
浏览器会自动地在标题的前后添加空行。默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题,地址(address)元素前后。
搜索引擎使用标题为您的网页的结构和内容编制索引。<hr /> 标签在 HTML 页面中创建水平线。【HTML注释】<!-- This is a comment -->
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。样式是 HTML 4 引入的。
避免使用下面这些被废弃的标签和属性:【<center>】定义居中的内容,对文本进行水平居中;【<font> 和 <basefont>】定义 HTML 字体;【<s> 和 <strike>】定义删除线文本。
【<u>】定义下划线文本。【align】定义文本的对齐方式;【bgcolor】定义背景颜色;【color】定义文本颜色。以上这些标签和属性:请使用样式代替!
style 属性:font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸。
background-color属性定义背景颜色。text-align 属性规定了元素中文本的对齐方式。【<pre>标签很适合显示计算机代码】定义预格式文本。
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
【<blockquote>】长引用(节),浏览器默认进行缩进处理;【<q>】短的引用,浏览器给其元素内容自带双引号;【<b>】定义粗体文本;【<big>】定义大号字;【<em>】定义着重文字;【<i>】定义斜体字。
【<small>】定义小号字;【<strong>】定义加重语气;【<sub>】定义下标字;【<sup>】定义上标字;【<ins>】定义插入字(下划线);【<del>】定义删除字。
【<cite>】定义引用、引证;通常会以斜体显示,定义著作的标题。【<address>】定义地址,定义文档作者或拥有者的联系信息;【<abbr title="">】定义缩写,title里边写全称;【<bdo dir="rtl">】定义文字方向,从右向左输出。
【<code>】元素定义编程代码示例,不保留多余的空格和折行;【<var>】定义变量,默认斜体。
<!--[if IE 8]>.... some HTML here ....条件注释定义只有 Internet Explorer 执行的 HTML 标签。貌似不支持。
<![endif]-->
通过使用 HTML4.0,所有的格式化代码均可移出 HTML 文档,然后移入一个独立的样式表。【注意:内|外部样式表通常放在<head>标签内】
外部样式表【当样式需要被应用到很多页面的时候】【<link rel="stylesheet" type="text/css" href="mystyle.css">】
内部样式表【当单个文件需要特别样式时,
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>】
内联样式【在相关的标签中使用样式属性style,各个属性用分号隔开】【<link />】定义资源引用;【<div>】定义文档中的节或区域(块级);【<span>】定义文档中的行内的小块或区域。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。注意:应该在href中?后边传的参数中使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像。通过使用 href 属性 - 创建指向另一个文档的链接,通过使用 name 属性 - 创建文档内的书签。【target="_blank"】新窗口打开文档,使用 target 属性,你可以定义被链接的文档在何处显示。
name 属性规定锚(anchor)的名称。即书签,它对读者是不可见;使用者就无需不停地滚动页面来寻找他们需要的信息了。<a name="tips">这是书签,有用的提示</a>  在同一个文档中创建指向该锚的链接【注意:#+书签名】: <a href="#tips">有用的提示</a>。
<img> 是空标签,意思是说,它只包含属性,并且没有闭合标签。【src源属性的值是图像的 URL 地址】【align属性:bottom,middle,top;left,right;定义文字中的图像】【alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像】【<body background="/i/eg_background.jpg">如果图像小于页面,图像会进行重复。背景图片】【<map>】定义图像地图;【<area>】定义图像地图中的可点击区域;【<img />】定义图像。
【<table>】元素的作用是显示表格化的数据。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。【<td>&nbsp;</td>】在空单元格中添加一个空格占位符,就可以将边框显示出来。【colspan="2" 横跨2列】【rowspan="2" 横跨2行】
【<td align="left">或right|center】使用 "align" 属性排列单元格内容。表格默认边框border属性为0.表格属性(可放于【<table>|<tr>|<td>中):【(1)bgcolor】背景颜色属性;【(2)background】背景图片属性。表格【<table>】特有属性:【cellspacing="2"】单元格间距;【cellpadding="10"】单元格内边距.
【<caption>】默认放于表格顶部居中那个位置,定义表格标题;【<th>】定义表头,默认加粗用法同<td>;
【<thead>】定义表格页眉;【<tbody>】定义表格主体;【<tfoot>】定义表格页脚;很少被使用,这是因为糟糕的浏览器支持。<thead> 内部必须拥有 <tr> 标签!
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。【<li>】定义列表项;【<dl>】定义自定义列表;【<dt>】定义定义项目;【<dd>】定义定义的描述。
【<ol type="A|a|I|i">】(大小写字母,罗马字母)有序列表列表项目默认使用数字进行标记;【<ul type="disc|circle|square">】无序列表默认使用粗体圆点disc(典型的小黑圆圈)进行标记。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。浏览器显示如下:
Coffee
Black hot drink
Milk
White cold drink
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
块级元素在浏览器显示时,通常会以新行来开始(和结束),浏览器会在其前后显示折行。内联元素在显示时通常不会以新行开始。
【<div>】定义文档中的节或区域(块级);【<span>】定义文档中的行内的小块或区域。<div> 元素没有特定的含义;<span> 元素也没有特定的含义。
HTML 【<div>】 元素是块级元素,它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。
HTML 【<span>】元素是内联元素,可用作文本的容器。当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会有任何视觉上的差异。
RWD 指的是响应式 Web 设计(Responsive Web Design);RWD 能够以可变尺寸传递网页;RWD 对于平板和移动设备是必需的。
创建响应式设计的一个方法,是自己来创建它。另一个创建响应式设计的方法,是使用现成的 CSS 框架。Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。Bootstrap 帮助您开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机。
【<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">】
【<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">】属性值可以是十六进制数、RGB 值或颜色名。
【<body background="clouds.gif">】URL可以是相对地址,也可以使绝对地址【"C:\Users\Administrator\Desktop\个人资料\1.png"】。背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。图像文件不应超过 10k。
<body> 拥有两个配置背景的标签,背景可以是颜色或者图像。<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃。应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性。
<script> 标签用于定义客户端脚本,必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。<noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
应付老式的浏览器:如果浏览器压根没法识别 <script> 标签,那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生,你应该将脚本隐藏在注释标签当中。那些老的浏览器(无法识别 <script> 标签的浏览器)将忽略这些注释,所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们,即使代码被嵌套在注释标签内。
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<img src="../picture.jpg">picture.jpg 位于当前文件夹的上一级文件夹中;<img src="/images/picture.jpg">picture.jpg 当前站点根目录的 images 文件夹中。
相对路径指向了相对于当前页面的文件;绝对文件路径是指向一个因特网文件的完整 URL。【<img src="https://www.w3school.com.cn/images/picture.jpg" alt="flower">】使用相对路径是个好习惯(如果可能)。那么您的网页就不会与当前的基准 URL 进行绑定。
<head> 元素是所有头部元素的容器,可以添加到 head 部分:【<title>、<base>、<link>、<meta>、<script> 以及 <style>】。
【<title>】定义文档的标题,在所有 HTML/XHTML 文档中都是必需的,显示在搜索引擎结果中的页面标题;【<base target="_blank" />】为页面上的所有链接规定默认地址或默认目标(target);【<link>】标签定义文档与外部样式表资源之间的关系。
【<meta>】标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。始终位于 head 元素中。元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。【name="description"】定义页面的描述;【name="keywords"】定义页面的关键词;【name="author"】标识了创作者;【content="HTML, CSS, XML"】描述页面的内容。
预留字符必须被替换为字符实体。&entity_name;或者&#entity_number;使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
HTML 中的常用字符实体是不间断空格non-breaking space【(&nbsp;)】。实体名称对大小写敏感!
【&nbsp;空格】【&lt;小于号<】【&gt;大于号>】【&amp;和号&】【&apos;撇号'】【&quot;引号"】【&yen;元】【&copy;版权】【&times;乘号×】【&divide;除号÷】
统一资源定位器(URL-Uniform Resource Locator)用于定位万维网上的文档(或其他数据)。中文也译为“统一资源定位符”。
网址遵守以下的语法规则:scheme://host.domain:port/path/filename
【scheme - 定义因特网服务的类型。最常见的类型是 http】
【host - 定义域主机(http 的默认主机是 www)】
【domain - 定义因特网域名,比如 w3school.com.cn】
【:port - 定义主机上的端口号(http 的默认端口号是 80)】
【path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)】
【filename - 定义文档/资源的名称】
【scheme:http;访问:超文本传输协议;用于以 http:// 开头的普通网页。不加密。】【scheme:https;访问:安全超文本传输协议;用于安全网页。加密所有信息交换。】
【scheme:ftp;访问:文件传输协议;用于将文件下载或上传至网站。】【scheme:file;访问:无;用于您计算机上的文件。】
URL 编码会将字符转换为可通过因特网传输的格式。Web 浏览器通过 URL 从 web 服务器请求页面。URL 只能使用 ASCII 字符集来通过因特网进行发送。URL 不能包含空格。URL 编码通常使用 + 来替换空格而不是产生空格(因为URL 不能包含空格。)。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
托管网站(将网站存放在web服务器上):硬件支出;软件支出;人工费。使用因特网服务提供商(ISP)的优势:连接速度高速;强大的硬件;提供高效的负载平衡,以及必要的备份服务器;安全性和可靠性:提供 99% 以上的在线时间,最新的软件补丁,以及最好的病毒防护。
选择 ISP 时的注意事项:24 小时支持;每日备份;带宽或内容限制;数据库访问。
颜色由红色、绿色、蓝色混合而成。
仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。
最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。学了之后,如果不经常使用,过了不久便会忘记,学会总结,善于总结是一种习惯!以便于忘了之后,回来翻看便能迅速拾起知识!!!多动手,多总结!
多动手,多总结!
多动手,多总结!

HTML基础知识整合复习总结相关推荐

  1. 计算机二级循环队列知识点,考点!计算机二级考试公共基础知识冲刺复习笔记:栈、队列和循环队列...

    小编所收集到的相关计算机二级考试公共基础知识冲刺复习笔记:栈.队列和循环队列的资料 大家要认真阅读哦! 1.栈(Stack)又称堆栈. (1)栈是一种运算受限的线性表,其限制是仅允许在表的一端进行插入 ...

  2. 计算机二级链表,你知道吗?计算机二级考试公共基础知识冲刺复习笔记:线性链表、双向链表与循环链表...

    小编所收集到的相关计算机二级考试公共基础知识冲刺复习笔记:线性链表.双向链表与循环链表的资料 大家要认真阅读哦! 1.数据结构中,每个数据存储在一个存储单元中,这个存储单元称为结点.在链式存储方式中, ...

  3. html+css基础知识整合 2021-08-30

    html基础知识整合 文章目录 **html基础知识整合** [web的组成] [HTML5基本语法] 常规标签(普通标签.双标签) [文章标签] [修饰标签] [特殊字符] [HTML注释] [列表 ...

  4. Hadoop之Hadoop基础知识面试复习

    Hadoop之Hadoop基础知识常问面试题 列举几个hadoop生态圈的组件并做简要描述. Zookeeper:是一个开源的分布式应用程序协调服务,基于zookeeper可以实现同步服务,配置维护, ...

  5. 01.软件测试基础知识整合

    软件测试基础 前言 一.什么是软件测试 二.软件测试的目的 三.软件测试的基本流程 四.测试分类 五.测试用例 1.什么是测试用例 2.测试用例的重要性 3.测试用例的设计方法 4.测试点分析 5.如 ...

  6. Mysql数据库基础知识总复习

    前言 小亭子正在努力的学习编程,接下来将开启javaEE的学习~~ 分享的文章都是学习的笔记和感悟,如有不妥之处希望大佬们批评指正~~ 同时如果本文对你有帮助的话,烦请点赞关注支持一波, 感激不尽~~ ...

  7. 移动编程基础知识(复习提纲)

    目录 一.Android系统架构分为哪四个层次,每一层所提供的基本功能是什么? 二.Android项目资源程序文件夹res中,子文件夹layout.values.drawable.raw各有什么作用? ...

  8. TCP IP基础知识的复习

    TCP/IP网络协议栈分为应用层(Application).传输层(Transport).网络层(Network)和链路层(Link)四层.如下图所示 两台计算机通过TCP/IP协议通讯的过程如下所示 ...

  9. JavaScript基础知识总结复习(一)

    一. JS三种书写位置 行内式 <input type="button" value="点击了按钮" onclick="alert('我是行内j ...

最新文章

  1. 12306架构到底是不是国内最牛逼的架构
  2. Python使用matplotlib保存图像时发生自动裁剪丢了部分标签信息解决方案(plt.savefig保存时丢失了部分标签字符)
  3. 使用MapReduce程序完成相关数据预处理(二)
  4. SpringBoot 路径处理
  5. volatile关键字及编译器指令乱序总结
  6. MFC开发IM-第八篇、调整各个控件的上下tab顺序
  7. C++ and Java template class and function 模板类和模板函数
  8. C++ Arduino 串口输出读取整合
  9. EpsonL360清零软件+清零方法
  10. cdrx4自动排版步骤_coreldraw x4怎么排版 coreldraw书册杂志的排版方法 - 电脑常识 - 服务器之家...
  11. 微信支付开通流程,及微信支付商户号申请详细流程介绍
  12. html用渐变做彩虹,photoshop如何用渐变制作彩虹
  13. 已解决:注册kaggle人机验证出不来
  14. 简单实现点击图片放大的功能
  15. 推荐模型评价指标 AUC
  16. 使用深度学习Web项目的手写Marathi印地语字母书写和检测
  17. 基于阿里云容器镜像服务加速K8S镜像下载
  18. 通信电源专业技术交流
  19. Android 页面或文件或网络请求时的加载动画
  20. 腾讯开放真相:对开发者大小通吃 令人害怕的帝国

热门文章

  1. 西门子S7-1500PLC程序 汽车焊装程序,有RFID 机器人精智面板,多种编程语言并存,FBD SCL STL 变频器控制 伺服控制FB285 FB284控制
  2. linux shell中的kill(1) , conect(2) , select(2)代表什么【转】
  3. 新媒体运营教程:用户运营5大步骤,用户运营具体步骤和需要注意
  4. 惠普笔记本电池充不进电
  5. python 图片拼接_使用Python拼接多张图片
  6. 小马识途:百度热议如何优化?百度热议优化多少钱?
  7. 【AI最前线】精准优质-资讯|分享|热议第42期
  8. python 爬取_Python爬虫爬取马蜂窝北京景点信息
  9. 关于初学Python需要安装哪些软件?我整理了最全的解析,初学必备
  10. 会计分录怎么分清谁是借方,谁是贷方