学习速查笔记

属性描述
class为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id定义元素的唯一id
style规定元素的行内样式(inline style)
title描述了元素的额外信息 (作为工具条使用)
 
id      

       

id 属性规定 HTML 元素的唯一的 id。

id 在 HTML 文档中必须是唯一的。

id 属性可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS 为带有指定 id 的元素改变或添加样式。

 

属性值

描述
id

规定元素的唯一 id。

命名规则:

  • 必须以字母 A-Z 或 a-z 开头
  • 其后的字符:字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":") 以及点号(".")
  • 值对大小写敏感

 

HTML 水平线


<hr> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容,使用该元素产生的水平线可以在视觉上将文档分隔成各个部分。

实例

<p>这是一个段落。</p>

<hr>

<p>这是一个段落。</p>

<hr>

<p>这是一个段落。</p>

 

 

 


HTML 文本格式化标签

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

 

HTML <pre> 标签

<pre> 标签可以保留您需要的文本格式,比如不会取消换行和空格,并且所示文本是等宽的

 

标签定义及使用说明

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

注意:<pre> 元素是块级元素,但是只能包含文本或行内元素,任何块级元素(常见为可以导致段落断开的标签:例如<title><p> <address> 标签)都不能位于 <pre> 元素中。

 

 

HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接时,链接显示为红色并带上下划线

注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示

 注意:如果为这些超链接设置了CSS样式,展示样式会根据CSS的设定来显示


HTML 空链接

HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。

临时加的空链接,主要为了能更好的看到最终的效果。

基本语法:

<a href="#">链接文字</a>

其中“ # ”表示空链接。

实例

<a href="#">W3CSchool</a>

HTML 链接语法

链接的 HTML 代码很简单。它类似这样::

<a href="url">Link text</a>

href 属性描述了链接的目标。.

Example

<a href="//www.w3cschool.cn/">Visit W3CSchool</a>

上面这行代码显示为:: Visit W3CSchool

HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。

下面的这行会在新窗口打开文档:

 使用 <base> 定义页面中所有链接默认的链接目标地址。

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)</title> 
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签,该标签指定了页面上所有链接的默认 URL,所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> - 注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。

</body>
</html>

 

CSS 可以通过以下方式添加到HTML中:

  • 内联样式- 在HTML元素中使用"style" 属性
  • 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件.

 

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表:

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

 


外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值