집 >웹 프론트엔드 >H5 튜토리얼 >html5에 추가된 새로운 태그는 무엇입니까?

html5에 추가된 새로운 태그는 무엇입니까?

php中世界最好的语言원래의: 2018-03-26 15:42:293218검색

이번에는 html5에 새로 추가된 태그는 무엇인지, html5에 새로 추가된 태그 사용 시 주의사항은 무엇인지 알려드리겠습니다. 아래는 실제 사례를 살펴보겠습니다.

오늘 9개의 새로운 태그를 배웠습니다.

는 옵션 목록을 정의합니다. 이는 실제로 비교적 큰 개선이지만 단점도 있습니다. 이 태그는 실제로 "입력 태그의 텍스트"와 선택 태그를 결합하여 입력 및 드롭다운 옵션을 허용하는 입력 콤보 상자를 생성합니다. 단점은 JS를 통해 제어되지 않으면 정의된 드롭다운 옵션이 입력 상자가 비어 있을 때만 적용된다는 것입니다.

이 태그는 실제로 많은 실용적인 용도를 갖고 있으며 요약 태그와 함께 자주 사용됩니다. 요약 태그에 문서 제목을 적어주세요. p 태그를 사용한 문서 작성 세부 사항

강조 표시된 표시 태그를 사용하면 더 이상 텍스트의 특정 단락을 표시하기 위해 글꼴 속성을 사용할 필요가 없습니다.

빠르게 목록을 만들어 보세요. 사용법은 메뉴 li와

주소를 저장하는 라벨

을 결합하는 것입니다. 이것은 progress bar 라벨입니다. 주요 속성은 가치와 최대입니다. value는 현재 진행률 표시줄 위치를 나타내고, max는 진행률 표시줄의 전체 길이를 나타냅니다.

태그는 시간 태그입니다.

html5 태그에 대한 초기 노출. 당신이 얻는 첫인상은 텍스트가 무엇을 의미하는지 알고 있다는 것입니다. 이 라벨은 기억하기 쉽습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Html5学习之路</title>
</head>
<body>
<header style="text-align: center; color: blue;">欢迎来到Html5的学习之路，我是header标签。</header>
这是一个定义选项列表的标签datalist 这个的作用就是将text文本框与select标签结合起来
<input type="text" list="phone">
<datalist id="phone">
    <option></option>
    <option>IPhone</option>
    <option>华为    </option>
    <option>小米    </option>
    <option>三星</option>
</datalist>
<br/>
<br/>
<font color="red">这里我发现了两者一个不同之处在于，datalist只有在输入框为空的时候才会有自己定义下拉的内容!</font>
<br/>
而这个select选项框是不管什么内容它都会存在的
<select>
    <option>IPhone</option>
    <option>华为    </option>
    <option>小米    </option>
    <option>三星</option>
</select>
<br>
<br>
<br>
------------------------
<br><br><br>
这是一个定义文档细节的标签。detail标签。它的主要作用很简单。
<details>
    <summary>这是一个detail标签，下面就是他的使用方法</summary>
        <p>detail标签是什么？</p>
        <p>detail标签有什么作用？</p>
        <p>detail标签能干什么？</p>
        <p>detail标签我改怎么用它？</p>
</details>
<br>
detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签<mark>mark</mark>比重不一样。
<br><br>
接下来这个标签是定义列表标签。menu。
<menu>
    <li>西游记</li><li>水浒传</li><li>红楼梦</li><li>三国演义</li>
</menu>
<br><br>
进度条标签我们用的比较多。比如这个。<mark>progress</mark>
<progress value="5" max="10">value=5 max=10</progress>
<br>
<audio src="" controls="controls" autoplay="autoplay" loop="loop"></audio>
<footer>我是底部footer标签</footer>
</body>
</html>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!