HTML5 디자인 및 수정_html5 튜토리얼 기술의 여러 페이지 예제 공유

HTML5의 새로운 의미 요소를 이해하고 익숙해지기 위한 가장 좋은 방법은 고전적인 HTML 문서를 예로 들어 HTML5의 새로운 요소로 이를 강화하는 것입니다. 다음은 변환하려는 페이지입니다. 페이지는 매우 간단하며 기사가 하나만 포함되어 있습니다.

ApocalypsePage_Original.html, 이것은 매우 표준화된 형식의 페이지이며 모든 스타일은 외부 스타일 시트에서 가져옵니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. html>  
2. html lang="zh- CN">  
3. 머리>  
4.   메타 문자 집합="utf- 8">  
5.   제목>지금의 종말제목>  
6.   링크 rel="스타일시트"  href="ApocalypsePage_Original.css">  
7. 머리>  
8.   
9. 몸>  
10. div class="헤더" >  
11.   h1>세상은 어떻게 끝날 수 있는가h1>  
12.   p class="티저" >우리가 알고 있듯이 인생의 종말을 부르는 시나리오p>  
13.   p class="작성자" >by Ray N. Carnationp>  
14. div>   
15.   
16. div class="콘텐츠" >  
17.   p>스팬 class="LeadIn">지금 당장span>, 아마도 기분이 꽤 좋을 것 같아요. 결국 선진국의 삶은 편하다스팬클래스="style1">—span>아마도 기록된 모든 역사를 통해 일반 인간보다 더 편안했습니다.p> 
18.   p>하지만 너무 우쭐대지는 마세요. 여전히 모든 것이 무너질 수 있는 끔찍한 방법이 많이 있습니다. 이 글에서는 우리가 가장 좋아하는 몇 가지 제품에 대해 알아봅니다.p>  
19.      
20.   h2>마야 최후 심판의 날h2>  
21.   p>회의론자들은 마야 달력이 단순히 새로운 5,126년 시대로 흘러가는 것이라고 제안합니다. 2012년 이후에는 실제로 종말을 예측하지 않습니다. 하지만 오래전에 죽은 마야인들이 사실상 다른 모든 것에 대해 틀렸다는 점을 감안할 때 우리가 왜 그들을 신뢰해야 합니까?p>   
22.      
23.   h2>로봇 인수h2>  
24.   p>뱀파이어 탈취나 생사 탈취만큼 무섭지는 않습니다. 로봇의 반란은 여전히 ​​​​불안한 생각입니다. 우리는 이미 기술적 장치로 인해 수적으로 열세에 있으며 심지어 빌 게이츠조차도 그의 일본인 로봇 노예가 그를 발목으로 뒤집어 놓고 (적절하게 로봇 같은 목소리로) "이제 네 아빠는 누구야?"라고 묻는 날을 두려워하고 있습니다.피>  
25.      
26.   h2>설명할 수 없는 특이점h2>  
27.   p>우리는 우주가 어떻게 시작되었는지 모르기 때문에 알 수 없습니다. 그냥 끝나지는 않을 것입니다. 어쩌면 오늘, 그리고 아마도 반물질이 뿜어져 나오고 약간의 굉음이 나는 것보다 더 흥미로운 것은 없을 것입니다.p >  
28.      
29.   h2>폭주하는 기후변화 h2>  
30.   p>Al Gore의 파멸에 대한 예언은 여전히 ​​실현될 수 있습니다. 만약 그렇다면 우리는 사나운 폭풍, 만연한 식량 부족, 그리고 무자비한 에어컨 수리공과 싸워야 할 수도 있습니다.p>   
31.      
32.   h2>글로벌 전염병h2>  
33.   p>언젠가는 치명적인 바이러스가 공격할 수 있습니다. 질병의 원인에 대해서는 예측이 다르지만 후보에는 아프리카 정글의 원숭이, 생물 테러리스트, 독감에 걸린 새와 돼지, 미래에서 온 전사, 외계 종족, 너무 많은 항생제를 사용하는 병원, 뱀파이어, CIA 및 세탁하지 않은 브뤼셀 콩나물. 출처가 무엇이든 분명히 나쁜 소식입니다.p>  
34.   
35. div>   
36.   
37. div class="바닥글" >  
38.   p class="면책조항" >이러한 종말론적 예측은 작성자의 견해를 반영하지 않습니다.p>   
39.   p>  
40.     a href="회사 소개. html">회사 소개a>  
41.     a href="면책조항. html">면책조항a>  
42.     a href="문의하기. html">문의하기a>  
43.   p>  
44.   p>저작권 © 2014 p>  
45. div>   
46. 몸>  
47. html>  

