web 学习第二天

442496A4-76B5-456B-8F4D-23F6087EB398.png
AFB43C8D-AF05-46C0-AEC8-9F94A48A9A3C.png
7631B254-121E-43E5-9375-D6B99EA8428B.png

HTML使用标签 <a>来设置超文本链接。

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

<a href="url">链接文本</a>

<a href="url">链接文本</a>

比如<a href="http://www.runoob.com/">访问菜鸟教程</a>

属性:

①target:使用 target 属性,你可以定义被链接的文档在何处显示

_blank 在新窗口中打开
_self 默认的 在当前打开
_parent 在父框架中打开
_top 在整个窗口中打开
<a href="https://www.baidu.com/" target="blank"">百度首页</a>

②id :id属性可用于创建在一个HTML文档书签标记。

id="tips" 在HTML文档中插入ID
<a id="tips">有用的提示部分</a>

href="#tips" 在HTML文档中创建一个链接到"有用的提示部分(id="tips"
<a href="#tips">访问有用的提示部分</a> )

html-links.html#tips 从另一个页面创建一个链接到"有用的提示部分(id="tips")
<a href="http://www.runoob.com/html/html-links.html#tips">

title设置问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<base href="http://www.runoob.com/images/" target="_top">
</head>

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

</body>
</html>

在头部设置他的head

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
</head>

设置文档标题

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

HTML <base> 元素
<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
相当于iOS开发中的baseURL

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

</body>

HTML <base> 元素

<head>
HTML <base> 元素
<base href="http://www.runoob.com/images/" target="_blank">--标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
HTML <link> 元素
<link rel="stylesheet" type="text/css" href="mystyle.css">--标签定义了文档与外部资源之间的关系。
HTML <style> 元素
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>---标签定义了HTML文档的样式文件引用地址.
HTML <meta> 元素
为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
</head>

HTML <script> 元素


image.png

HTML样式实例 - 背景颜色
背景色属性(background-color)定义一个元素的背景颜色:
font-family(字体),color(颜色),和font-size(字体大小)属性来定义字体的样式
text-align(文字对齐)属性指定文本的水平与垂直对齐方式:

<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>
<h1 style="text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>
</body>

什么是外部样式?内联样式?内部样式表?
外部样式表:

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况
你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表
,其书写格式为

<link rel="stylesheet"type="text/css"href="xxx.css"

内部样式表:
  当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文
档头部定义内部样式表,就像这样:

<head> 
<style type="text/css"> 
h1 {color: sienna;} 
body{background-color:black} 
</style> 
</head>

内联样式表:
  
  由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法
,例如当样式仅需要在一个元素上应用一次时。要使用内联样式,你需要在相关的标签内使用
样式(style)属性。

<h1 style="color:red">helloworld></h1>

HTML 图像- 图像标签( <img>)和源属性(Src)alt 属性用来为图像定义一串预备的可替换的文本。

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

<img src="smiley.gif" alt="Smiley face" style="float:left" width="32" height="32"> 一个带图片的段落,图片浮动在这个文本的左边,通过设置left跟right设置图片在文字左边还是右边

////创建一个图片,图片链接


<p>创建图片链接:
<a href="http://www.alibaba.com">
<img  border="10" src="smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

/////本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接

<p>点击太阳或其他行星,注意变化:</p>
​
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
​
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.baidu.com">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.alibaba.com">
  <area shape="circle" coords="124,58,8" alt="Venus" href="http://www.fang.com">
</map>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,458评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,030评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,879评论 0 358
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,278评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,296评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,019评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,633评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,541评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,068评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,181评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,318评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,991评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,670评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,183评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,302评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,655评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,327评论 2 358