为笔试做准备——HTML复习一

一、基础示例

<!DOCTYPE html>
<html lang="en-US">
<body>
    <h1>Firdt Heading</h1>
    <p>Paragraph1</p>
    <a href="#">This is a link</a>
    <img src="#" alt="#" width="100" height="100">
</body>
</html>

二、属性

1、lang属性

<html lang="en-US">

<html lang="zh-CN">

2、title属性

<p title="I'm a tooltip">This is a paragraph.</p>

设置鼠标悬停显示的文字。

3、href属性

<a href="#">This ia a link</a>

4、size属性

<img src="#" width="100" height="100">

5、alt属性

<img arc="#" alt="描述“ width="100" height="100">

当图片无法显示时,显示替代文字;

可被屏幕阅读器读取,例如盲人在听这个页面的时候,可以听到这个元素。

6、所有属性推荐使用小写

7、虽然属性的值可以不使用引号括起来,但推荐使用引号括起来。

8、双引号与单引号的选择

如果属性的值中有双引号,则使用单引号:

<p title='This is "tool" tip' >This is a paragraph</p>

反之亦然:

<p title="This is 'tool' tip">This is a paragraph</p>

 三、标题

1、标题

通过标签<h1>到<h6>来定义标题,浏览器会自动为标题前后添加外边距margin。

标题在SEO中非常重要,搜索引擎会通过标题来索引页面的内容和结构。

用户也会通过标题来快速标题来快速浏览你的页面,通过标题显示文档结构也非常重要。

切勿使用标题来加粗或者变大字号。

2、水平线

水平线通常用来进行内容的分隔。

<h1>this is heading1</h1>
<p>text</p>
<hr>
<h2>this is heading2</h2>
<p>some text</p>
<hr>

3、<head>元素

<head>是存放元数据matadata的容器,元数据是与HTML文档相关的数据,通常用来定义文档标题,字符集,样式,样式链接,脚本链接等。

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>My First Html</title>
    <meta charset="UTF-8">
<body>
    ...
</body>
</html>

 四、段落

<p>some text</p>
<p>some text</p>

浏览器会自动为段落之间添加外边距margin。

1、换行符

<p>some text<br>some text<br>some text</p>

不会自动添加边距。

2、<pre>元素

预格式化文本,<pre>之间的文本会用一种宽度固定的字体通常是Courier,将会保留空格与换行符

五、样式

样式属性具有以下语法:

<tagname style="property : value ;">

属于CSS的内容。

1、背景颜色

例如设置整个页面的背景颜色为灰蓝色:

<body style="background-color : powerblue;">
</body>

2、文本颜色

<h1 style="color : blue;">This is heading</h1>
<p style="color : red;">This is a paragraph.</p>

3、字体

<p style="font-family : verdana;">some text</p>

4、字号

<p style="font-size:16px;">some text</p>

5、文本对齐

例如标题居中:

<h1 style="text-align:center;">Head</h1>

六、文本格式

HTML还定义了一些用来格式化文本的特殊元素:

  • <b>——加粗文本
  • <strong>——重要文本
  • <i>——斜体文本
  • <em>——强调文本
  • <mark>——标记文本,默认背景色黄色
  • <small>——小字
  • <del>——添加删除线
  • <ins>——添加下划线
  • <sub>——下标
  • <sup>——上标

例如如下代码的表现样式为:

<p>
    <b>粗体字</b><strong>重要文本</strong>
    <i>斜体</i><em>强调文本</em>
    <mark>标记文本</mark><small>小字</small>
    <del>删除线</del><ins>下划线</ins>
    <sub>下标</sub><sup>上标</sup>
</p>

文本格式化

<strong>与<b>在浏览器中的表现形式相同,<em>与<i>在浏览器中的表现形式相同,但<b>与<i>是用来定义粗体斜体的,<strong>与<em>用来表现文本的“重要性”。

七、引用元素

1、<q>短引用

<p>WWF's goal is to :<q>Build a future where people live in harmony with nature.</q></p>

2、<blockquote>块引用

<p>块引用:</p>
<blockquote cite="http://www.icoder.top/">
引用引用引用引用引用引用引用引用引用引用引用引用
</blockquote>

3、<abbr>缩写标记

<abbr>元素用来定义缩写或首字母缩写。缩写标记可以为浏览器、翻译系统和搜索引擎提供有用的信息。

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

4、<address>添加联系信息

<address>元素用来定义文档或文章的联系信息(作者/所有者)。<address>元素在浏览器中通常表现为斜体,大多数浏览器会在这个元素前后添加换行符。

<address>
作者:zhangrj<br>
博客地址:<br>
icoder.top<br>
中国,江苏<br>
</address>

5、<cite>定义作品名称

<p><cite>平凡的世界</cite>是路遥的作品。</p>

6、<bdo>定义文本方向

属性dir有两个值,rtl表示文本从右向左写,ltr表示文本从左向右写。

<bdo dir="rtl">This text will be written from right to left</bdo>
<bdo dir="ltr">This text will be written from left to right</bdo>

结果如下:

tfel ot thgir morf nettirw eb lliw enil sihT

This text will be written from left to right

发帖时间: web