HTML 공통 태그

HTML 공통 태그:

HTML 문서 형식:

먼저 HTML은 웹페이지를 만드는 기본이 되는 하이퍼텍스트 태그 언어입니다.

두 번째로 HTML 문서에는 최소한 기본 및 쌍을 이루는 , , , < ;body> ;

마지막으로 속성 태그는 HTML 웹 페이지의 일부 속성을 설명하고 문자 인코딩을 변환하는 데 필수적입니다. 일반적으로 국제 인코딩 utf-8이 선택됩니다.

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #ff00ff">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><span style="color: #800000">html </span><span style="color: #ff0000">xmlns</span><span style="color: #0000ff">="http://www.w3.org/1999/xhtml"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span> <span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html; charset=utf-8"</span> <span style="color: #0000ff">/></span>
<span style="color: #008080"> 5</span>     <span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">></span>我是网页标题<span style="color: #0000ff"></span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span> <span style="color: #000000">        我是网页内容。  
</span><span style="color: #008080"> 9</span>     <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span> <span style="color: #0000ff"></span><span style="color: #800000">html</span><span style="color: #0000ff">></span></span></span></span></span></span></span>

HTML 문서 구문 분석:

1. 루트 태그. 은 HTML 문서의 루트 태그이며 페이지의 모든 내용은 에 포함되어야 합니다.

2. head 태그의 문서는 웹페이지에 표시되지 않습니다. 목적은 브라우저가 문서의 속성을 구문 분석하는 것입니다.

3. 제목 태그는 간결하고 간결해야 하며, 웹 페이지의 주요 내용, 즉 웹의 제목을 요약할 수 있습니다. 페이지.

4. 웹 페이지에 표시되는 콘텐츠이기도 합니다.

1. 가장 일반적으로 사용되는 태그:

1.

...

제목 태그 ▷ 웹 페이지에서 제목 텍스트를 설정하면 검은색으로 표시됩니다. 그리고 대담하다. 코드와 효과는 다음과 같습니다.

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #800000">html</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span> <span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span>     <span style="color: #0000ff"><span style="color: #800000">meta </span><span style="color: #ff0000">http-equiv</span><span style="color: #0000ff">="Content-Type"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="text/html; charset=utf-8"</span> <span style="color: #0000ff">/><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204948381-163635024.png" class="lazy"   style="max-width:90%" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span></span>

<span style="color: #008080"> 4</span>     <span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">><span style="color: #000000">PB_</span></span>6大标题类型<span style="color: #0000ff"></span><span style="color: #800000">title</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 5</span> <span style="color: #0000ff"></span><span style="color: #800000">head</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 6</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span>     <span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 8</span>     <span style="color: #0000ff"><span style="color: #800000">h2</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h2</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 9</span>     <span style="color: #0000ff"><span style="color: #800000">h3</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h3</span><span style="color: #0000ff">></span>
<span style="color: #008080">10</span>     <span style="color: #0000ff"><span style="color: #800000">h4</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
<span style="color: #008080">11</span>     <span style="color: #0000ff"><span style="color: #800000">h5</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h5</span><span style="color: #0000ff">></span>
<span style="color: #008080">12</span>     <span style="color: #0000ff"><span style="color: #800000">h6</span><span style="color: #0000ff">></span>我是标题h1<span style="color: #0000ff"></span><span style="color: #800000">h6</span><span style="color: #0000ff">></span> 
<span style="color: #008080">13</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">14</span> <span style="color: #0000ff"></span><span style="color: #800000">html</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span>

2.

단락 태그                                                                           . 코드는 다음과 같습니다.

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">p</span><span style="color: #0000ff">></span>我是一个段落。<span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span>

3.

줄바꿈 태그                                           [참고] 종료 태그가 없는 단일 태그입니다. 코드와 효과는 다음과 같습니다.

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span> 　　欢迎来到pengbo518博客园！<span style="color: #0000ff"><span style="color: #800000">HTML 공통 태그 </span><span style="color: #0000ff">/></span><span style="color: #000000"> 我是强制换行标签喔！<img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161203000631271-945862362.png" class="lazy"   style="max-width:90%" alt="HTML 공통 태그"  style="max-width:90%"  style="max-width:90%"></span></span></span>

<span style="color: #008080">3</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

4.

---

구분선 태그          

▷ 웹페이지 내용에 대한 구분선을 설정합니다. [참고] 이 역시 종료 태그가 없는 단일 태그입니다. 코드와 효과는 다음과 같습니다.

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span> <span style="color: #000000">    　你是我的月亮
</span><span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">hr </span><span style="color: #0000ff">/></span>
<span style="color: #008080">4</span> <span style="color: #000000">    　我是地球<img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161203001938631-1115592738.png" class="lazy"   style="max-width:90%" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span>

