HTML의 기본 구조와 태그에 대한 사전 이해

巴扎黑
풀어 주다: 2017-06-23 14:51:11
원래의
2259명이 탐색했습니다.

1. HTML에 대한 사전 이해

HTML은 하이퍼텍스트 태그 언어이며, 브라우저는 HTML 소스 코드를 "해석하고 실행"하는 데 사용되는 도구입니다.

HTML의 기본 구조

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>
로그인 후 복사

여기서 은 이 파일이 HTML5 파일이어야 함을 선언하는 문서 유형 선언입니다. 브라우징 브라우저는 HTML5를 준수합니다. 파싱을 준비하려면 HTML5로 되어 있어야 하고, 존재해야 하며, 파일 상단에 작성해야 합니다.

은 웹페이지 제목이며, 상단에 표시되는 텍스트입니다:

<span style="font-size: 16px"><span style="font-family: 宋体"><head> </head>是用来描述网页的一些关键信息。例如网页的配置、设置、关键字等等。</span>。</span><span style="font-size: 18px"><span style="font-size: 16px">。这些信息,大多在浏览器看不到,但是对网页的解析至关重要!</span><br></span>
로그인 후 복사
<span style="font-family: 宋体; font-size: 16px"> <body> </body>则是所有的代码都写在其中。<br><span style="font-size: 18pt; background-color: #cc99ff">二、初步了解标签<br></span></span>
로그인 후 복사

1) 링크: 웹페이지 제목의 아이콘입니다.

链接网页的小图标,网页选项卡上面的小图片
로그인 후 복사
여기서 rel="icon"은 현재 링크가 웹페이지를 연결하는 데 사용됨을 나타냅니다 아이콘href="img/ss.gif"는 아이콘 주소의 위치를 ​​나타냅니다

<link rel="icon" href="img/sss.gif" />
로그인 후 복사

2)메타: 웹 페이지의 다양한 정보를 설명하는 데 사용됩니다

<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>
로그인 후 복사
<meta charset="utf-8" />
로그인 후 복사
<br>
로그인 후 복사
로그인 후 복사
로그인 후 복사

검색 엔진에 도움이 되도록 웹 페이지에 대한 키워드를 설정할 수 있으며, 여러 키워드는 영어로 쉼표로 구분됩니다.

<meta name="keywords"content="杰睿教育,网页开发" />
로그인 후 복사

3엔진 검색 시 웹페이지의 상세 정보와 제목 아래 텍스트 단락을 설정하세요!

name="description"은 이 메타 태그가 웹페이지의 설명 정보를 설정한다는 의미입니다. content=""는 설명 정보의 세부 내용을 의미합니다. !

<br>
로그인 후 복사
로그인 후 복사
로그인 후 복사

<meta name="description"content="这是我在,,,,"/>
로그인 후 복사
<br>
로그인 후 복사
로그인 후 복사
로그인 후 복사

2、主体部分

1)标签的分类

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

2)块级标签 

常见的块级标签有:

 

a.标题标签:

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

 

b.水平线标签:


 

c.段落标签:

 

d.换行标签:

 

e.引用标签:

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

 

f.预格式标签:

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

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><h1>这是h1标签</h1><h2>这是h2标签</h2><h3>这是h3标签</h3><h4>这是h4标签</h4><h5>这是h5标签</h5><h6>这是h6标签</h6><hr/><p>这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!这是一段文字!
            
            哈哈啊哈哈哈啊哈哈哈哈啊哈!<br/>这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!</p><p>这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!这是一段文字!哈哈啊哈哈哈啊哈哈哈哈啊哈!</p><pre class="brush:php;toolbar:false">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>       
  3. ...
  4. <br>       
  5. ...
  6. <br>     

h.无序列表<br>     

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

i.定义描述列表<br>     

<br>       
一般只有一项
(列表标题)<br>       
可以有很多项
(列表描述项)<br>       
132
<br>       
123
<br>     

g.组合标签 显示效果:上面是图片,下面是图片的标题,同时图片和标题前代缩进。<br>     

<br>        图片<br>       
图片的标题。<br>     

k.分区标签

     

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

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本块级标签</title></head>
    <body><ul><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ul>
        <ol><li>这是无序列表第一项</li><li>这是无序列表第二项</li><li>这是无序列表第三项</li><li>这是无序列表第四项</li></ol>
        <dl><dt>这是dl列表的标题</dt><dd>这是dl列表的描述项1</dd><dd>这是dl列表的描述项2</dd><dd>这是dl列表的描述项3</dd></dl>
        <figure><img src="img/icon.jpg" /><figcaption>图片的描述标题</figcaption></figure>
        <div style="width: 500px; height: 100px; background-color: yellow;">这是div里面的文字!!!<p>11111</p></div>
                <div style="height: 500px;"></div></body></html>
로그인 후 복사

3) 행 수준 태그

일반적인 행 수준 태그:

(1) 텍스트 태그 범위

① 범위 태그는 단지 래핑 기능일 뿐이며 다른 의미는 없습니다. ; <br> ②span은 div와 유사하며 CSS와 함께 사용해야 합니다. div는 블록 수준 태그이고 범위는 행 수준 태그입니다.

<br> (2) 태그 em과 Strong 태그 강조; 굵게 표시된 태그 b; ① em과 i는 기울일 수 있습니다. Strong과 b 모두 굵게 표시할 수 있습니다! 그러나 i와 b는 단순히 기울어지고 굵게 표시된 반면 em과 Strong은 더 강조된 의미를 갖습니다.

