HTML复习三

一、HTML文件路径

1、相对文件路径

当前文件夹下:

<img src="picture.jpg">

当前文件夹下的子文件夹下:

<img src="images/picture.jpg">

当前网站的根目录下:

<img src="/images/picture.jpg">

当前文件夹的上层目录下:

<img src="../picture.jpg">

当前文件夹的上两层目录下:

<img src="../../picture.jpg">

2、绝对文件路径

<img src="http://www.icoder.top/picture.jpg">

二、HTML头部

1、<titile>

title元素会展示在:

  • 浏览器的标签页上标题
  • 添加收藏时的标题
  • 搜索引擎搜索结果的标题
<head>
    <titile>代码的荣耀<title>
</head>

2、<style>元素

定义此页面样式:

<style>
...
</style>

3、<link>元素

链接外部样式表:

<link rel="stylesheet" href="style.css">

4、<meta>元素

定义字符集:

<meta charset="UTF-8">

定义页面描述:

<meta name="description" content="Free web tutorials">

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML">

定义页面作者:

<meta name="author" content="zhangrj">

每隔三十秒刷新文件:

<meta http-equiv="refresh" content="30">

5、设置视口

HTML5引入了一个新的方法来控制视口,视口即用户当前页面的可视区域,随着设备的不同而变化,应当在所有页面的mata中加入:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个元素告诉浏览器如何控制页面尺寸及页面缩放。

width=device-width将页面尺寸设置为设备尺寸。

initial-scale=1.0设置页面被加载时的初始缩放级别。

6、<script>元素

<script type="text/javascript">
...
</script>

<script type="text/javascript" src="example.js">

7、base元素

为页面上的所有相对URL指定基本链接和基本目标:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>

<img src="html5.gif">
<p>Since we have specified a base URL, the browser will look for the image "html5.gif" at "https://www.w3schools.com/images/html5.gif"</p>

<p><a href="https://www.w3schools.com">W3Schools</a></p>
<p>The link above opens in a new window. This is because the base target is set to "_blank".</p>

</body>
</html>

8、缺省<html>、<head>、<body>

根据HTML5标准,这些标签是可以省略的:

<!DOCTYPE html>
<title>Page Title</title>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

但绝不推荐缺省标签,会使DOM或XML软件崩溃,在老式浏览器(IE9)中也会产生错误。

三、HTML页面布局

1、HTML布局元素

HTML布局

  • <header>——整个页面或某个section的头部
  • <nav>——导航链接容器
  • <section>——节
  • <article>——独立的自包含文章
  • <aside>——内容之外的内容,比如侧边栏
  • <footer>——整个页面或某个section的页脚
  • <details>——定义额外的细节
  • <summary>——定义<details>的标题

2、HTML的布局技术

  • HTML表格(不推荐使用)
  • CSS的float属性(常见,但不够灵活)
  • CSS框架(例如W3.CSS或Bootstrap)
  • CSS flexbox(CSS3中的新布局模式,灵活,但不兼容IE10及更早的版本)

四、HTML计算机代码元素

1、<kbd>

代表用户输入,通常显示为浏览器默认宽字体。

<p>Save the document by  pressing <kbd>Ctrl + S</kbd></p>

2、<samp>

代表程序或系统输出,通常显示为浏览器默认宽字体。

<p>If you input wrong value, the program will return <samp>ERROR!</samp><p>

3、<code>

定义一段代码,通常显示为浏览器默认宽字体。

<code>
x = 5;
y = 6;
z = x + y;
</code>

<code>元素显示时不会保留空格与换行符,如果要保留格式,可以将其包含在<pre>元素中。

<pre>
<code>
    ...
</code>
<pre>

4、<var>

定义变量:

Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.

五、HTML实体

HTML中的保留字符·必须用字符实体取代。

键盘上不存在的字符也可以通过实体取代。

如果在文本中使用<、>号,浏览器可能会将其与标签混淆。

字符实体的用法:

&entity_name;

or

&#entity_number;

比如小于号<,可以写成&lt或者&#60。

实体名称虽然容易记忆,但浏览器对名称的支持可能并不完善,而对实编号的支持则相对较好。

1、不间断空格:&nbsp;

有两个用途:

  • 用不间断空格分隔的两个单词将会被绑定在一起,如10 km/h
  • 防止浏览器截断页面上的空格,例如妮在文本中写下十个空格,浏览器会自动删除其中的9个。

2、常用字符实体

Result Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
double quotation mark &quot; &#34;
single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;

实体名称是大小写敏感的。

3、语音标记

Mark Character Construct Result
 ̀ a a&#768;
 ́ a a&#769;
̂ a a&#770;
 ̃ a a&#771;
 ̀ O O&#768;
 ́ O O&#769;
̂ O O&#770;
 ̃ O O&#771;
发帖时间: web