5 body>

6、

有序列表标签【注意】要套

列表项 使用。  ▷ 设置网页中的内容，使文档有序排列。代码及效果如下：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">ol</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第1列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第2列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第3列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">6</span>     <span style="color: #0000ff"></span><span style="color: #800000">ol</span><span style="color: #0000ff">><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204319599-592154556.png" class="lazy"   style="max-width:90%" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span></span></span></span>

<span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

7、

无序列表标签【注意】要套

列表项 使用。  ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">ul</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第1列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第2列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第3列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">6</span>     <span style="color: #0000ff"></span><span style="color: #800000">ul</span><span style="color: #0000ff">><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204218693-875385495.png" class="lazy"   style="max-width:90%" alt=""></span></span></span></span></span></span>

<span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

8、

自定义列表标签【注意】要套

列表项使用。 ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">dl</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">dt</span><span style="color: #0000ff">></span>我是自定义标题1<span style="color: #0000ff"></span><span style="color: #800000">dt</span><span style="color: #0000ff">><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204205523490-2070875690.png" class="lazy"   style="max-width:90%" alt=""></span></span></span></span>

<span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">dd</span><span style="color: #0000ff">></span>我是自定义描述1<span style="color: #0000ff"></span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">dt</span><span style="color: #0000ff">></span>我是自定义标题2<span style="color: #0000ff"></span><span style="color: #800000">dt</span><span style="color: #0000ff">></span>
<span style="color: #008080">6</span>         <span style="color: #0000ff"><span style="color: #800000">dd</span><span style="color: #0000ff">></span>我是自定义描述2<span style="color: #0000ff"></span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>
<span style="color: #008080">7</span>     <span style="color: #0000ff"></span><span style="color: #800000">dl</span><span style="color: #0000ff">></span>
<span style="color: #008080">8</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span></span>

9、

自定义格式标签         ▷ 自定义设置网页中的内容格式。代码及效果如下：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>    <span style="color: #0000ff"><span style="color: #800000">pre</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span> <span style="color: #000000">           您好！
</span><span style="color: #008080">4</span> <span style="color: #000000">           欢迎您来到 pengbo518 博客园<img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204210310131-1915429582.png" class="lazy"   style="max-width:90%" alt=""></span></span></span>

<span style="color: #008080">5</span> <span style="color: #000000">           感谢您对我的关注支持！
</span><span style="color: #008080">6</span> <span style="color: #000000">           让我们共同学习探讨吧！      
</span><span style="color: #008080">7</span>    <span style="color: #0000ff"></span><span style="color: #800000">pre</span><span style="color: #0000ff">></span>
<span style="color: #008080">8</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

10. 글꼴 모양 라벨 [굵게]                                                       글꼴은 굵게 표시됩니다. 코드 및 효과는 다음과 같습니다. 11. 글꼴 모양 라벨 [이탤릭체]                                                    ▷ 🎜>

이탤릭체로 표시할 글꼴을 설정합니다. 코드와 효과는 다음과 같습니다. 12. 글꼴 모양레이블 [밑줄]                               ▷

밑줄이 표시되는 글꼴을 설정합니다. 코드와 효과는 다음과 같습니다.

13. 글꼴 모양레이블 [아래 첨자]                                           > ▷ 아래 첨자로 표시할 텍스트를 설정합니다. 코드와 효과는 다음과 같습니다. 14. 글꼴 모양레이블 [위 첨자]                                     >

위첨자로 표시할 텍스트를 설정합니다. 코드와 효과는 다음과 같습니다.

     ** 10、11、12、13、14 **                    ▷ 代码及效果集合如下：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">b</span><span style="color: #0000ff">></span>《静夜思》<span style="color: #0000ff"></span><span style="color: #800000">b</span><span style="color: #0000ff">></span> 
<span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">sub</span><span style="color: #0000ff">></span>李白<span style="color: #0000ff"></span><span style="color: #800000">sub</span><span style="color: #0000ff">></span>
<span style="color: #008080">4</span>     <span style="color: #0000ff"><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>            <span style="color: #0000ff"><span style="color: #800000">i</span><span style="color: #0000ff">></span>床前明月光，疑是地上霜。<span style="color: #0000ff"></span><span style="color: #800000">i</span><span style="color: #0000ff">></span>　<span style="color: #008080">6</span>     　　    <span style="color: #0000ff"><span style="color: #800000">u</span><span style="color: #0000ff">></span>举头望明月，低头思故乡。<span style="color: #0000ff"></span><span style="color: #800000">u</span><span style="color: #0000ff">></span> </span></span></span></span></span></span>

