Giter VIP home page Giter VIP logo

html5_study's Introduction

HTML 학습하기


문서의 구성


html문서는 DTD를 선언하고, html 태그를 열고, 그 안에 head와 body로 구분하여 작성한다.

<!-- html을 md에 작성하려면 ```html ```에서 작성해줘야 한다. -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

a 태그(하이퍼링크) 활용

<nav>
    <ul>
        <li><a href="./ex1.html">내부문서</a></li>
        <li><a href="https://www.naver.com/" target="_blank">외부사이트</a></li>
        <li><a href="#ft">푸터로이동(name 앵커)</a></li>
        <!-- 메일 보내기 -->
        <li><a href="mailto:[email protected]">이메일 보내기</a></li>
        <!-- 휴대폰에서 바로 전화걸기 -->
        <li><a href="tel:010-1234-5678">전화걸기</a></li>
        <!-- 문자 전송 -->
        <li><a href="sms:Hello world">문자보내기</a></li>
        <!-- 네이버 검색 -->
        <li><a href="http://search.naver.com/search.naver?query=ohsehoon">오세훈 검색</a></li>
    </ul>
</nav>

미디어 관련 태그

<h1>미디어 관련 태그</h1>
<hr>

<h2>이미지</h2>
<img width="1205" height="678" src="./img/building.jpg" alt="건물" title="도시에 있는 여자">
<hr>

<h2>오디오</h2>
<!-- autoplay muted 음소거 상태로 자동 실행 -->
<!-- controls 오디오 제어 -->
<audio src="./sound/sample1.mp3" controls muted=""></audio>
<hr>

<h2>iframe</h2>
<iframe width="1205" height="678" src="https://www.youtube.com/embed/ioipXUbjMls" title="그냥 X만 누르면 이기는 사기악세" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<hr>

<h2>동영상</h2>
<video width="1205" height="678" src="./movie/ditto.mp4" controls autoplay muted></video>
<hr>

html5_study's People

Contributors

sedoll avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.