② em과 Strong은 모두 강조를 의미하지만 Strong은 더 높은 수준을 강조합니다! ! <br> 참고: <br> 1. 강조의 목적: 웹 페이지가 강조하는 내용을 검색 엔진에 알립니다! 검색엔진에 노출되기 쉽습니다! <br> 2. Strong과 em은 여러 레이어에 중첩되어 강조가 증가함을 나타낼 수 있습니다! <br>

(3) 짧은 인용 태그 q: 짧은 인용을 나타냅니다. ​​

cite 속성: 인용 출처를 선언하는 데 사용됩니다. Commonly 사용 kupe tags】

<br> <br> <br> <br> <br> & lt; blockquote & gt; 컨텐츠를 인용하는 데 사용됩니다. 작품, 그림, 서예 등의 이름을 인용하는 데 일반적으로 사용됩니다.<br><br> 유사성: 세 개의 인용 태그는 모두 cite 속성을 사용하여 인용 출처를 나타냅니다.

차이점 : ① 인용 내용이 다릅니다. Blockquote-> 문단, q-> 문장, 인용-> 작품명

② 표시되는 기본 효과가 다릅니다. blockquote-> 기본적으로 전체 단락이 오른쪽으로 들여쓰기됩니다. q-> 기본적으로 인용 부호가 추가됩니다.

(4) 태그 작게: 글꼴을 한 크기 줄입니다.

큰 태그: 글꼴을 한 크기 늘립니다. <br><br>참고:

① 글꼴이 최소 또는 최대에 도달할 때까지 여러 수준에 중첩될 수 있습니다.

② 이 두 태그는 제거되었으며 사용을 권장하지 않습니다.

<br> (5) 이미지 태그 img <br><br>

① src 속성 : 이미지의 경로를 나타냄

[적법한 이미지 경로 방식] <br>A. 네트워크 링크 : 이미지가 다른 사이트에 있으므로 다른 사이트에서 삭제하면 이미지에 접근할 수 없으므로 이 방법을 사용하지 않는 것이 좋습니다. <br>

B. 절대 경로: 절대 경로 사용 이 컴퓨터에서는 파일 프로토콜을 통해서만 사진에 액세스할 수 있습니다! 따라서 이 방법을 사용하는 것은 엄격히 금지되어 있습니다! 🎜🎜🎜🎜🎜

<br>C. 상대 경로: <br>a. 사진이 현재 문서와 같은 폴더에 있습니다. 사진 이름을 직접 입력하세요. <br> <br>b . 사진은 현재 문서의 하위 폴더에 있습니다: 폴더 이름/사진 이름<br> <br>c. 현재 문서의 레벨 폴더: ../사진 이름(../은 한 레벨 뒤로 돌아가는 것을 의미)<br> <br>단, 주의하세요 : 그림은 프로젝트에 포함되어야 하며 프로젝트 외부의 그림에는 접근할 수 없습니다. ③ 제목 : 그림의 제목, 마우스 오버 시 나타나는 프롬프트 텍스트<br><br> <br> <br> ④ alt: 이미지를 로드할 수 없을 때 표시되는 텍스트<br> 이미지를 로드할 수 없을 때 표시되는 텍스트<br> <br> ⑤ 정렬: 이미지 주변 이미지를 기준으로 텍스트가 정렬되는 방식입니다. <br> 선택 값: 상단->사진 중앙 상단->사진 중앙 하단->사진 하단<br> 12345<br> <br> (6) <br>Hyperlink 태그 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锚点位置

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本行级标签</title></head><body><a name="e"></a>
        
        糖糖<span style="color: red; font-size: 48px;">真帅</span>!!!<br />
        <em>这是em标签</em><br /><strong>这是strong标签</strong><br /><i>这是i标签</i><br /><b>这是b标签</b><br /><u>这是b标签</u><br />
        <q cite="http://www.jianghaozhenshuai.com">我是q标签引用</q><blockquote>我是blockqoute的引用!!!!!</blockquote><cite cite="">我是cite标签的引用!!</cite><br />
        <small><small>我比正常小两号</small></small><br /><big>我比正常大一号</big><br />
        
              <img src="img/icon.jpg" align="top" />12345
        --><img src="img/icon.jpg" align="bottom" />12345        <a href="tencent://message/?uin=1105093212"target"_blank">点击发送邮件</a><div style="background-color: aqua;height: 1000px"></div><a href="#e">点击</a><a href="锚点.html#1">1</a><a href="锚点.html#2">2</a><a href="锚点.html#3">3</a></body></html>
로그인 후 복사

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个单元格需要去掉。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1"><tr><th >标题一</th><th colspan="2">标题二</th></tr><tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-2</td><td>2-3</td></table>
        
            <table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;"><!--1--><tr><td rowspan="7"></td><td rowspan="4"></td><td rowspan="2"></td><td ></td></tr><!--2--><tr><td ></td></tr><!--3--><tr><td rowspan="2"></td><td></td></tr><!--4--><tr><td rowspan="4"></td>
                </tr><!--5--><tr><td rowspan="2"></td><td rowspan="2"></td></tr><!--6--><tr>
                
                </tr><!--7--><tr><td colspan="2"></td>
            
                </tr></table>
        </body></html>
로그인 후 복사

3. 마지막에 적힌 내용

처음으로 블로그를 접하게 되어서 처음으로 코드를 접하게 된 저로서는 조금 설렜습니다. 코드가 마법같은 곳이라는 생각이 들기도 하고, 둘 다 마법같기도 해서 또 재미있다고 생각했어요.

나는 항상 이러한 것들이 매우 심오하고 내 손에 닿을 수 없는 것이라고 느꼈지만, 그것들을 접했을 때 나는 여전히 그것들을 좋아했습니다.

마지막으로 잘 부탁드립니다.

위 내용은 HTML의 기본 구조와 태그에 대한 사전 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!