美文网首页我爱编程
W3C HTML学习笔记(一)

W3C HTML学习笔记(一)

作者: 做有趣的恶魔 | 来源:发表于2017-09-22 15:49 被阅读21次

html参考手册 —— 温故而知新

HTML简介

  • HTML 不是一种编程语言,而是一种用来描述网页的超文本标记语言 ( HyperText Markup Language)。
  • HTML 使用标记标签来描述网页,HTML文档即网页(web 页面)。

日常使用的Web浏览器(如谷歌浏览器,Internet Explorer,Firefox,Safari)通过读取HTML文件,并根据HTML标签来决定如何显示HTML页面的内容给用户。

HTML元素

HTML 文档由 HTML 元素定义。

  • 元素的内容是起始标签(opening tag)与闭合标签(closing tag)之间的内容。
  • 某些 HTML 元素具有空内容(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束)。
  • 大多数 HTML 元素可拥有属性。

注意:
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
关闭空元素的正确方法是在开始标签中添加斜杠,比如<br />,HTML、XHTML 和 XML 都接受这种方式。

HTML属性

属性是 HTML 元素提供的附加信息。

  • HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
  • 属性一般在开始标签内描述。
  • 属性总是以名称/值对的形式出现,比如:name="value"
  • 属性和属性值对大小写不敏感,但推荐使用小写。

注意:
属性值应该始终被包括在引号内(单/双引号都可以)。
但如果属性值本身就含有双引号,那么就必须使用单引号。
例如:name='Game "of" Throne'

HTML标题

  • 因为用户可以通过标题来快速浏览您的网页,所以在 HTML 文档结构中,标题是很重要的。
  • 请确保将 HTML 标题 <h1> - <h6> 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
  • 搜索引擎使用标题为网页的结构和内容编制索引。
  • 1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。

HTML段落

段落标签<p></p>可以把 HTML 文档分割为若干段落。

  • 浏览器会自动地在段落的前后添加空行。(</p> 是块级元素)
  • 如果希望在不产生一个新段落的情况下进行换行(新行),请使用 <br /> 标签。
  • 在 HTML 代码中,无法通过添加额外的空格或换行来改变输出的效果。
  • 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被显示为一个空格。

HTML样式

style属性用于改变 HTML 元素的样式。

  • 请避免使用这些被废弃的标签和属性
标签 描述
<center> 定义居中的内容。
<font><basefont> 定义 HTML 字体。
<s><strike> 定义删除线文本。
<u> 定义下划线文本。
属性 描述
align 定义文本的对齐方式。
bgcolor 定义背景颜色。
color 定义文本颜色。
  • 对于以上这些标签和属性:请使用样式代替!

HTML格式化

HTML 可定义很多供格式化输出的元素,比如使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如:粗体 or 斜体。
1. 文本格式化标签:

<b> 定义粗体文本。<strong> 定义加重语气。
<big> 定义大号字。 <small> 定义小号字。
<i> 定义斜体字。 <em> 定义着重文字。
<sup> 定义上标字。 <sub> 定义下标字。
<ins> 定义插入字。 <del> 定义删除字。

<u>为文本添加下划线。

  • 通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
  • 通常标签<del>替换定义加删除线的文本定义标签 <s> 和 <strike>。

2. “计算机输出”标签:

<code>定义计算机代码。<samp>定义计算机代码样本。
<kbd>定义键盘码。 <tt>定义打字机代码。
<var>定义变量。<pre>定义预格式文本。

  • 被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
  • <listing><plaintext><xmp>不赞成使用,使用 <pre>代替。
  • <pre> 标签的一个常见应用就是用来表示计算机的源代码。

注意:

  1. pre元素是块级元素,但是只能包含文本或行内元素。也就是说,任何常见的可以导致段落断开的块级元素标签都不能位于pre元素中。
    eg: 标题 <p> <address> (<address> 元素中的文本通常呈现为斜体,而且大多数浏览器会在 <address >元素前后添加折行)
  2. pre元素中允许的文本可以包含物理样式和基于内容的样式变化(W3C的HTML 教程延伸阅读:改变文本的外观和含义),还有<a>链接、<img>图像和<hr />水平分隔线。当把其他标签,比如<a>标签放到<pre>块中时,就像放在HTML/XHTML文档的其他部分中一样即可。
  3. 制表符tab在<pre>标签定义的块当中可以起到应有的作用,每个制表符占据8个字符的位置,但并不推荐使用tab,因为在不同的浏览器中,tab的表现形式各不相同。在用<pre>标签格式化的文档段中使用空格,可以确保文本正确的水平位置。
  4. 如果您希望使用 <pre> 标签来定义计算机源代码,比如 HTML 源代码,请使用符号实体来表示特殊字符,比如 "& lt;" 代表 "<","& gt;" 代表 ">","& amp;" 代表 "&"。 一般将<pre>标签与<code>标签结合起来使用,以获得更加精确的语义,用于标记页面中需要呈现的源代码。

文本显示格式笔记:
页面显示结果:文本显示为单行,超过部分···

html结构:
 <div> 
   文本显示为单行,超过部分隐藏并使用省略号
   修改 width 属性查看效果。
 </div>


css样式:
div {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:200px;
}

页面显示结果:

文本显示为两
行,超过部分···
html结构:
 <div> 
   文本显示为两行,超过部分隐藏并使用省略号修改 width 属性查看效果。使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)。
 </div>

css样式:
div {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  width:100px;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

相关文章

  • W3C HTML学习笔记(一)

    html参考手册 —— 温故而知新 HTML简介 HTML 不是一种编程语言,而是一种用来描述网页的超文本标记语言...

  • W3C HTML学习笔记(三)

    HTML框架 通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都...

  • W3C HTML学习笔记(二)

    HTML引用 元素定义短的引用,浏览器通常会为 元素包围引号。 元素定义被引用的节,浏览器通常会对 元素进...

  • 20170809html学习(一)语法结构

    HTML学习(一)语法结构 参考 HTML 教程 - w3school 在线教程HTML 教程| 菜鸟教程W3C ...

  • 前端笔记之html+css

    学习目标:重温html+css 学习过程:w3c课程+慕课网html+css 完成:100% 什么是盒子模型? 参...

  • 01-HTML基础

    学习目标 1、本专业介绍、HTML相关概念,HTML发展历史2、WEB标准,W3C/WHATWG/ECMA相关概念...

  • HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

网友评论

    本文标题:W3C HTML学习笔记(一)

    本文链接:https://www.haomeiwen.com/subject/bkozsxtx.html