这个例子中的样式表很简单,整个页face最大宽島设置为 800개의 이미지素, 避免文本에서宽屏显示器上显示过长。页眉位于一个带有蓝color边框的盒子中，内容区的两侧itu增加了内边距，而页脚在整个页face的底part居中。
ApocalypsePage_Original.css样式文件内容如下：

XML/HTML 코드

复复内容到剪贴板

1. @charset "utf-8"
2. /* CSS 문서 */
3. 몸{
4. /*font-family 안전한 글꼴을 사용하려면 특수한 글꼴을 먼저 사용한 다음 일반의 원칙을 따르십시오.
5. 먼저 원하는 글꼴을 제공한 다음 더 안전한 글꼴을 제공하세요.
6. 드디어 산세리프체로 끝납니다*/
7. 글꼴 계열: "Lucida sans Unicode", "Lucida Grande", Geneva, sans-serif
8. max-width: 800px; /*최대 너비는 800픽셀을 초과하지 않습니다*/
9. }
10. /*페이지 상단 제목 영역 스타일*/
11. .헤더 {
12. background-color: #7695FE /*모든 색상 값을 사용할 수 있습니다*/
13. 테두리: 얇은 #336699 /*일체형 테두리 속성*/
14. padding: 10px; /* 10픽셀 패딩, 테두리와 내용 사이의 거리*/
15. margin: 10px; /* 10픽셀 여백, 테두리와 주변 요소 사이의 거리*/
16. text-align: center; /*헤더 텍스트가 가운데 정렬됨*/
17. }
18. /*헤더 제목h1>스타일*/
19. .헤더 h1{
20. 여백: 0px
21. 색상: 흰색
22. 글꼴 크기: xx-large; /*픽셀 또는 em 단위로 정밀한 제어가 가능합니다*/
23. }
24. /*헤더 자막 스타일*/
25. .헤더 .티저{
26. 여백: 0px
27. 글꼴 두께: 굵게
28. }
29. /*헤더의 시그니처 라인 스타일*/
30. .헤더 .Byline{
31. 글꼴 스타일: 기울임꼴
32. 글꼴 크기: 작음
33. 여백: 0px
34. }
35. .내용{
36. 글꼴 크기: 중간
37. 글꼴 계열: Cambria, Cochin, Georgia, "Times New Roman", Times, serif
38. /*왼쪽 및 오른쪽 최대 패딩*/
39. 패딩 상단: 20px
40. 오른쪽 패딩: 50px
41. 패딩 하단: 5px
42. 왼쪽 여백: 50px
43. line-height: 120%; /*인접한 두 텍스트 줄 사이의 거리*/
44. }
45. .Content .LeadIn{
46. 글꼴 두께: 굵게
47. 글꼴 크기: 대형
48. 글꼴 변형: 작은 대문자
49. }
50. .컨텐트 .h2{
51. 색상: #24486C
52. 여백-하단: 2px
53. 글꼴 크기: 중간
54. }
55. .콘텐츠 p{
56. 여백 상단: 0px
57. }
58. .바닥글{
59. 텍스트 정렬: 가운데
60. 글꼴 크기: x-작은
61. }
62. .바닥글 .면책조항{
63. 글꼴 스타일: 기울임꼴
64. }
65. .바닥글 p{
66. 여백: 3px
67. }

이렇게 해서 우리의 스타일 시트가 휘어졌습니다. 이제 어떤 결과가 나올지 볼까요? 아래와 같이:

HTML5를 사용하여 페이지 구성

웹 디자인에서 여전히 필수 요소인 이 컨테이너는 페이지의 모든 블록에 스타일을 적용할 수 있는 직관적이고 다재다능한 컨테이너입니다. 하지만

의 문제는 페이지 자체에 대한 정보가 반영되지 않는다는 것입니다.

HTML5에서 이러한 상황을 개선하려면

를 더 설명적인 의미를 갖는 요소로 바꾸세요.

ApocalypsePage_Revised.html에서 Header 및 Footer와

의 클래스 속성이

및

로 대체되었습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 헤더>  
2.   h1>세상은 어떻게 끝날 수 있는가h1>  
3.   p class="티저" >우리가 알고 있듯이 인생의 종말을 부르는 시나리오p>  
4.   p class="작성자" >by Ray N. Carnationp>  
5. 헤더>  
6. ...   
7. 바닥글>  
8.   p class="면책조항" >이러한 종말론적 예측은 작성자의 견해를 반영하지 않습니다.p>   
9.   p>  
10.     a href="회사 소개. html">회사 소개a>  
11. ...   
12.   p>  
13.   p>저작권 © 2014 p>  
14. 바닥글>  

当然，对应的 ApocalypsePage_Revised.css 文件也需要进行修改，将其中的 .Header and .Footer 替换为 header and footer 。part分代码如下：

XML/HTML 코드复复内容到剪贴板

1. /*페이지 상단 제목 영역 스타일*/
2. 헤더 {
3. background-color: #7695FE /*모든 색상 값을 사용할 수 있습니다*/
4. 테두리: 얇은 #336699 /*일체형 테두리 속성*/
5. padding: 10px; /* 10픽셀 패딩, 테두리와 내용 사이의 거리*/
6. margin: 10px; /* 10픽셀 여백, 테두리와 주변 요소 사이의 거리*/
7. text-align: center; /*헤더 텍스트가 가운데 정렬됨*/
8. }
9. /*헤더 제목h1>스타일*/
10. 헤더 h1{
11. 여백: 0px
12. 색상: 흰색
13. 글꼴 크기: xx-large; /*픽셀 또는 em 단위로 정밀한 제어가 가능합니다*/
14. }

마지막으로 샘플 파일에 사용해야 하는 요소가 하나 있는데, 이는 완전한 자체 포함 콘텐츠를 나타내는

요소입니다.

요소에는 제목, 작성자, 본문 등 뉴스 보도나 기사의 내용이 포함되어야 합니다. 따라서

요소를 추가한 후의 구조는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 기사>  
2.   헤더>  
3.   h1>세상은 어떻게 끝날 수 있는가h1>  
4.   p class="티저" >우리가 알고 있듯이 인생의 종말을 부르는 시나리오p>  
5.   p class="작성자" >by Ray N. Carnationp>  
6.   헤더>  
7.   div class="콘텐츠" >  
8.   p>스팬 class="LeadIn">지금 당장span>, 아마도 기분이 꽤 좋을 것 같아요. 결국 선진국의 삶은 편하다스팬클래스="style1">—span>아마도 기록된 모든 역사를 통해 일반 인간보다 더 편안했습니다.p> 
9. ...   
10.   div>   
11. 기사>  

중신설设计后，页face结构如下：

용 添加插图

很多页然然独立于文本,但是文本中会提到它.

일부 페이지는 다음과 같습니다. PART分代码如下：

XML/HTML 코드复复内容到剪贴板

1. ...   
2. div class="콘텐츠" >  
3. 피>스팬 class="LeadIn">지금 당장span>, 너는...p>   
4. div class="FloatFigure" >  
5. img src="human_skull. jpg" alt="인간 두개골">  
6. p>이러한 종말론 중 하나가 발생한다면 당신이 최후의 사람이 되겠습니까   
7. 시나리오가 실행되나요?p>  
8. div>  
9. p>하지만 너무 우쭐대지는 마세요. 있습니다...p>  
10. ...  

상대적 样式表规则如下：

XML/HTML 코드复复内容到剪贴板

1. .FloatFigure{   
2.   float: 왼쪽;   
3.   여백: 0px 20px 0px 0px;   
4. }   
5. .FloatFigure p{   
6.   최대 너비: 300px;   
7.   글꼴 크기: 작음;   
8.   글꼴 스타일: 이탤릭체;   
9.   여백-하단: 5px;   
10. }  

下图展示了这个示例观, 插图恰好, 插图恰好, 插图恰好, 插图恰好, 浮动这, 第一段文本の后,浮动这个示例實们限恰宵文本的左侧, 图题的文本的宽titude我们限恰好,让图题显示很充实,很优雅。

HTML5 中提供了一个 元素，图题可以放재 중형

元素里，经过改造，代码如下：

XML/HTML 코드复复内容到剪贴板

1. 피겨 클래스="FloatFigure" >
2. img src="human_skull. jpg" alt="인간 두개골">
3. figcaption>이러한 종말론 중 하나가 발생한다면 당신은 마지막 사람이 될 것인가
4. 시나리오가 펼쳐진다고요?figcaption>
5. 그림>

물론 스타일 시트의 선택기는 이에 따라 수정될 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. .FloatFigure{
2. 플로트: 왼쪽
3. 여백: 0px 20px 0px 0px
4. }
5. .FloatFigure figcaption{
6. 최대 너비: 300px
7. 글꼴 크기: 작음
8. 글꼴 스타일: 기울임꼴
9. 여백-하단: 5px
10. }

마지막으로 요소의 alt 속성은 제목에 이미지에 대한 완전한 설명이 포함되어 있으므로 삭제할 수 있습니다.

를 사용하여 메모 추가

새로운

요소는 주변 텍스트와 밀접하게 관련되지 않은 콘텐츠를 나타냅니다. 다른 관련 주제를 소개하거나 기본 문서에서 언급한 내용을 설명할 수 있습니다. 또한 광고 및 관련 콘텐츠 링크를 배치하는 데에도 사용할 수 있습니다.

다음 예는 인용문으로 사용됩니다. 이 효과를 생성하려면

요소를 사용하여 마크업을 더욱 의미있게 만드세요.

코드의 일부는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1.   p>... (적절하게 로봇 같은 목소리로) '누구야? 지금은 아빠야?"p>  
2.   
3. 제쳐두고 class="PullQuote" >  
4.   img src="quotes_start. png" alt="인용">  
5. 우리는 우주가 어떻게 시작되었는지 모르기 때문에 우주가 그냥 끝나지 않을지 확신할 수 없습니다. 아마도 오늘일 것입니다.   
6.   img src="quotes_end. png" alt="인용 끝">  
7. 제쳐두고>  
8.   
9. h2>설명할 수 없는 특이점h2>  

对应的样式表内容如下：

XML/HTML 코드复复内容到剪贴板

1. .PullQuote{   
2.   플로트: 오른쪽;   
3.   최대 너비: 300px;   
4.   테두리 상단: 얇은 검정색 고체;   
5.   테두리 바닥: 두꺼운 검정색 단색;   
6.   글꼴 크기: 30px;   
7.   줄 높이: 130%;   
8.   글꼴 스타일: 이탤릭체;   
9.   패딩 상단: 5px;   
10.   패딩 하단: 5px;   
11.   왼쪽 여백: 15px;   
12.   여백-하단: 10px;   
13. }   
14. .PullQuote img{   
15.   수직 정렬: 하단;   
16. }