snippet: html

13911 단어 HTMLsnippets
  • 제작진이 졌어요!실제로 HTML/CSS만이 할 수 있는 2015 여름.
  • 반각 공간 & nbsp;다르다

  • 반각 공간: 너비에 따라 되돌아간다.
  •  : 너비에 따라 되돌아오지 않습니다.별도word-break:break-word;가 필요합니다.
  • 전체 화면 표시

    <style>
    /* フルスクリーン時、背景色を白にする */
    ::backdrop {
            background-color: white;
    }
    </style>
    
    <!-- クリックでフルスクリーン表示に移行 -->
    <body onClick="requestFullscreen();">
    </body>
    

    번역하다숨겨진 방법

  • 크롬의 번역을 원하십니까?부드러움을 피하는 방법 - 코드가 날로 새로워지다
  • <meta name="google" content="notranslate" />
    

    파일 다운로드 시 별칭 지정

  • ]5.
  • 이하의 쓰기 방법은 다운로드할 때'파일.pdf'라는 이름으로 다운로드할 수 있다.
  • <a href="syorui.pdf" download="書類.pdf">ダウンロード</a>
    

    input type="color"

  • - HTML | MDN
  • HTML5에는 컬러 투수 라벨을 탑재했다.
    <input type="color" value="red" />
    

    disabled와readonly의 차이


    회색 배경
  • disabled와submit.
  • readonly로 여겨진다.배경색은 보통과 같다.
  • input type="date"

  • 크롬으로 대응한다.Firefox는 지원되지 않습니다.
  • <input type="date">
    

    광고란

    <progress value="0.1">非対応時メッセージ</progress><br>
    <progress value="0.2">非対応時メッセージ</progress><br>
    <progress value="0.3">非対応時メッセージ</progress><br>
    <progress value="0.4">非対応時メッセージ</progress><br>
    <progress value="0.5">非対応時メッセージ</progress><br>
    <progress value="0.6">非対応時メッセージ</progress><br>
    <progress value="0.7">非対応時メッセージ</progress><br>
    <progress value="0.8">非対応時メッセージ</progress><br>
    <progress value="0.9">非対応時メッセージ</progress><br>
    <progress value="1.0">非対応時メッセージ</progress><br>
    

    라벨은 여러 군데에 쓸 수 있어요.

  • HTML 태그/공통 속성/요소에 추가 정보 추가 - TAG index 웹 사이트
  • <p title="要素の補足的な情報"></p>
    <tr title="要素の補足的な情報"></tr>
    <strong title="要素の補足的な情報"></strong>
    <input type="text" size="30" title="入力欄に指定した例">
    <input type="button" value="ボタン" title="ボタンに指定した例">
    

    ]5에 유효성 검사 오류 문 입력

  • pattern 속성, 표 요소, HTML 5 입문
  • 타이틀을 지정하시면 됩니다.
    <input pattern="\d*" title="数字で入力してください">
    

    이전 IE용 HTML5 및 CSS3용 라이브러리

  • IE8 이전의 낡은 브라우저를 HTML5와 CSS3에 대응시키는 방법: 초보자 블로그 학습 블로그
  • html5shiv


  • html5shiv
  • dist 폴더를 사용합니다.
  • <!--[if lt IE 9]>
    <script src="html5shiv.jsのURL"></script>
    <!-- CSSでhtml5の新要素をブロック要素にする -->
    <style>
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }
    </style>
    <![endif]-->
    

    CSS3 Pie

  • IE8도 HTML5와 CSS3에 간단하게 대응하는 방법 | 웹 제작, 군마, 아치형 웹 제작실

  • download
  • border-radius(각환)
  • box-shoadow(그림자)
  • linear-gradient(점차적)
  • behavior: url(/PIE.htc);
    
    .htaccess
    AddType text/x-component .htc
    

    URL에 @ 메서드 포함

  • Basic 인증 - URL에 기본 인증 직접 쓰기 - Qita
  • http://user%40hoge.com:[email protected]/
    
    @을%40(으)로 바꾸면 됩니다.

    css

    <link rel="stylesheet" type="text/css" href="sample.css">
    <style>
    h1 {
      font-size: 24px;
    }
    </style>
    

    비디오 레이블


  • 태그로 애니메이션 포함 - HTML5 참조
  • autooplay: 자동 재생
  • loop: 순환 재생
  • muted: 소리를 내지 않도록 지정
  • controls: 재현, 정지, 재현 위치의 이동, 음량
  • 등 디스플레이 컨트롤러
    최소 레이블
    <video src="sample.mp4"></video> 
    
    비디오 태그에 비대칭 브라우저로 이미지 표시
    <video src="sample.mp4">
      <img src="***.jpg" />
    </video>
    
    다중 소스 설명
    <video>
      <source src='sample.ogv' type='video/ogg; codecs="theora, vorbis"'>
      <source src='sample.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
    </video> 
    
    비디오 이미지
    <video src="sample.ogv" poster="firstframe.jpg"></video> 
    
    자동 재생
     <video src="sample.ogv" autoplay></video> 
    
    재생하기 전에 애니메이션을 미리 불러오는 것을 방지합니다
    <video src="sample.ogv" preload="none"></video> 
    
    기본값은 preload=auto입니다.
    또한proeload="none"HTML-WebKit 브라우저에서 비디오 탭에 preload="none"을 붙이면 찾아볼 수 있습니다.로드의 불이 너무 늦게 났어요. - 큐타.
    대책으로 지정preload="metadata"하면 된다.
    <video preload="metadata" src="//example.com/hoge.mp4" />
    
    <video controls autoplay poster="firstframe.jpg" width="320" height="240">
      <source src="sample.mp4">
      <source src="sample.ogv">
      <source src="sample.webm">
      <p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
    </video>
    
    .htaccess
    AddType video/ogg .ogg .ogv
    AddType video/mp4 .mp4
    AddType audio/ogg .ogg
    AddType application/ogg .ogg .ogv 
    

    audio 태그

    <audio src="sample/sample.ogg" controls>
    <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
    </audio> 
    
    .htaccess
    AddType video/ogg .ogg .ogv
    AddType audio/ogg .ogg
    AddType application/ogg .ogg .ogv 
    

    좋은 웹페이지 즐겨찾기