H5가 출시된 이후로 모두가 html5만 기억합니다. html4는 정말 강력하고 웹에서 다양한 용도로 사용됩니다. 문제는 함께 해결해 나가기 때문에 이번 글에서는 HTML5의 새로운 기능을 자세히 소개하겠습니다. 아파치 PHP mysql
시작!
1. HTML5 및 HTML4
1.1 출시 이유 및 목표
의 출현 H5는 웹에서 매우 중요한 의미를 갖습니다. 그의 의도는 현재 웹에 존재하는 모든 종류의 문제를 해결하는 것이기 때문입니다.
웹 브라우저 간 호환성이 매우 낮음
문서 구조가 명확하지 않습니다. 구조, 의미 태그 추가)
웹 애플리케이션의 기능이 제한되어 있습니다
#🎜🎜 #H5의 출현으로 위의 문제가 크게 해결되었습니다
1.2 구문 변경1.2.1 DOCTYPE 문H5 문 of DOCTYPE은 다음과 같습니다:<!DOCTYPE html>Html:4s DOCTYPE의 문은 다음과 같습니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Html: 4t DOCTYPE의 문은 다음과 같습니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"># 🎜🎜#1.2.2 문자 인코딩 지정
H5 문자 인코딩 형식을 다음과 같이 지정합니다.
<meta charset="UTF-8" />
Html:4s 문자 인코딩을 다음과 같이 지정합니다.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /># 🎜🎜# 1.2.3 닫는 태그의 요소는 생략할 수 있습니다 무슨 일이 일어나고 있는지 이해하기 위해 간단한 예를 들어보겠습니다
우리는 일반적으로 p 태그를 다음과 같이 작성합니다: # 🎜🎜# <body>
<p>Hello world!</p>
</body>
#🎜 🎜#새로운 글쓰기 방식은 다음과 같이 작성할 수 있습니다.
<body>
<p/>Hello world!
</body>믿을 수 없다면 직접 테스트해 볼 수 있습니다. 매우 간단합니다. 스타일을 별도로 설정하고 동일한지 확인하면 동일하다는 것을 증명할 수 있습니다. 참고: p 태그의 스타일을 설정하세요.
<input type="button" disabled="true" value="测试按钮">
<input type="button" disabled="123" value="测试按钮">
<input type="button" disabled=" " value="测试按钮">
<input type="button" disabled="any word" value="测试按钮">
다음 코드의 버튼 요소는 활성화된 상태입니다. <input type="button" disabled="false" value="测试按钮">
<input type="button" value="测试按钮">checked 사용법은 동일합니다. 장애인이므로 여기서는 더 이상 말하지 않겠습니다. 1.2.5 따옴표 생략(태그의 속성값은 따옴표 생략 가능) H5 앞의 속성값 쓰는 방법은 이렇습니다 , img 태그의 src 속성을 예로 들어 보겠습니다. <body>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/342/865/552/1532934864725048.png?x-oss-process=image/resize,p_40" class="lazy" alt="">
</body>현재 다음과 같이 작성할 수 있습니다. <body>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/342/865/552/1532934864725048.png?x-oss-process=image/resize,p_40" class="lazy" sre = HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유 alt = "">
</body>
둘의 결과는 동일합니다. 이미지는 정상적으로 표시될 수 있습니다 1.3 새로 추가된 시맨틱 태그 시맨틱이란 무엇인가요? 의미화는 합리적인 HTML 태그와 고유 속성을 사용하여 문서 콘텐츠의 형식을 지정하는 것을 의미합니다. 일반인의 용어로 의미론은 기계가 이해할 수 있도록 데이터와 정보를 처리하는 것입니다. 특정 사용법: 새로운 의미 체계 태그 사용
1.4 새로운 "멋진" 태그 요소
video, audio, canvas, embed, mark, 진행률, 미터, 시간 , ruby, rt, rp, wbr, command, Details, datalist, datagrid, keygen, output, source, menu
편집기는 여기에 모두 나열하지 않습니다. Baidu를 직접 사용하세요. 일반적으로 많이 사용되지는 않습니다. 단지 이것만 가지고 있다는 것을 기억하십시오. (면접 시 활용 가능)
1.5 새로운 입력 유형
Email, url, number, range, DatePickers
여기에는 부분적인 설명만 제공됩니다. #🎜 🎜#번호
<input type="number" name="">
- #🎜 🎜 ## 🎜 🎜#range
-
<input type = "range" name = "">
나머지 편집자는 테스트하지 않을 것입니다. 관심이 있으면 테스트할 수 있습니다. 그것. !
- 1.6 태그 폐지
- basefont, big, center, 글꼴, s, tt, u 등 CSS로 대체 가능 #🎜🎜 #
더 이상 프레임 사용 안 함
일부 브라우저에서만 지원되는 요소
- # 🎜🎜#
- 기타 폐지된 요소
- 1.7 새로운 전역 속성전역 속성은 모든 태그를 참조합니다. 사용할 수 있는 속성
- contentEditable 속성(콘텐츠 편집 가능 여부 지정)
<input type="text" name="name" contenteditable="true">
#🎜🎜 #
window.onload = function() {
document.designMode = "on";
} hidden attribute
spellcheck 속성(문법 검사와 함께 입력 및 텍스트 영역에서 제공되는 새 속성)
- tabindex 속성(레이블에 초점을 맞추도록 함)
<a href="javascript:void(0);" tabindex="3">你好</a>
<a href="javascript:void(0);" tabindex="2">hello world!</a>
<a href="javascript:void(0);" tabindex="1">html5</a>
二、新增的语义化标签
2.1 新增元素
页眉
主要用于页面的头部的信息介绍，也可用于板块头部
页脚
页面的底部 或者 版块底部
导航 (包含链接的的一个列表)
<nav>
<a href="#">链接1</a>
<a href="#">链接2</a>
</nav>页面上的一个标题组合
<hgroup>
<h1 id="旅游">旅游</h1>
<h2 id="上海">上海</h2>
</hgroup>页面上的板块
用于划分页面上的不同区域,或者划分文章里不同的节
article > 用来在页面中表示一套结构完整且独立的内容部分
可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等
该元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分
8.
用于对元素进行组合。一般用于图片或视频
figure 的子元素,用于对figure的内容进行说明
<figure>
<!-- (注意没有alt) -->
<img src="/static/imghwm/default1.png" data-src="images/225.jpg" class="lazy" style="max-width:90%" height="100px" / alt="HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유" >
<figcaption>薰衣草</figcaption>
</figure>
2.2 讲解标签
强调分段，一般存在一个标题的
<section>
<h1 id="CAR">CAR</h1>
</section>一般用于传统导航，侧边栏导航，页内导航、翻页导航
非主体结构标签
Header 元素是一种具有引导和导航作用的结构元素，通常用来防止整个页面和页面内的一个内容区块的标题，但是也可以包含其他内容，例如数据、搜索表单或相关的logo图片。
Footer元素可以作为其上层父级内容区或者一个根区块的脚注。Footer通常包含其相关区块的脚注信息，如作者、相关的阅读链接及其版权信息等
Hgroup元素是将标题及其子标题进行分组的标签。Hgroup标签通常会将h1-h6标签进行分组。譬如一个内容区的标题及其子元素算一组。
Address元素用来在文档中呈现联系信息，包括文档作者或文档维护者的名字、它们的网站链接、电子邮箱、真实地址、电话号码等。Address应该不只用来呈现电子邮箱或真实地址，还用来展示跟文档相关的联系人的所有联系信息。
三、表单内新增的元素和属性
3.1 form 小编俗解：在 表单外部的标签可以通过form属性进行链接
eg：
<form id="form1">
<label for="man">MAN</label><input type="radio" id="man" name="sex">
<input type="radio" id="woman" name="sex">
</form>
<label for="woman" form="form1">WOMAN</label>
3.2 formtarget 属性
_blank 在新窗口中打开。
_self 默认。在相同的框架中打开。
_parent 在父框架集中打开。
_top 在整个窗口中打开。
3.3 autofocus 获取焦点
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4 required 属性
HTML5中新增的属性可以应用于大多数的输入标签上，在提交时，如果元素中内容为空白，则不允许提交，同时在浏览器中显示信息提示文字。看下面例子：
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5 placeholder 属性，用于显示文本未输入内容之前，
<form>
<input type="text" name="name" placeholder="请输入你的姓名">
</form>
3.6 autoComplete 属性
<form autocomplete="on">
<input type="text" name="name" placeholder="请输入你的姓名" >
</form>
3.7 pattern 属性
该属性用于正则表达式。见下面小例子：
<form>
<input type="text" name="content" autocomplete="off" placeholder="请输入邮箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
<input type="submit">
</form>
3.8 小编有话说
新增的表单属性和元素还有很多，在这里我只列举了一些较常用的属性和元素，至于剩余的部分，小伙伴们用到的时候网上搜索就行。好啦！这部分结束，继续下面的内容。
四、新的Javascript选择器
4.1 querySelector()
<p id="box">Hello World！</p>
<script type="text/javascript">
var box = document.querySelector("#box");
box.style.color = "red";
box.style.fontSize = "24px";
box.style.fontWeight = "blod";
</script>
4.2 querySelectorAll()
<p id="box">Hello World！</p>
<p id="box">Hello！</p>
<p id="box">World！</p>
<script type="text/javascript">
var boxList = document.querySelectorAll("#box");
boxList.forEach(function(item){
item.style.color = "red";
item.style.fontSize = "24px";
item.style.fontWeight = "blod";
});
</script>
五、新增 dom 节点属性
clasList 中的属性和方法
length (长度)
<p id="box" class="test test1 test2 test 3 test4"></p>
<script>
var box = document.querySelector("#box");
window.onload = function (){
console.log(box.classList);
console.log(box.classList.length);
}
</script>
add() 增加
<p id = "box" class = "test test1 test2 test3 test4 "></p>
<script>
var box = document.querySelector("#box");
window.onload = function(){
box.classList.add("test5");
console.log(box.classList);
}
</script>
remove() 移除
<p>Hello World!</p>
<script>
var box = document.querySelector("#box");
window.onload = function (){
box.classList.remove("test");
console.log(box.classList);
}
</script>
toggle() 简单理解：有则删除，没有则添加
有的时候
<p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test");
console.log(box.classList);
}
</script>
没有的时候
<p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test5");
console.log(box.classList);
}
</script>
六、JSON 的新方法
6.1 eval
eval(): 可以解析任何字符串变成JS , 对JSON内容进行解析的话必须在最外面使用(); 例如:
<script>
var str = "({name:'Tom',age:'20',sex:'man'})";
var obj = eval(str);
console.log(obj);
</script>
七、自定义标签属性
语法：1. 在标签中使用data-str1-str2
2. 在JS 中获取到相应的自定义属性的值 。dom.dataset.str1Str2
见下面的小例子就明白了：
<p>Hello world!</p>
<script>
var box = document.querySelector("#box");
box.style.color = box.dataset.myColor;
box.style.fontSize = box.dataset.fontSize;
</script>
分析： 其实很简单，首先在标签中根据自己的需要定义属性，比如小编这里定义了字体的颜色和大小，光定义是不行的，浏览器不认识，所以还需要引用，在js中进行引用，引用方式就是和平常我们用js改变属性值是一样的，谨记要用驼峰命名法。
八、JS加载过程
一般情况
按照惯例，所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是，在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。
对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现在Web应用程序一般都把全部JavaScript引用放在body元素中页面的内容后面。这样一来，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。
总结一句话：在JavaScript代码时要把该部分放在body的后面
看下面的图解：
defer (延迟脚本)
延迟脚本：defer属性只适用于外部脚本文件。
如果给script标签定义了defer属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果script元素中设置了defer属性，相当于告诉浏览器立即下载，但延迟执行。
看下面的图文详解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>延迟加载</title>
<script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>分析：这个例子中，虽然我们把script元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器遇到
위 내용은 HTML5의 새로운 기능과 태그는 무엇입니까? HTML5 JS의 새로운 기능 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AMHTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.
텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AMHTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AMWebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AMHTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.
HTML 및 코드 : 용어를 자세히 살펴 봅니다Apr 10, 2025 am 09:28 AM"Code"는 "Code"BroadlyIncludeLugageslikeJavaScriptandPyThonforFunctureS (htMlisAspecificTypeofCodeFocudecturecturingWebContent)
HTML, CSS 및 JavaScript : 웹 개발자를위한 필수 도구Apr 09, 2025 am 12:12 AMHTML, CSS 및 JavaScript는 웹 개발의 세 가지 기둥입니다. 1. HTML은 웹 페이지 구조를 정의하고 등과 같은 태그를 사용합니다. 2. CSS는 색상, 글꼴 크기 등과 같은 선택기 및 속성을 사용하여 웹 페이지 스타일을 제어합니다.
HTML, CSS 및 JavaScript의 역할 : 핵심 책임Apr 08, 2025 pm 07:05 PMHTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.
HTML은 초보자를 위해 쉽게 배우나요?Apr 07, 2025 am 12:11 AMHTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
