<タイトル> &l"/> <タイトル> &l">
検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML の基本構造とタグについての予備的な理解

HTML の基本構造とタグについての予備的な理解

巴扎黑
巴扎黑オリジナル
2017-06-23 14:51:112322ブラウズ

1. HTML の予備知識

HTML はハイパーテキスト タグ言語であり、ブラウザは HTML ソース コードを「解釈して実行」するために使用されるツールです。

HTML の基本構造

nbsp;html><meta><title></title>

ここで、 は、このファイルが HTML5 である必要があることを宣言します。のファイルブラウジング ブラウザは HTML5 に準拠しています。 解析を準備するには、HTML5 が存在し、ファイルの先頭に記述されている必要があります。

は Web ページのタイトルで、上部に表示されるテキスト:

1) リンク: Web ページのタイトルのアイコン。 

<span style="font-size: 16px"><span style="font-family: 宋体"> 是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息，大多在浏览器看不到，但是对网页的解析至关重要！</span><br></span>

ここで、rel="icon" は、現在のリンクが Web ページのアイコンへのリンクに使用されていることを示しますhref="img/ss.gif" は、アイコンのアドレスの場所を示します 

<span style="font-family: 宋体; font-size: 16px">  则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>
2)meta: Web ページ上のさまざまな情報を記述するために使用されます

链接网页的小图标，网页选项卡上面的小图片

<link>
<span style="font-family: 宋体; font-size: 16px; background-color: #ffffff"><span style="font-family: 宋体"><span style="line-height: 36px"><span style="color: #ff6600; background-color: #ffffff">①</span>其中<meta charset="utf-8">设置网页的编码格式为utf-8格式<br>常见的中文编码格式：GB2312：国标码，简体中文；GBK：扩展国标码，简体中文<br><span style="color: #ff0000">utf-8：万国码，兼容各种语言编码，常用！<br></span></span></span></span>
②

検索エンジンを支援するために Web ページのキーワードを設定できます。複数のキーワードは英語でカンマ区切りです

<meta>

③エンジン検索時にWebページの詳細情報とタイトルの下のテキスト段落を設定します!

name="description" は、このメタ タグが Web ページの説明情報を設定することを意味し、

content="" は説明情報の詳細な内容を意味します。 ！ りー

りー

<br>

2、主体部分

1）标签的分类

①块级标签：显示为块状，独占一行，自动换行。<br>②行级标签：在一行中，从左往右依次排列，不会自动换行。

2）块级标签 

常见的块级标签有：

 

a.标题标签：

......
  特点:h1最大，h6最小且自动加粗。

 

b.水平线标签：

 

c.段落标签：

 

d.换行标签：<br>

 

e.引用标签：

<br>  要的cite属性表明引用的来源，一般为网址，且网址不会在网页中展示，浏览器一般显示为首行缩进

 

f.预格式标签：

<br>  浏览器默认显示样式：①显示为等宽字体


②代码中的换行，空格等元素可在浏览器中直接显示。<br>


nbsp;html><meta>HTML基本块级标签
    
这是h1标签
这是h2标签
这是h3标签
这是h4标签
这是h5标签
这是h6标签
这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈！<br>这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！这是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！
if(entity != null){  
    tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity转为字符串类型  
    jsonObject = JSONObject.fromObject(result);//字符串类型转为JSON类型  
}  
光明正大的不要脸！这段话就是抄的！你能咋地！


g.有序列表<br>     


     （order list）<br>     　　
  1. ...
    2.  列表项可以有n多个<br>     　　
  2. ...
    3. 
<br>     　　
  3. ...
    4. 
<br>     


h.无序列表<br>     


     (unorder list)<br>     　　
  • ...
    •  n多个<br>     　　
  • ...
    • 
<br>     　　
  • ...
    • 
<br>     


i.定义描述列表<br>     



<br>     　　
一般只有一项
 （列表标题）<br>     　　
可以有很多项
 （列表描述项）<br>     　　
132

<br>     　　
123

<br>     


g.组合标签 显示效果：上面是图片，下面是图片的标题，同时图片和标题前代缩进。<br>     
<br>     　　HTML の基本構造とタグについての予備的な理解 图片<br>     　　
 图片的标题。<br>     


k.分区标签


     


  可以包裹任何标签，也可以被包裹进任何标签。


nbsp;html><meta>HTML基本块级标签
    


    

  • 这是无序列表第一项
    • 

  • 这是无序列表第二项
    • 

  • 这是无序列表第三项
    • 

  • 这是无序列表第四项
    • 


        
    

  1. 这是无序列表第一项
    2. 

  2. 这是无序列表第二项
    3. 

  3. 这是无序列表第三项
    4. 

  4. 这是无序列表第四项
    5. 


        


这是dl列表的标题


这是dl列表的描述项1


这是dl列表的描述项2


