과거에는, 우리는 효과는이 문서의 JS와 함께 사용할 필요, 오늘날의 많은입니다, 페이지 효과를 볼, 어떻게 자신의 실제적인 효과를 만드는 순수한 HTML을 사용하는 방법을 설명합니다.
1. ** 접어 아코디언 **
사용 세부 사항 및 요약 탭은 접을 수있는 아코디언에게 더 자바 스크립트 코드를 만들 수 없습니다.
효과 :
HTML
<details>
<summary>Languages Used</summary>
<p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p>
</details>
<details>
<summary>How it Works</summary>
<p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p>
</details>
CSS
* { font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
} details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0;
} summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em;
} details[open] { padding: .5em;
} details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）브라우저 지원 :
2. ** 진행 막대 **
라벨과에 진행 미터의 기본 요소, 당신은 화면의 진행 표시 줄에 표시되는 속성을 조정할 수 있습니다. 진행은 두 가지 속성이 있습니다 max및 value교정 진행 표시 줄 및 미터 라벨은 더 사용자 지정 특성을 제공합니다.
효과 :
HTML :
<label for="upload">Upload progress:</label>
<meter id="upload" name="upload"
min="0" max="100"
low="33" high="66" optimum="80"
value="50">
at 50/100
</meter>
<hr/>
<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
CSS :
body {
margin: 50px;
}
label {
padding-right: 10px;
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
브라우저 지원 :
3. 더 많은 입력 유형
입력 요소를 정의 할 때, 당신은 최신 브라우저 사용자가 입력만큼의 유형을 지정할 수 있음을 알아야합니다. 이미 텍스트, 이메일, 비밀번호, 이러한 유형의 수뿐만 아니라, 아래 사람들이 있다는 것을 알아야한다.
- 기계는 날짜 날짜 선택기를 표시합니다
- 날짜 로컬 풍부한 날짜 및 시간 선택기
- 달 친화적 인 선택 개월
- 전화는 전화 번호를 입력하게됩니다. 모바일 브라우저를 열고 팝업 키보드가 변경됩니다, 같은 이메일의 사실이다.
- 친근한 스타일을 검색하려면 검색 텍스트 상자를 입력합니다.
효과 :
HTML :
<label for="date">Enter date:</label>
<input type="date" id="date"/>
<label for="datetime">Enter date & time:</label>
<input type="datetime-local" id="datetime"/>
<label for="month">Enter month:</label>
<input type="month" id="month"/>
<label for="search">Search for:</label>
<input type="search" id="search"/>
<label for="tel">Enter Phone:</label>
<input type="tel" id="tel">
CSS :
input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}
새로운 입력 유형 MDN 문서의 다양한 매우 광범위하고 정보의 큰 금액입니다. 또한, 키보드 입력 방식 모바일 사용자의 동작을 확인하면 모바일 브라우저에서 이러한 입력 요소.
4. 비디오 및 오디오
video그리고 audio그것은 비록 요소는 HTML 표준의 일부가되었다,하지만 당신은 깜짝 놀라게 할 것이다 당신이 사용할 수있는 video화면에 괜찮은 비디오 플레이어를 렌더링하는 태그를.
<video controls>
<source src="https://addpipe.com/sample_vid/short.mp4"
poster="https://addpipe.com/sample_vid/poster.png">
Sorry, your browser doesn't support embedded videos.
</video
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）참고의 가치가 일부 속성 비디오 태그는 다음과 같습니다 :
- 동영상 URL 커버를 다운로드 할 때 포스터 표시 할
- 프리로드 사전은로드 여부를 때 페이지가로드 전체 비디오를
- 자동 재생 비디오가 자동으로 페이지가로드 될 때 플레이해야하는지 여부
브라우저 지원 :
** 증거 텍스트 **
당신은 역사적 상황이 편집 그리고 교정 표시 할 때 blockquote, del그리고 ins요소 태그가 편리하게 할 수 있습니다.
예 :
HTML :
<blockquote>
There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
CSS :
del {
text-decoration: line-through;
background-color: #fbb;
color: #555;
}
ins {
text-decoration: none;
background-color: #d4fcbc;
}
blockquote {
padding-left: 15px;
line-height: 30px;
border-left: 3px solid #d7d7db;
font-size: 1rem;
background: #eee;
width: 200px;
}
6. 더 통합 따옴표
때문에 영어로 다른 따옴표 때문에, 사용 <q>태그 것은 당신에게이 문제에 대한 좋은 해결책을 만들 수 있습니다, 대부분의 브라우저에서 콘텐츠 더 일관되게 인용 할 수 있습니다.
HTML :
Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p>
<hr/>
Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>
CSS :
body {
margin: 50px;
}
q {
font-style: italic;
color: #000000bf;
}
7. 키보드 탭
<kbd>레이블은 덜 알려진 인기 레이블을해야하지만,이 스타일 키 조합을 설명하기 위해 더 나은 방법을 사용할 수 있습니다.
HTML :
<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>
CSS :
body {
margin: 50px;
}
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
white-space: nowrap;
}
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）8. HTML 코드 공유
용도figcaption pre code``标签，您可以使用纯``HTML``和``CSS``呈现出不错的代码片段。
HTML :
<figure>
<figcaption>
Defining a css <code>color</code> property for a class called 'golden'
</figcaption>
<pre>
<code>
.golden {
color: golden;
}
</code>
</pre>
</figure>
CSS :
pre {
background-color: #ffbdbd;
}
이 문서에서는 우리가 볼 수있는 더 많은 방법이있다, 시작합니다.