HTML 프런트 엔드 개발에 대해 알아야 할 몇 가지 지식 포인트-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 프런트 엔드 개발에 대해 알아야 할 몇 가지 지식 포인트

怪我咯

Apr 06, 2017 am 10:43 AM

一、标签语义化

html标签语义化是让大家直观的认识标签和属性的用途和作用，好处最主要的是对搜索引擎友好。
Eg:
1、如果你想在页面中突出”奥巴马”这三个字，让搜索引擎重视它，如果你这么写：

<p> 奥巴马</p>

로그인 후 복사

对于搜索引擎来说，它也只是一个普通得不能再普通的三个字而已，尽管它是指代美国总统。
那么应该怎样才能让搜索引擎知道它的重要性呢？来看看语义化的写法吧：

<h1>奥巴马</h1>

로그인 후 복사

奥巴马看了后，乐了，哥本来就应该备受关注的！
2、如果文字要加粗显示，是用作强调的，strong是用作重点强调的。
3、对于标签只是表示一个普通的删除线，而标签更具语义化，它表示删除一个内容，并且del还带有cite和datetime来表明删除的原因以及删除的时间。
……
So，标签语义化其实就是把你想要表达的东西更容易被搜索引擎理解和重视，让你想表达的东西，to be girlfriend,not to be friend。
二、HTML标签补充
1、缩写说明

<abbr title="Hyper text Markup Language">HTML</abbr>

~~로그인 후 복사~~

~~2、定义列表（一般用于内容解释）~~

<dl>
   <dt>子曰：“巧言令色，鲜矣仁！”</dt>
   <dd>孔子说：“花言巧语，装出和颜悦色的样子，这种人的仁心就很少了。”</dd>
   <dt>季</dt>
   <dd>1、兄弟排行次序最小的：季弟（小弟）.季父（小叔叔）</dd>
   <dd>2、三个月为一季,一年分春夏秋冬四季</dd>
</dl>

~~로그인 후 복사~~

3、预格式文本标签
被包围在 pre 元素中的文本通常会保留空格和换行符

<pre class="brush:php;toolbar:false">
1、这是一沟绝望的死水
2、清风吹不起半点漪沦
3、不如多扔些破铜烂铁
4、爽性泼它的剩菜残羹

~~로그인 후 복사~~

~~4、版权符~~

&copy;

~~로그인 후 복사~~

~~5、对html进行转义~~

&lt;body&gt;

~~로그인 후 복사~~

三、H5新增标签
1、多媒体标签：video、audio、canvas
1.1 音频标签video
不同浏览器对于html5 audio标签和音频格式的兼容性（一般提供ogg和mp3格式，就可以支持所有主流浏览器了。）

<audio src="1.mp3" controls="controls">

~~로그인 후 복사~~

<audio controls="controls" autoplay loop>
   <source src="1.mp3"  type="audio/mpeg"/>
   <source src="1.ogg"  type="audio/ogg"/>
</audio>

~~로그인 후 복사~~

编解码工具：FFmpeg（下载地址：www.ffmpeg.org）

mp4转ogg方法同上。
1.2 视频标签video

<video src="1.mp3" controls="controls" autoplay>
<video controls="controls">
   <source src="1.mp4"  type="video/mpeg"/>
   <source src="1.mp4"  type="video/ogg"/>
</video>

~~로그인 후 복사~~

~~音视频播放、暂停、停止方法：~~