这是dl列表的描述项3



        
HTML の基本構造とタグについての予備的な理解
图片的描述标题

        
这是div里面的文字！！！
11111



                




3) 行レベルのタグ 


 共通の行レベルのタグ: 


 


 (1) テキストタグのspan 


① spamタグは単なるラッピング機能であり、他の意味はありません; <br> ②spanはdivと同様でCSSで使用する必要があります。 div はブロックレベルのタグであり、span は行レベルのタグであるというだけです 


<br> (2) 斜体のタグ i と太字のタグ b の違いを強調します。 ①emとiは傾けることができます。強もbも大胆にできる！ただし、i と b は単に斜めで太字になっているだけですが、em とstrong はより強調されたセマンティクスを持っています。 


 ②emとstrongは両方とも強調を表しますが、strongはより高いレベルを強調します！ ！ <br> 注: <br> 1. 強調の目的: Web ページが何を強調しているかを検索エンジンに知らせます。検索エンジンに表示されやすい！ <br> 2. Strong と em を複数のレイヤーにネストして、強調の増加を示すことができます。 <br> 


 (3) 短い引用タグ q: 短い引用を示します。 


cite 属性: 引用元を宣言するために使用されます。 【よく使われる
引用タグ】
 
コンテンツの一部を引用するために使用されます
<br> 文を引用するために使用されます<br> 作品、絵画、書道などの名前を引用するのに一般的に使用されます。<br> 類似点: 3 つの引用タグはすべて、引用元を示すために cite 属性を使用します<br><br> 相違点：①引用の内容が異なります。 ブロック引用->段落、q->文章、引用->作品名<br>② デフォルトで表示される効果が異なります。 blockquote->デフォルトでは段落全体が右にインデントされます。q->引用符はデフォルトで追加されます。 <br>


 (4) タグを小さくする: フォントを 1 サイズ小さくします。 


大きなタグ: フォントを 1 サイズ大きくします。 注: 


 ① フォントが最小値または最大値に達するまで、Small と Big を複数のレベルでネストできます。 <br> ② これら 2 つのタグは削除されており、使用はお勧めできません。 <br> (5) 画像タグ img 


 ① src 属性: 画像のパスを示します  【画像パスの合法的な方法】 
A. 画像は他の Web サイトにあるため、他の Web サイトが削除した場合画像にもアクセスできませんので、この方法の使用はお勧めできません 
 HTML の基本構造とタグについての予備的な理解<br><br> <br>B. 絶対パス: 絶対パスを使用します。このマシンではファイル プロトコルを使用してのみ画像にアクセスできます。したがって、この方法の使用は固く禁じられています。 


<br>HTML の基本構造とタグについての予備的な理解


<br>C. 相対パス: <br>a. 画像は現在のドキュメントと同じフォルダーにあります: 画像名を直接書き込みます <br> HTML の基本構造とタグについての予備的な理解<br>b . 画像は現在のドキュメントの下位フォルダーにあります: フォルダー名/画像名<br> HTML の基本構造とタグについての予備的な理解<br>c。現在のドキュメントのレベル フォルダー: . ./画像名 (../ は 1 レベル戻ることを意味します)<br> HTML の基本構造とタグについての予備的な理解<br> ただし、必ず注意してください: 画像はプロジェクトに含まれている必要があり、プロジェクト外の画像にはアクセスできません。 ③ title : 画像のタイトル、マウスオーバー時に表示されるプロンプトテキストです<br><br> HTML の基本構造とタグについての予備的な理解<br> <br> ④ alt:HTML の基本構造とタグについての予備的な理解<br> HTML の基本構造とタグについての予備的な理解<br> <br> ⑤ align: 画像の周囲 画像に対してテキストをどのように配置するか。 <br> オプションの値: 上->画像の上 中央->画像の中央 下->画像の底<br> HTML の基本構造とタグについての予備的な理解 12345<br> <br> (6) <br>ハイパーリンクタグ a<br>A. href 属性: ハイパーリンクのジャンプ先のページを示します。 <br> ① ネットワーク アドレスを書くことができます: 


 これはハイパーリンクです


 ②ローカル HTML ファイル: <br>相対パスを使用してファイル アドレスを決定します。 imgタグと同様に決定します。 <br> これはハイパーリンクです


<br>B: マウスをポイントした後に表示されるプロンプトテキスト<br> これはハイパーリンクです


