美文网首页我爱编程
HTML基本知识（二）

HTML基本知识（二）

作者: 汀沙云树晚苍苍 | 来源:发表于2017-05-16 13:23 被阅读0次

列表

  1. 无序列表<ul>标签,<li>项 
<ul type="disc">实心点
<ul type="circle">空心点
<ul type="square"> 方实心点
  1. 有序列表<ol>标签,<li>项 
<ol> 默认为数字
<ol type="A"> 大写字母列表
<ol type="a"> 小写字母列表
<ol type="I"> 罗马字母列表
<ol type="i"> 小写罗马字母列表
  1. 自定义列表
<dl>             以<dl>标签开始
<dt>Coffee</dt>  每个自定义项以<dt>开始
<dd>Black hot drink</dd> 每个自定义列表项的定义以 <dd> 开始
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

-嵌套列表

<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ul>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

块

  • <div>块级元素，可用于组合其他HTML元素的容器，开始或结束会以新行开始。定义文档中的分区或节（division/section）
  • <span>內联元素，可用作文本的容器，用来组合文档中的行内元素

类

设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

.cities {       设置<div>元素的类 cities
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
<div class="cities"> 引用cities
<div class="cities"> 引用cities
<div class="cities"> 引用cities

span同理：

span.red {color:red;} 设置span元素的类
<span class="red">Important</span>  引用

布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

html5语义元素

元素 描述
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义details元素的标题 
<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<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>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>

</body>

使用表格的HTML布局
注释：<table> 元素不是作为布局工具而设计的。
<table> 元素的作用是显示表格化的数据。
使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

<body>
<table class="lamp">
<tr>
  <th>
    ![](/images/lamp.jpg)
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>
</body>

HTML 响应式 Web 设计

什么是响应式 Web 设计？

  • RWD 指的是响应式 Web 设计（Responsive Web -Design）
  • RWD 能够以可变尺寸传递网页
  • RWD 对于平板和移动设备是必需的

使用 Bootstrap
另一个创建响应式设计的方法，是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。
Bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架结构标签（<frameset>）
框架结构标签（<frameset>）定义如何将窗口分割为框架

  • 每个 frameset 定义了一系列行或列
  • rows/columns 的值规定了每行或每列占据屏幕的面积
    编者注：frameset 标签也被某些文章和书籍译为框架集。

在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：

<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。

<frameset cols="50%,50%"> 行分2半
<frameset rows="50%,50%">列分2半

导航

导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。

！！！！！具体在看看

內联框架

iframe用于在网页内显示网页
<iframe src="URL"></iframe>
<iframe src="demo_iframe.htm" width="200" height="200"></iframe> 规定iframe的高度和宽度
<iframe src="demo_iframe.htm" frameborder="0"></iframe>把属性值设为0，可以移除边框

使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

背景

<body bgcolor="#000000">
<body background="clouds.gif">

脚本

<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：

如何应付老式的浏览器
如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

标签 | 描述 | 注意事项| --
----|------|----|
'<head>' | 定义关于文档的信息 | <head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等| 以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>
'<title>'| 定义文档标题 | title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够：定义浏览器工具栏中的标题提供页面被添加到收藏夹时显示的标题显示在搜索引擎结果中的页面标题| --
'<base>' | -- | 标签为页面上的所有链接规定默认地址或默认目标（target）：| <head><base href="http://www.w3school.com.cn/images/" /><base target="_blank" /></head>
'<link>' | 定义文档与外部资源之间的关系 | <link> 标签最常用于连接样式表：| <head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>
'<meta>'| 定义关于HTML文档的元数据 | 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 | 元数据不会显示在页面上，但是对于机器是可读的。
'<script>' | 定义客户端脚本 | --|--
'<style>' | 定义文档的样式信息 | 您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：| <head><style type="text/css">body {background-color:yellow}p {color:blue}</style></head>

字符实体

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
实体名称对大小写敏感！
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

显示结果 描述 实体名称 实体编号
空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号 &apos; (IE不支持) &#39;
￠ 分(cent) &cent; &#162;
£ 镑(pound) &pound; &#163;
¥ 元(yen) &yen; &#165;
€ 欧元(euro) &euro; &#8364;
§ 小节 &sect; &#167;
© 版权(copyright) &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

URL

URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
遵守以下的语法规则：
scheme://host.domain:port/path/filename

解释：

  • scheme - 定义因特网服务的类型。最常见的类型是 http
  • host - 定义域主机（http 的默认主机是 www）
  • domain - 定义因特网域名，比如 w3school.com.cn
  • :port - 定义主机上的端口号（http 的默认端口号是 80）
  • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
  • filename - 定义文档/资源的名称

URL Schemes

以下是其中一些最流行的 scheme：

Scheme 访问 用于...
http 超文本传输协议 以 http:// 开头的普通网页。不加密。
https 安全超文本传输协议 安全网页。加密所有信息交换。
ftp 文件传输协议 用于将文件下载或上传至网站。
file 您计算机上的文件。

URL 字符编码

URL 只能使用 [ASCII 字符集]来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。

字符 url编码
€ %80
£ %A3
© %A9
® %AE
À %C0
Á %C1
 %C2
à %C3
Ä %C4
Å %C5

<!DOCTYPE>

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

常用的声明
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 4.01 快速参考

http://www.w3school.com.cn/html/html_quick.asp

相关文章

  • HTML基本知识（二）

    列表 无序列表 标签, 项 有序列表 标签, 项 自定义列表 -嵌套列表 块 块级元素，可用于组合其他HTML元素...

  • HTML基本知识

    小知识： HTML基本知识

  • 使用centrifuge对接websocket

    准备工作 了解 websocket 基本知识 https://www.runoob.com/html/html5...

  • HTML 基础

    HTML基础 本文包括 HTML基本知识与结构 HTML常见标签 标签写法与嵌套的讨论 HTML、CSS、java...

  • Html 基本知识

    首先学习一下标签吧，写几个不熟悉的。 标签的属性定义了与文档相关联的名称/值对。 标签最常见的用途是链接样式表...

  • HTML基本知识

    HTML的全称 中文：超文本标记语言 英文：HyperText Markup Language HTML是由W3C...

  • HTML的学习

    HTML的基本知识 HTML指的是一种超文本标记语言 HTML不是一种编程语言，而是一种标记语言。 HTML使用标...

  • HTML的基本知识

    1.HTML、XML、XHTML 有什么区别 html 超文本标记语言（Hyper Text Markup Lan...

  • Html和CSS、JavaScript的基本知识点

    Html和CSS、JavaScript的基本知识点 Html用于描述网页的超文本标记语言，所谓的超文本是指可以包含...

  • 前端HTML的基本知识

    1.HTML是什么? <1>HTML它是超文本标记语音.<2>它负责网页的三个要素之中的结构.<3>HTML使用标...

网友评论

    本文标题：HTML基本知识（二）

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

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    我爱编程

    关于我们|服务条款|联系我们|HTML基本知识（二）|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！