Htmlの共通ラベル(1)
リフレッシュ学習は、知識のHTMLタグのフロントエンドから始まります。私たちは、スケルトンHTML形式を見てみましょう。
<!DOCTYPE html> <!--这句话就是告诉我们使用哪个html版本-->
<html> <!--表示创建一个html文档-->
<head> <!--设置文档标题和其它在网页中不显示的信息-->
<title>标题</title> <!--让页面拥有一个属于自己的标题-->
</head>
<body> <!--元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)-->
<p>雨点的名字</p>
</body>
</html>
1)ヘッドは、タグを格納することができます:タイトル、メタ、ベース、スタイル、スクリプト、リンク
2)身体のタグを記憶することができる:P、H、A、B、U、I、S、EM、デル、INS、強い、IMG、等
タグで、頭
1、メタタグ
概念
メタは、このような検索エンジンや説明とキーワードの更新頻度については、ページ(メタ情報)に関するメタ情報を提供します。
1)、文字セットのプロパティ
単独で使用、文書の文字セットとエンコーディングフォーマット
<meta charset="UTF-8">
2)、name属性
検索エンジンに必要な情報を提供するために主に使用されるコンテンツの特性を遵守しなければなりません
写法:<meta name="属性值" content="属性值详细内容">
重要なプロパティ値:
著者の著者。ウェブサイトの声明では、同社のWebサイトでは、一般的に表現し
たキーワードのウェブサイトのキーワードを。カンマで区切られた複数のキーワード
の説明ページ記述。検索エンジンはタイトルの下の説明を表示します
示例
<!--charset属性-->
<meta charset="UTF-8">
<!--作者-->
<meta name="anthor" contet="雨点的名字" />
<!--网页关键字-->
<meta name="keywords" content="HTML5,网页,我的">
<!--网页描述-->
<meta name="description" content="我的网页" />
図2に示すように、ベースラベル
base作用
:彼は、全体的なリンクがオープンして設定することができます。
<base target="_self"></base> <!-- 表示该页面的所有超链接均在原窗口显示 -->
<base target="_blank"></base> <!-- 表示该页面的所有超链接均在新窗口显示 -->
他のラベルヘッドは、ここでは最初の書き込みではないにあります。
二、ラベルの内側ボディ
1、ラベルのレイアウト
概念
:表示ラベルのページ構造を利用した主要なラベルやCSSレイアウトは、ページレイアウトは、最も一般的に使用されるラベルです。
<h1></h1> <!-- 标题标签:分为h1到h6字体依次递减 -->
<p></p> <!-- 段落标签:默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行 -->
<hr /> <!-- 水平线标签:是单标签。水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。 -->
<br /> <!-- 换行标签:是单标签。如果希望某段文本强制换行显示,就需要使用换行标签。 -->
<div></div> <!-- div和span 是没有语义的 是我们网页布局主要的2个盒子,它们作用主要是结合CSS改变页面样式。 -->
<span></span>
2、テキスト書式タグ
概念
:ページは時々太字、斜体を設定、またはテキスト効果を強調する必要がある、あなたはHTML、特別な方法で表示されるテキストにテキスト書式タグを使用する必要があります。
<b></b>和<strong></strong> <!-- 文字加粗 推荐使用strong -->
<i></i>和<em></em> <!-- 文字斜体 推荐使用em -->
<s></s>和<del></del> <!-- 文字加删除线 推荐使用del -->
<u></u>和<ins></ins> <!-- 文字加下划线 推荐使用ins -->
bisuのみ使用がの意味を強調していない強力なEM・デル・インセマンティック強いが
図3に示すように、画像IMGタグ
概念
あなたがWebページにイメージタグを使用する必要がある画像を表示するためには、HTMLタグに依存しなければならないHTMLページの任意の要素を実装します。
<img src="图像路径url" /> <!-- src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。 -->
写真は、いくつかの共通の属性をラベル付け
プロパティ | 値 | 説明 |
---|---|---|
SRC | topbottommiddleleftright | 画像の表示URLの規定。 |
ALT | テキスト | 画像は代替テキストで表示することができません。 |
タイトル | テキスト | 画像の高さを定義します。 |
幅 | ピクセル% | 画像セットの幅。 |
高さ | ピクセル% | 画像の高さを設定します。 |
境界 | デジタル | 画像の周りに定義された境界線 |
ISMAP | URL | 画像はサーバ側イメージマップとして定義されます。 |
longdesc属性 | URL | 文書の長い説明が含まれている画像へのURL。 |
USEMAP | URL | 画像は、クライアント側のイメージマップとして定義されます。 |
4、リンクラベル
1)リンクのジャンプを達成
次のように基本的な構文は次のとおりです。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href
:URLアドレスは、ラベル用途のためのhref属性は、それがハイパーリンク機能を持っているリンク先を指定します。
target
:ページへの道を開くためのリンク、そこにその値を指定_self
し、_blank
デフォルト値_selfとしてそれらのうちの2つを、新しいウィンドウに道を開くために_blank。
<a href="http://www.baidu.com" title="百度一下,你就知道" target="_self">百度</a>
<a href="http://www.163.com" title="网易新闻" target="_blank">网易</a>
テキストが上のハイパーリンクにするときにマウスを表示したときにtitle属性が設定されています。
タグアンカーによって達成2)位置決め
概念
アンカーリンクを作成することにより、ユーザーはすぐに対象コンテンツに移動することができます。
二段階でのアンカーリンクを作成します。
1.使用“a href=”#id名>“链接文本"</a>创建链接文本。
2.使用相应的id名标注跳转目标的位置。
示例
<!DOCTYPE html>
<html>
<head>
<title>网页定位</title>
</head>
<body>
<p id="top">这里是顶部</p>
<p>原创作者:蜗牛</p>
<p>原创作者:蜗牛</p>
<a href="#top">返回顶部</a>
</body>
</html>
あなたがクリックするとトップページには、位置ID =「トップ」タグに配置されます。これは、id属性の位置、ウェブページはここではささいなこと、ほとんど効果を入れています。
ラベルによる3)実施
注意
リンクをクリックして、文書、および圧縮ファイルをダウンロードし、自動的に実現することができます。
<!DOCTYPE html>
<html>
<head>
<title>下载</title>
</head>
<body>
<a href="6用户注册项目.docx">点击下载文档</a>
<a href="2017-1-4Jquery.rar">点击下载压缩文件</a>
<a href="second .jpg">点击图片</a>
</body>
</html>
注意
達成できない上の写真をダウンロードし、上記の操作だけで画像を開きます。ダウンロードは、画像を実現したい、次のように変更する必要が
<body>
<a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能-->
</body>
それでも、体内の他のラベルは、次の記入します。
你如果愿意有所作为,就必须有始有终。(1)