head タグと body タグの役割:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 注释: Ctrl + / -->
<!-- 版本声明,声明当前HTML结构属于HTML5运行环境 -->
<!--
标签结构:两部分组成
双标签:有开始<html>和结束</html>两个标签符号组成的标签,经常用来嵌套网页结构使用
单标签: 标签只有一部分,属于自开闭标签,也被称为"空标签",在开始标签中就关闭的标签,不存在成对的情况,经常用来引入外部文件<link>
-->
<!-- 编码格式 -->
<meta charset="UTF-8">
<!-- 针对IE版本的兼容,X-UA-Compatible为IE版本指定不同页面的渲染模式,IE=edge:通知IE浏览器以最高级别的可用模式显示内容 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport:布局视口, content:代表属性值, width:可视区域的宽度,device-width:设备的宽度(单位缩放为100%是CSS的像素),initial-scale=1.0":页面首次被显示可视区域的缩放级别 1.0页面按实际尺寸显示.无任何缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页的标题</title>
<!-- 为标签添加对应的CSS样式 -->
<style>
</style>
</head>
<body>
在双标签中,可以直接标记文本数据内容,也可以嵌套一段HTML结构
<br>
<strong>这是一段加粗文本内容</strong>
</body>
<!--
head和body标签的作用:
head标签:一般用来设置当前网页的一些额外内容,head中内容不会在页面上显示,因此head标签一般在开发中经常用来设置网页的标题,描述信息,为网页添加CSS样式,编码格式,引入外部的CSS样式等
body标签:body内部包含的内容代表网页的网页内容,因此网页的数据渲染全部写在body中
-->
</html>
<!-- ラベルに対応するCSS スタイルを追加-->
<スタイル></スタイル>
ラベル構造: 2 つの部分で構成されています
(1) 二重ラベル: 開始 <html> と終了 </html> の 2 つのラベル記号で構成されるラベルは、Web ページ構造をネストするためによく使用されます。
(2) 単一ラベル: ラベルの 1 つの部分のみが存在し、自己開閉ラベルに属し、「空のラベル」とも呼ばれます. 開始ラベルで閉じられているラベルには、ペアリング状況がありません。多くの場合、外部ファイルを導入するために使用されます <link>
head タグと body タグの役割:
head タグ: 現在の Web ページの追加コンテンツを設定するために一般的に使用されます. head 内のコンテンツはページに表示されません. したがって, head タグは開発で Web ページのタイトルを設定するためによく使用されます.情報の記述、Web ページへの CSS スタイルとエンコード形式の追加、外部 CSS スタイルの導入など。
bodyタグ:bodyに含まれるコンテンツがWebページの内容を表すため、Webページのデータ描画はすべてbodyに記述します
ラベルの使用とボックス モデルの概念
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签的使用和盒模型的概念</title>
<!-- css样式 -->
<style>
.txt{
/* 设置标签宽度 */
width: 250px;
/* 标签高度 */
height: 50px;
/* 标签背景颜色 */
background-color: red;
/* 文字颜色 */
color: white;
/* 字体大小 */
font-size: 14px;
/* 盒模型的概念:浏览器在渲染每一个标签时,会把每一个标签都看成
由外边距(margin),边框(border),内边距(padding),内容层(content)组成的矩形盒子
内边距(padding):设置当前标签与标签中的内容之间的距离
外边距(margin):设置当前标签与其他标签之间的距离
边框(border):设置当前标签四个边界的厚度(默认为0)
内容层:设置当前标签用来显示自己内容数据的范围(默认块属性标签可以直接通过
width/height规定宽高,行属性标签内容层宽高由内容决定)
margin:修改标签的外边距,padding修改标签的内边距
margin属性值:
一个值:代表上下左右
两个值:1:上下2:左右
三个值:1:上2:左右3:下
四个值:上开始,逆时针设置(上右下左)
设置某一方向的内边距:
padding-left(左侧内边距)
padding-right(右侧内边距)
padding-top(上侧内边距)
padding-bottom(下侧内边距)
盒模型大小计算:
宽度:外边距(左右)+边框厚度(左右)+内边距(左右)+内容层宽度
高度:外边距(上下)+边框厚度(上下)+内边距(上下)+内容层高度*/
border: 10px solid blue;
border-right: 50px solid yellow;
margin-top: 50px;
/* 从上开始,逆时针方向设置 */
padding: 50px 30px 40px 50px;
/* 一个标签class属性对应的css样式若重复出现,后面的样式会将前面的样式覆盖(优先级)*/
font-size: 20px;
/* 怪异盒模型
计算:width/height(content+border+padding)+margin*/
/* 将标准盒模型转换为怪异盒模型 */
box-sizing: border-box;
/* 标准盒模型 */
/* 将怪异盒模型转换为标准盒模型 */
box-sizing: content-box;
}
</style>
</head>
<body>
<!-- HTML结构 -->
<!-- 块属性标签
1.可以设置宽高
2.不可以和其他标签共处一行
3.不设置宽度的情况下 默认100% -->
<!-- 常用的块属性标签div,p,ul>li,ol>li,button,h1~h6等 -->
普通文本
<h3>黄鹤楼送孟浩然之广陵</h3>
<div class="txt">
标签不会被渲染,只有内容会被渲染
</div>
</body>
</html>
ボックスモデルのコンセプト
ボックス モデルの概念: ブラウザが各タグをレンダリングするとき、各タグを次のように扱います。
マージン、ボーダー、パディング、およびコンテンツで構成される長方形のボックス
パディング: 現在のラベルとラベル内のコンテンツの間の距離を設定します
マージン: 現在のラベルと他のラベルの間の距離を設定します
border: 現在のラベルの 4 つの境界線の太さを設定します (デフォルトは 0)。
コンテンツ レイヤー: 現在のラベルのスコープを設定して、独自のコンテンツ データを表示します (デフォルトのブロック属性ラベルを直接渡すことができます
width/height は幅と高さを指定し、行属性ラベルのコンテンツ レイヤーの幅と高さはコンテンツによって決定されます)。
margin: ラベルの外側のマージンを変更し、パディングはラベルの内側のマージンを変更します
マージン属性値:
1 つの値: 上、下、左、右を表します
2 つの値: 1: 上下 2: 左右
3 つの値: 1: 上 2: 左右 3: 下
4 つの値: 開始、反時計回りに設定 (右上、左)
パディングを一方向に設定します。
padding-left (左内側マージン)
padding-right (右内側マージン)
padding-top (上部の内側のマージン)
padding-bottom (下のパディング)
ボックス モデル サイズの計算:
幅: 余白 (左右) + 枠線の太さ (左右) + 内余白 (左右) + コンテンツ レイヤーの幅
高さ: 余白 (上下) + ボーダーの太さ (上下) + 内余白 (上下) + コンテンツ レイヤーの高さ
/*奇妙なボックス モデル
计算:width/height(content+border+padding)+margin*/
/* 標準のボックス モデルを奇妙なボックス モデルに変換します */
ボックスサイズ: ボーダーボックス;
/* 標準ボックスモデル */
/* 奇妙なボックス モデルを標準のボックス モデルに変換します */
ボックスサイズ: コンテンツボックス;
ブロック プロパティ タブ
1.幅と高さを設定できます
2. 他のタグと同一行にすることはできません
3. 幅が設定されていない場合、デフォルトは 100% です。
一般的に使用されるブロック属性タグ div、p、ul>li、ol>li、button、h1~h6 など。
行属性ラベル
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mark{
font-size: 20px;
width: 500px;
}
.txt{
color: blue;
}
.txt1{
color: brown;
}
.try{
background-color: aqua;
color: black;
/* 去除超链接标签默认样式 */
text-decoration: none;
font-size: 12px;
padding: 50px 20px;
/* 问题:行属性标签调节内边距影响上下两个位置的元素,因为
行属性标签调节内边距时是以文字内容为中心
解决方法:1.将行属性标签转换为块属性标签(人为调节宽度),
注意:块属性标签的宽度默认与父级保持一致
2.将行属性标签转换为行内块属性标签(保留行属性的特点:内容在一行显示,宽度由内容撑开),
同时具备块属性标签的特点(调节内边距或外边距时,文字对网页的固定位置
可以跟随内边距或外边距发生对应的改变) */
display: inline-block;
/* display: block; */
padding: 50px 20px;
}
h4{
background-color: chartreuse;
}
</style>
</head>
<body>
<!-- 行属性标签:特点
1.不可以设置宽高
2.可以和其他标签共处一行
3.宽高由内容撑开 -->
<!-- 常见的行属性标签:span(包裹空格,页面会显示空格,无论多少个,
只显示一个),a,img,strong(加粗) -->
<div class="mark">
<div>换行标签</div>
<div>实现换行</div>
<strong>加粗不换行</strong>
<span class="txt">这是<span class="txt1">行属性</span>标签,<strong>不换行</strong></span>
<!-- 超链接标签:
herf(必须属性):在没有设置对应的跳转链接时,会跳转到当前页面
不想让超链接标签被点击跳转时,可以使用‘#’代替链接-->
<!-- target:设置新页面的打开方式
1._blank:打开一个新窗口
2._self:在当前页面打开
3._top:新页面会在顶层窗口打开,一般指超链接标签所在的浏览器窗口
4._parent:新页面会在超链接所在的父级窗口打开,即:新页面会把原页面覆盖-->
<a href="http://www.baidu.com" target="_top"
class="try">点击</a>
<h4>行属性标签存在的问题</h4>
</div>
</body>
</html>
問題: 行属性ラベルの内側マージンの調整は、上下の要素に影響を与えます。
行属性ラベルが内側の余白を調整すると、テキスト コンテンツの中央に配置されます
解決:
1. 行属性ラベルをブロック属性ラベルに変換します (人為的に幅を調整します)。
注: ブロック属性ラベルの幅は、デフォルトで親と一致しています
2. 行属性ラベルをインライン ブロック属性ラベルに変換します (行属性の特性を保持します。コンテンツは 1 行で表示され、幅はコンテンツによって拡張されます)。
同時にブロック属性ラベルの特徴(内余白や外余白を調整する場合、Webページ上のテキストの固定位置
内側または外側の余白の対応する変更に従うことができます)
行のプロパティ タブ: 機能
1. 幅と高さを設定できない
2. 他のタグと同列にできる
3.コンテンツによって幅と高さが拡張されます
<!-- 一般的な行属性タグ: span (スペースの折り返し。ページにはスペースがいくつあっても表示されます。
1つだけ), a, img, strong (bold) -->
ハイパーリンク ラベル:
herf (必須属性): 対応するジャンプリンクが設定されていない場合、現在のページにジャンプします
ハイパーリンク タグをクリックしてジャンプさせたくない場合は、リンクの代わりに「#」を使用できます -->
<!-- target: 新しいページを開く方法を設定します
1._blank: 新しいウィンドウを開く
2._self: 現在のページで開く
3._top: 新しいページはトップレベル ウィンドウで開かれます。これは通常、ハイパーリンク ラベルが配置されているブラウザー ウィンドウを指します。
4._parent: 新しいページは、ハイパーリンクが配置されている親ウィンドウで開かれます。つまり、新しいページは元のページを上書きします -->
<a href="http://www.baidu.com" target="_top"
class="try">クリック</a>
ラベル間の相互変換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mark1{
width: 200px;
height: 100px;
background-color: blue;
/* 设置文本对齐方式 */
text-align: center;
/* 调节行高居中 */
line-height: 200px;
/* padding-top: 25px;
box-sizing: border-box; */
display: inline-block;
/* 各种标签之间的转换: */
/*1. 块级标签转为行内块属性标签(既具备行属性标签特点,又具备块属性标签特点)
display: inline-block;*/
/*2. 块级标签转为行内标签
display: inline;*/
/*3. 行内标签转换为块级标签
display: block;*/
/* 注意:块属性标签可以嵌套行属性标签,行属性标签不能嵌套块属性标签,p标签不要嵌套块属性标签,可以嵌套a,span */
}
.mark2{
width: 200px;
height: 100px;
background-color:blueviolet;
text-align: center;
line-height: 200px;
line-height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<!-- 实现两个块属性标签在一行显示:display: inline-block; -->
<div class="mark1">
页面一
</div>
<div class="mark2">
页面二
</div>
<!--公式:行高=两基线间的距离
=上间距+文本+下间距(上边距=下边距)
line-height:上基线到下基线的距离
基线:四条线中的第三条 -->
</body>
</html>
/*さまざまなタグ間の変換: */
/*1. ブロックレベルタグはインラインブロック属性タグに変換されます (行属性タグとブロック属性タグの両方の特性を持つ)
表示: インラインブロック;*/
/*2. ブロックレベルタグをインラインタグに変換
表示: インライン;*/
/*3. インラインタグをブロックレベルタグに変換
表示ブロック;*/
/* 注: ブロック属性タグは行属性タグをネストできます。行属性タグはブロック属性タグをネストできません。p タグはブロック属性タグをネストできません。a、span をネストできます */
2 つのブロック属性ラベルが1 行に表示されていることに注意してください。
式: 線の高さ = 2 つのベースライン間の距離
= 上の余白 + テキスト + 下の余白 (上余白 = 下余白)
line-height: 上のベースラインから下のベースラインまでの距離
ベースライン: 4 行の 3 番目
iframe ピクチャー イン ピクチャー
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="iframe">
<!--iframe标签:在对应的页面中打开一个新窗口去加载其他页面,实现画中画,
一般在需要加载插件或视频时使用 -->
<!-- .在路径中代表当前文件的文件夹,
..代表在当前文件夹的文件夹,
/代表下一级 -->
<iframe src="./page1.html" frameborder="0" width="300px" height="300px"
style="margin-top: 20px;background-color:yellow;"></iframe>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.iframe{
background-color: aqua;
}
</style>
</head>
<body>
<h3>欢迎来到一级页面</h3>
<iframe src="./page2.html" frameborder="0" width="300px"
height="200px" class="iframe"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>欢迎来到页面</h3>
<a href="http://www.baidu.com">点击</a>
</body>
</html>
<!-- iframe タグ: 対応するページで新しいウィンドウを開き、他のページをロードする、ピクチャー イン ピクチャーを実現する、
通常、プラグインまたはビデオをロードする必要がある場合に使用 -->
<!-- .パス内の現在のファイルのフォルダーを表します。
.. は現在のフォルダー内のフォルダーを表し、
/ は次のレベルを表します -->
ハイパーリンク ラベルの状態
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* a超链接标签的4种状态
1.link:超链接标签准备好但未被点击 */
.mark:link{
color: aqua;
}
/*hover:鼠标悬停状态,该状态不是超链接标签特有的,所有标签都能用 */
.mark:hover{
color: black;
}
/* active:鼠标在超链接标签上按下时触发 */
.mark:active{
font-size: 25px;
}
/* visited: 点击后显示灰色*/
.mark:visited{
color: gray;
}
</style>
</head>
<body>
<a href="#" class="mark">click me!</a>
</body>
</html>
ハイパーリンク ラベルの 4 つの状態:
1.link: ハイパーリンク ラベルは準備できていますが、クリックされていません
2.hover: マウス ホバー状態。この状態はハイパーリンク タグに固有のものではありません。すべてのタグを使用できます。
3.active: マウスがハイパーリンク ラベル上で押されるとトリガーされます
4.visited: クリック後にグレーアウト
ハイパーリンク アンカーの使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 锚点:快速定位网页部分位置
实现方式:
1.在网页中设置唯一标识,即添加id属性值(唯一性)
2.在网页中添加超链接标签,超链接标签存储不同的唯一标识
3.查找对应内容时,通过点击对应的超链接标签完成锚点的导航 */
.mark1{
height: 300px;
background-color: aquamarine;
}
.mark2{
height: 400px;
background-color:bisque;
}
.mark3{
height: 200px;
background-color:blue;
}
.mark4{
height: 300px;
background-color:brown;
}
.mark5{
height: 200px;
background-color:chocolate;
}
.mark6{
height: 200px;
background-color:cornflowerblue;
}
.mark7{
background-color:chartreuse;
}
#mark3{
background-color:deeppink;
}
/* 设置已经访问过的元素 */
/* target:选取当前活动的目标元素(标签) */
.mark3:target{
color:aqua;
font: size 35px; ;
}
</style>
</head>
<body>
<div class="content">
<!-- 通过id使用,# -->
<a href="#mark3">mark3</a>
<a href="#mark6">mark6</a>
</div>
<!-- 快捷键:div.mark${mark$}*6 -->
<div class="mark1">mark1</div>
<div class="mark2">mark2</div>
<!-- id通过#使用,class通过.使用 -->
<div class="mark3 mark7" id="mark3">mark3</div>
<div class="mark4">mark4</div>
<div class="mark5">mark5</div>
<div class="mark6" id="mark6">mark6</div>
</body>
</html>
アンカー: Web ページの一部をすばやく見つける
実現方法:
1. Web ページに一意の識別子を設定します。つまり、id 属性値 (一意性) を追加します。
2. Web ページにハイパーリンク タグを追加すると、ハイパーリンク タグにさまざまな一意の識別子が格納されます
3. 対応するコンテンツを検索するときは、対応するハイパーリンク ラベルをクリックして、アンカー ポイントのナビゲーションを完了します。
<!-- id は # によって使用され、class は .Use によって使用されます -->
<div class="mark3 mark7" id="mark3">mark3</div>
<div class="mark4">mark4</div>
<div class="mark5">mark5</div>
<div class="mark6" id="mark6">mark6</div>
共通タグ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
color: aqua;
}
.txt_a{
font-size: 28px;
color: blueviolet;
text-decoration: none;
/* 下划线 */
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<!-- 标题标签:h系列标签(h1~h6)
h1:一级标题(最大)
h6:六级标题(最小)
特点:1.都加粗
2.标签文字大小从1到6逐渐小
3.独占一行 -->
<h1 class="h1">wwwwwww</h1>
<h2>wwwwwww</h2>
<!-- 段落标签:p,双标签
特点:1.段落间有间隔
2.每个段落独占一行-->
<p>qqqqqq</p>
<p>qq<a href="#" class="txt_a">qq</a>qq</p>
<!-- br:换行 -->
<br>
<!-- hr:分割不同主题的水平线 -->
<hr>
<!-- 文本格式化标签:让文本加粗,下划线,倾斜,删除线的格式效果 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s style="color: red;">删除线</s>
<!-- 语义化强烈(推荐) -->
<br>
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
</body>
</html>
<!--タイトルタグ: h系タグ (h1~h6)
h1: レベル 1 の見出し (最大)
h6: 6 レベルの見出し (最小)
特徴: 1. すべて太字
2. ラベルのテキスト サイズが 1 から 6 に徐々に小さくなります
3. 専用ライン -->
<!--段落タグ: p、二重タグ
特徴: 1.段落間に間隔があります
2. 各段落はそれぞれの行にあります -->
<!-- br: 改行 -->
<!-- hr:さまざまなトピックを区切る水平線-->
<!--テキスト書式タグ: テキストを太字、下線、斜体、取り消し線の書式設定効果にします -->
<b>太字</b>
<u>下線</u>
<i>倾斜</i>
<s style="color: red;">取り消し線</s>
<!--セマンティックストロング (推奨) -->
<br>
<strong>太字</strong>
<ins>下線</ins>
<em>傾斜</em>
<del>取り消し線</del>
img イメージタグ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img{
width: 1000px;
height: 800px;
}
</style>
</head>
<body>
<!-- 图片标签:img
作用:在网页中显示一张图片
属性:
1.src:路径,若图片和当前页面在同级目录,直接写图片名称,若不在同级目录下,使用相对路径
2.alt:普通文本,当图片加载失败时,显示文字提示
3.title:鼠标悬浮在图片上时,才显示文字
设置图片宽高:width/height
注意:若只设置图片的宽度(或高度),高度(或宽度)会自动等比例缩放,
若同时设置宽高,可能失真变形
-->
<img src="./img/1.jpg" alt="图片加载失败" title="动图" class="img">
<!-- div标签:无语义的布局标签,经常用来搭建html结构,
充当标签的父元素-->
<div>
<p>
div标签,无语义的布局标签,经常用来搭建html结构,
充当标签的父元素
</p>
</div>
</body>
</html>
イメージタグ:img
機能: Web ページに画像を表示する
属性:
1. src: パス、画像と現在のページが同じレベルのディレクトリにある場合は画像名を直接書き込み、同じレベルのディレクトリにない場合は相対パスを使用します
2.alt: 通常のテキスト。画像の読み込みに失敗すると、テキスト プロンプトが表示されます。
3.title: テキストは、マウスが写真の上に置かれたときにのみ表示されます
画像の幅と高さを設定: 幅/高さ
注: 画像の幅 (または高さ) のみを設定した場合、高さ (または幅) は比例して自動的にスケーリングされます。
幅と高さを同時に設定すると歪む場合があります
div タグ: タグの親要素として、HTML 構造を構築するためによく使用される非セマンティック レイアウト タグ