var audio = document.getElementById(&#39;music1&#39;);
audio.play();//播放
audio.pause();//暂停

audio.pause();
audio.currentTime=0;//停止

~~로그인 후 복사~~

1.3 画布标签:Canvas （需要配合js来做效果，后续再总结）
2、主体结构标签

2.1 nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。

<nav>
    <ul>
        <li>HTML 5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</nav>

~~로그인 후 복사~~

2.2 article元素展示网页中独立的一块内容，譬如论坛的帖子、博客的文章、一篇用户评论。

<article>
    <h1>一篇文章</h1>
    <p>文章内容..</p>
    <footer>
        <p><small>版权：html5jscss网所属，作者：小北</small></p>
    </footer>
</article>

~~로그인 후 복사~~

<article>
    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章内容..</p>

    <article>
        <h2>评论</h2>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3>评论者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈？哈？哈？</p>
        </article>

    </article>
</article>

~~로그인 후 복사~~

2.3 section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。

<article>
    <h1>前端技术</h1>
    <p>前端技术有那些</p>
    <section>
        <h2>CSS</h2>
        <p>样式..</p>
    </section>
    <section>
        <h2>JS</h2>
        <p>脚本</p>
    </section>
</article>

~~로그인 후 복사~~

2.4 aside 元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

<article>
    <p>内容</p>
    <aside>
        <h1>作者简介</h1>
        <p>小北，前端一枚</p>
    </aside>
</article>

~~로그인 후 복사~~

2.5 header元素展示一个区域的头部分
2.6 footer元素展示一个区域的尾部分
2.7 hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1>
    <h2>HTML 5</h2>
</hgroup>

~~로그인 후 복사~~

2.8 figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。figcaption 标签定义 figure 元素的标题（caption）。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

~~로그인 후 복사~~

3、非主体结构标签
3.1 标签定义选项列表。

<input type="text" list="taglist" />
<datalist id="taglist">
<option>苹果</option>
<option>橘子</option>
<option>西红柿</option>
</datalist>

~~로그인 후 복사~~

3.2 details标签定义文档细节

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

~~로그인 후 복사~~

3.3 menu标签定义列表

<menu>
  <li>home</li>
  <li>home</li>
  <li>home</li>
</menu>

~~로그인 후 복사~~

3.4 address地址标签

<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

~~로그인 후 복사~~

3.5 progress进度条标签

下载进度：
<progress>
</progress>

~~로그인 후 복사~~

3.6 mark高亮显示

<mark>中国</mark>人民最伟大

~~로그인 후 복사~~

3.7 标签定义日期或时间，或者两者

<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>

~~로그인 후 복사~~

3.8 新增的表单元素

<input type="email" />
<input type="url" />
<input type="tel" />
<input type="number" min="1" max="20" step="4" />
<input type="range"  min="1" max="20" step="4" />
<input type="search" />
<input type="color" />
<input type="date" />
<input type="month" />
<input type="week" />
<input type="time" />

~~로그인 후 복사~~

3.9 新增的input属性
3.9.1 用户输入自动完成功能

<form autocompelete="on">
<input type="text" list="citylist" />
<datalist id="citylist">
  <option>BeiJing</option>
  <option>QingDao</option>
   <option>QingZhou</option>
    <option>QingHai</option>
</datalist>
</form>

~~로그인 후 복사~~

3.9.2 页面加载的时候获取焦点

<input type="text" autofocus="autofocus" />

~~로그인 후 복사~~

3.9.3 form外也可以做数据提交

<form action="" method="get" id="form1">
</form>
<input type="text" name="address1" form="form1" />

~~로그인 후 복사~~

3.9.4 form内的内容也可以改action地址

<form action="1.aspx">
  <input type="submit" value="提交"  formaction="2.aspx" />
</form>

~~로그인 후 복사~~

3.9.5 file可以支持多文件上传了

<input type="file" name="img" multiple="multiple" />

~~로그인 후 복사~~

3.9.6 支持自定义验证功能了

<form action="1.aspx">
 请输入邮政编码：<input type="text" pattern="[0-9]{6}" title="请输入6位数的邮编" />
 <input type="submit" />
</form>

~~로그인 후 복사~~

3.9.4 新增默认内容提示了

<input type="text" placeholder="请输入用户名"/>

~~로그인 후 복사~~

3.9.5 新增不能为空属性

<form action="1.aspx">
 请输入邮政编码：<input type="text" required="required" />
 <input type="submit" />
</form>

~~로그인 후 복사~~

3.10 新增全局属性
3.10.1 contenteditable 属性规定是否可编辑元素的内容。

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

~~로그인 후 복사~~

3.10.2 hidden 属性规定对元素进行隐藏。

<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>

~~로그인 후 복사~~

3.10.3 tabindex 属性规定当使用 “tab” 键进行导航时元素的顺序。

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br />
<a href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>

~~로그인 후 복사~~

3.11 其他属性
3.11.1 ol的reversed属性对列表顺序进行降序

<ol reversed start="5" >
    <li>SHUFFLE!/三界恋曲</li>
    <li>扑杀天使</li>
    <li>零之使魔</li>
    <li>不要撒娇哦/极乐天师/纯情和尚俏尼姑</li>
    <li>to love/出包王女</li>
</ol>

~~로그인 후 복사~~

3.11.2 js的async 属性规定一旦脚本可用，则会异步执行。

<p id="p1">Hello World!</p>
<script type="text/javascript" src="/example/html5/demo_async.js" async="async"></script>

~~로그인 후 복사~~

~~3.11.3 js的defer 属性规定当页面已完成加载后，才会执行脚本。~~

<script type="text/javascript" src="/example/html5/demo_defer.js" defer="defer"></script>
<p>上面的脚本从下面的段落请求信息。通常，这是不可能的，因为脚本在段落加载之前已经执行了。</p>
<p id="p1">Hello World!</p>
<p>不过，defer 属性规定脚本稍后执行。这样脚本就可以从段落中请求信息了。</p>

~~로그인 후 복사~~

위 내용은 HTML 프런트 엔드 개발에 대해 알아야 할 몇 가지 지식 포인트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

더보기

인기 기사

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
4 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
3 몇 주 전 By DDD

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다
4 몇 주 전 By DDD

<s> : 데드 레일 - 모든 도전을 완료하는 방법
1 몇 달 전 By DDD

Atomfall Guide : 항목 위치, 퀘스트 가이드 및 팁
1 몇 달 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7698

15

자바 튜토리얼

1640

14

Cakephp 튜토리얼

1393

52

라라벨 튜토리얼

1287

25

PHP 튜토리얼

1229

29

더보기

Related knowledge

HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

See all articles