<em id="__mceDel"><span style="color: #008080">7</span>         <span style="color: #0000ff"><span style="color: #800000">sup</span><span style="color: #0000ff">></span>pengbo518<span style="color: #0000ff"></span><span style="color: #800000">sup</span><span style="color: #0000ff">></span>
<span style="color: #008080">8</span>     <span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">9</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></em>

15、 字体标签                    ▷ 设置字体、字号、颜色等。代码语法及效果如下：

       语法：文本

<span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span>    <span style="color: #0000ff"><span style="color: #800000">font </span><span style="color: #ff0000">size</span><span style="color: #0000ff">="+2"</span><span style="color: #ff0000"> face</span><span style="color: #0000ff">="Arial, Helvetica, sans-serif"</span><span style="color: #ff0000"> color</span><span style="color: #0000ff">="#FF0000"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span> <span style="color: #000000">       HTML I love you !
</span><span style="color: #008080"> 4</span>    <span style="color: #0000ff"></span><span style="color: #800000">font</span><span style="color: #0000ff">><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204231516740-1821234010.png" class="lazy"   style="max-width:90%" alt=""></span></span></span>

<span style="color: #008080"> 5</span>        <span style="color: #0000ff"><span style="color: #800000">HTML 공통 태그 </span><span style="color: #0000ff">/></span>
<span style="color: #008080"> 6</span>    <span style="color: #0000ff"><span style="color: #800000">font </span><span style="color: #ff0000">size</span><span style="color: #0000ff">="+3"</span><span style="color: #ff0000"> face</span><span style="color: #0000ff">="隶书"</span><span style="color: #ff0000"> color</span><span style="color: #0000ff">="#0000FF"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span> <span style="color: #000000">       热爱生活，热爱博客园
</span><span style="color: #008080"> 8</span>    <span style="color: #0000ff"></span><span style="color: #800000">font</span><span style="color: #0000ff">></span>     
<span style="color: #008080"> 9</span> <span style="color: #0000ff"><span style="color: #800000">body<span style="color: #0000ff">></span></span></span>
</span></span>

16、 图像标签                                ▷ 设置字体、字号、颜色等。代码语法及效果如下：

　　  语法：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>    <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images.png"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="小鱼"</span><span style="color: #ff0000"> width</span><span style="color: #0000ff">="70px"</span><span style="color: #ff0000"> height</span><span style="color: #0000ff">="70px"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">="鱼干"</span> <span style="color: #0000ff">/><img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204232949302-201637373.png" class="lazy"   style="max-width:90%" alt=""></span></span></span>

<span style="color: #008080">3</span> <span style="color: #000000">      我的小鱼干呢
</span><span style="color: #008080">4</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>

17、超链接标签                           ▷ 创建超链接，href属性来设置页面的链接地址。代码语法及效果如下：

<span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.baidu.com"</span><span style="color: #0000ff">></span>百度<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span><span style="color: #000000">||<img src="/static/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161205001152240-1209790473.png" class="lazy"   style="max-width:90%" alt=""></span></span></span>

<span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.taobao.com"</span><span style="color: #0000ff">></span>淘宝<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span><span style="color: #000000">||
</span><span style="color: #008080">4</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.cnblogs.com"</span><span style="color: #0000ff">></span>博客园<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span>

[보충] 1. 파일 경로: 1. 절대 경로: ▷ 절대 경로는 도메인 이름을 의미합니다. 또는 disk 기호의 전체 경로입니다.

2. 상대경로 : ▷ 상대 경로는 이 파일의 경로와 다른 파일(또는 폴더) 간의 경로 관계를 의미합니다. 예:

　　　① 둘 다 같은 폴더에 있으면 링크 pengbo518.html 은 다음과 같이 index.html에 링크할 수 있습니다.

　> href=" pengbo518.html">pengbo518 블로그파크

　　　② 만약 pengbo518.html파일은 index.html 파일의 상위 경로는 index.html에서 다음과 같이 링크할 수 있습니다:

>pengbo518.html">pengbo518 블로그 가든

　　　　　　　　　　이. 기준점: 　　　　　　 ▷ 설정 앵커 포인트는 일반적으로 특정 주제나 문서 상단에 배치됩니다. 그런 다음 지정된 위치로 빠르게 이동할 수 있는 앵커 링크를 만듭니다.                   현재 문서의 앵커 링크: 링크 텍스트

다른 문서의 앵커에 대한 링크: