>  기사  >  웹 프론트엔드  >  숙련된 HTML 작성 스타일 및 이유 분석_HTML/Xhtml_웹페이지 제작

숙련된 HTML 작성 스타일 및 이유 분석_HTML/Xhtml_웹페이지 제작

WBOY
WBOY원래의
2016-05-16 16:42:001018검색

1. 내비게이션 작성 시 가장 일반적으로 사용되는 "순서 없는 목록"을 사용하는 이유는 다음과 같습니다. 분명히 이는 링크 목록을 나타내며, 이는 그 자체로 목록 레이블을 선택하기에 충분한 이유입니다. 그러나 목록을 더 의미 있게 만들려면 목록의 기본 스타일을 제거해야 합니다. 상상할 수 없는 또 다른 이점이 있습니다. 목록을 만들고 링크를 추가하고 CSS를 사용하여 목록의 요소 문자열을 제어하고 정의할 수 있습니다.
숙련된 HTML 작성 스타일 및 이유 분석_HTML/Xhtml_웹페이지 제작2. 경로(breadcrumbs): p 문단 태그에서 목록 목록 태그로



이 문제에 대해 함께 논의할 수 있는 다른 좋은 방법이 있으면 알려주시기 바랍니다. 개인적으로 나는 다음과 같은 코드를 사용하여 경로(탐색경로)를 작성하는 것을 선호합니다. (그러나 나는 >> 기호를 자주 사용하지 않습니다.)
웹사이트 경로(탐색경로)는 특정 페이지에서 계층적 관계를 가지고 있습니다. 논리적으로 말하면 계층적 관계를 나타내기 위해 목록이 중첩되어야 합니다. 그런데 목록에 항목이 하나만 있는 경우 어떻게 생각하시나요? 어떤 상황인가요? 저는 개인적으로 웹페이지 경로(탐색경로)가 한 줄에 표시되어야 한다고 생각합니다. 숙련된 HTML 작성 스타일 및 이유 분석_HTML/Xhtml_웹페이지 제작

3. 버튼 대 입력

<p id="breadcrumbs"><a href="#">首页</a> » <a href="#">关于我们</a> </p>
input type="submit"을 마지막으로 사용한 것이 기억나지 않지만 두 가지 이유로 오래 전에 사용을 중단했습니다. 버튼 요소에 대해 type="submit"을 입력해야 합니까? 버튼은 자체 요소입니다. 버튼은 코드에서 식별하기 쉽고 CSS를 사용하여 정의하기 쉽습니다(모든 이전 브라우저가 이 요소 태그 속성을 지원하는 것은 아닙니다). 또한 내부에 다른 태그 요소를 작성할 수 있으므로 가소성에 대한 가능성이 확장됩니다.

4. 메시지 남기기: 순서가 있는 목록(ol)과 순서가 없는 목록(ul)

<button type="submit">Submit Form</button>
목록이 정말 좋아요! 3가지 유형(정렬된 목록, 정렬되지 않은 목록, 정의된 목록)이 있으며 각 유형에는 고유한 목적이 있습니다. 어쩌면 순서가 있는 목록(ol)을 언제 사용해야 하는지, 언제 순서가 없는 목록(ul)을 사용해야 하는지 혼란스러울 수도 있습니다. 왜냐하면 그것들은 사용될 때 의미가 있기 때문입니다. 메시지는 교과서의 예와 약간 비슷하지만 시간순으로 깔끔하게 정리되어 자연스럽게 위쪽으로 정렬됩니다. 각 댓글은 고정된 시간에 해당하므로 댓글 구조는 순서가 지정된 목록(ol)을 사용해야 합니다.


숙련된 HTML 작성 스타일 및 이유 분석_HTML/Xhtml_웹페이지 제작025. 라벨/입력: div 기타 라벨 요소의 경우

<ol>
	<li>
	<ul>
	<li><img src="path-to-gravatar.gif" alt="Author's name"></li>
	<li><a href="url-to-authors-homepage.html">Author's name</a></li>

	<li>posted on date-goes-here</li>
	</ul>
	<div>Comment text goes here...</div>
	</li>
</ol>

라벨/입력 외부의 상위 구조를 설정합니다. 최선의 선택은 무엇입니까?
숙련된 HTML 작성 스타일 및 이유 분석_HTML/Xhtml_웹페이지 제작03적절한 라벨 코드를 사용하는 것에 대해서는 과거에도 논의할 수 있었지만 이제는 라벨/입력을 삽입하기 위해 div를 사용하기로 선택합니다. div 요소는 광범위한 의미적 속성을 가지며 어떤 상황에도 적응할 수 있습니다.

중국어 원문:
<label for="contactName">Your Name</label>
<input type="text" name="contactName" id="contactName">

나의 5개 HTML 쓰기 환경설정
<div>
	<label for="contactName">Your Name</label>
	<input type="text" name="contactName" id="contactName">
</div>

영어 원문: 내 HTML 코딩 기본 설정 상위 5개

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.