C、target属性：设置新页面打开的窗口位置<br>						可选值：_self自身页面打开（默认）<br>						_blank 新窗口打开<br>				这是一个超链接	<br><br>【超链接的特殊应用】<br>			1、功能性链接：（了解）<br>			mailto://   点击链接给指定邮箱发送邮件<br>		点击发送邮件<br>tencent://message/?uin=1105093212"<br>还有：tell://手机端点击打电话<br>message://手机端点击发送短信<br>ftp://使用ftp协议进行文件的上传下载<br>2、锚点链接：<br>			   >>>本页面锚链接<br>			① 在页面的指定位置中设置一个锚点，用那么属性表示锚点名字：<br>			a name="top"><br>			
<br>			② 将超链接的href属性，设置为#加锚点名字<br>			点击链接，跳转到top锚点位置<br>			   >>>页面间锚链接<br>			  ① 在新页面的指定位置中设置一个锚点，用那么属性表示锚点名字：<br>			a name="top"><br>			
<br>			② 将超链接的href属性，设置为“新页面地址#加锚点名字”：<br>			点击链接，跳转到锚地.html的top锚点位置


nbsp;html><meta>HTML基本行级标签
        
        糖糖真帅！！！<br>
        这是em标签<br>这是strong标签<br>这是i标签<br>这是b标签<br>这是b标签<br>
        我是q标签引用
我是blockqoute的引用！！！！！
我是cite标签的引用！！<br>
        我比正常小两号<br>我比正常大一号<br>
        
              HTML の基本構造とタグについての予備的な理解12345
        -->HTML の基本構造とタグについての予備的な理解12345        点击发送邮件
点击123


4）块级标签与行级标签的区别


 1、块级标签：默认宽度100%(占满一行)；<br>						块级标签自动换行(独占一行，右边不能有任何东西)；<br>						块级标签可以使用CSS设置宽度高度！<br><br>			2、行级标签：默认宽度由内容撑开(内容多宽、宽度就占多宽)；<br>						行级标签不会自动换行(一行当中，从左往右依次排列)；<br>						行级标签的宽度高度不能设置！


5）表格


（1）表格table


			表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示<br><br>			th表示的是：表头。表头中的文字，默认为加粗居中。th要放在tr中，用于替换掉td。<br><br>（2）table的常用属性<br>A、border：给表格加边框。 默认给所有td加边框，并且给整个table加外边框。 当增大border的值时，td上的边框不变化，只有最外层大边框变宽。<br><br>B、cellspacing：单元格与单元格之间的距离。<br>			   cellspacing="0" 表示单元格与单元格之间没有距离，但是边框线的宽度依然是两条线的宽度。<br><br>			   [注意] 表格边框合并的CSS写法：<br>			   style="border-collapse: collapse;"<br><br>这条CSS与cellspacing="0"有什么区别？<br>			   cellspacing="0"仅仅是将单元格之间的距离调整为0，实际上单元格之间依然还是两条线；<br>			   border-collapse: collapse; 是将表格相邻的两条边框进行合并处理，只有一条线存在。(一旦边框合并，cellspace属性将会失效。)<br><br><br>C、cellpadding：单元格中的文字与单元格边框的距离。<br><br>D、 height：表格的高度<br>			   width：表格的宽度<br><br>  使用表格宽、高属性设置大小：<br>			   

<br><br>  使用CSS样式设置大小：<br>			   
<br><br><br>E、align：设置表格在浏览器中的位置。不建议使用了。<br> 可选值：left 表格居左 /center 表格居中/right 表格居右<br><br><br>F、bgcolor：背景色<br>			   bordercolor:边框颜色<br>			   background:背景图 background="img/computer.jpg" <br>  背景色和背景图同时存在时，背景图会覆盖背景色<br><br><br>（3）tr与td常用属性<br>A、width：单元格宽度<br>			   height：单元格的高度<br><br>B、bgcolor： 单元格的颜色<br><br>C、align:设置单元格中的文字，水平对齐方式。<br> left、center、right<br>			   valign:设置单元格中的文字，垂直对齐方式。<br> top、middle、bottom<br><br>D、 nowrap="nowrap" 当单元格文字过多时，设置单元格文字不断行显示。 但是，会把表格的宽度撑大!!!<br><br><br>（4）表格的跨行与跨列<br><br>①跨列：在td上使用属性colspan="n"进行跨列。如果一个单元格跨n列，则，单元格右边的n-1个单元格需要去掉。<br><br>②跨行：在td上使用属性rowspan="n"进行跨行。如果一个单元格跨n行，则，单元格下边的n-1个单元格需要去掉。




nbsp;html><meta>表格





标题一
标题二




1-1
1-2
1-3




2-2
2-3




        
            
                
                
                
            
                



































        


3. 最後に書いてあること


 初めてブログに触れた私にとって、最初の投稿の時は少し興奮しました。コードって不思議な場所だなと改めて思いましたし、魔法的でもあります。 


 とても奥が深くて自分には手が届かないものだとずっと感じていましたが、実際に触れてみるとやはり好きでした。 


最後に、よろしくお願いします。 












以上がHTML の基本構造とタグについての予備的な理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JSケース連絡掲示板次の記事：JSケース連絡掲示板
関連記事
続きを見る