0

0

HTML前端开发必须知道的一些知识点

怪我咯

怪我咯

发布时间:2017-04-06 10:43:49

|

1853人浏览过

|

来源于php中文网

原创

一、标签语义化

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

奥巴马

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

奥巴马

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

HTML

2、定义列表(一般用于内容解释)

立即学习前端免费学习笔记(深入)”;

子曰:“巧言令色,鲜矣仁!”
孔子说:“花言巧语,装出和颜悦色的样子,这种人的仁心就很少了。”
1、兄弟排行次序最小的:季弟(小弟).季父(小叔叔)
2、三个月为一季,一年分春夏秋冬四季

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

1、这是一沟绝望的死水
2、清风吹不起半点漪沦
3、不如多扔些破铜烂铁
4、爽性泼它的剩菜残羹

4、版权符

©

5、对html进行转义

zuojiankuohaophpcnbodyyoujiankuohaophpcn

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

编解码工具:FFmpeg(下载地址:www.ffmpeg.org)

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

音视频播放、暂停、停止方法:

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

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

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

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

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

一篇文章

文章内容..

版权:html5jscss网所属,作者:小北

一篇文章

文章内容..

评论

评论者: XXX

哈哈哈

评论者: XXX

哈?哈?哈?

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

前端技术

前端技术有那些

CSS

样式..

JS

脚本

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

内容

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

JTBC网站内容管理系统5.0.3.1
JTBC网站内容管理系统5.0.3.1

JTBC CMS(5.0) 是一款基于PHP和MySQL的内容管理系统原生全栈开发框架,开源协议为AGPLv3,没有任何附加条款。系统可以通过命令行一键安装,源码方面不基于任何第三方框架,不使用任何脚手架,仅依赖一些常见的第三方类库如图表组件等,您只需要了解最基本的前端知识就能很敏捷的进行二次开发,同时我们对于常见的前端功能做了Web Component方式的封装,即便是您仅了解HTML/CSS也

下载

这是一篇介绍HTML 5语义化标签和更简洁的结构

HTML 5

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

黄浦江上的的卢浦大桥
@@##@@

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






3.2 details标签定义文档细节

Copyright 2011.

All pages and graphics on this web site are the property of W3School.

3.3 menu标签定义列表


  
  • home
  • home
  • home
  • 3.4 address地址标签

    Written by Donald Duck.
    Visit us at:
    Example.com
    Box 564, Disneyland
    USA

    3.5 progress进度条标签

    下载进度:
    
    

    3.6 mark高亮显示

    中国人民最伟大

    3.7 

    我们在每天早上 开始营业。

    3.8 新增的表单元素

    
    
    
    
    
    
    
    
    
    
    

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

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

    3.9.3 form外也可以做数据提交

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

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

    3.9.6 支持自定义验证功能了

    请输入邮政编码:

    3.9.4 新增默认内容提示了

    3.9.5 新增不能为空属性

    请输入邮政编码:

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

    这是一段可编辑的段落。请试着编辑该文本。

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

    
    

    这是一段可见的段落。

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

    W3School
    Google
    Microsoft

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

    1. SHUFFLE!/三界恋曲
    2. 扑杀天使
    3. 零之使魔
    4. 不要撒娇哦/极乐天师/纯情和尚俏尼姑
    5. to love/出包王女

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

    Hello World!

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

    
    

    上面的脚本从下面的段落请求信息。通常,这是不可能的,因为脚本在段落加载之前已经执行了。

    Hello World!

    不过,defer 属性规定脚本稍后执行。这样脚本就可以从段落中请求信息了。

    HTML前端开发必须知道的一些知识点

    相关文章

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载

    相关标签:

    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门AI工具

    更多
    DeepSeek
    DeepSeek

    幻方量化公司旗下的开源大模型平台

    豆包大模型
    豆包大模型

    字节跳动自主研发的一系列大型语言模型

    通义千问
    通义千问

    阿里巴巴推出的全能AI助手

    腾讯元宝
    腾讯元宝

    腾讯混元平台推出的AI助手

    文心一言
    文心一言

    文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

    讯飞写作
    讯飞写作

    基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

    即梦AI
    即梦AI

    一站式AI创作平台,免费AI图片和视频生成。

    ChatGPT
    ChatGPT

    最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    全国统一发票查询平台入口合集
    全国统一发票查询平台入口合集

    本专题整合了全国统一发票查询入口地址合集,阅读专题下面的文章了解更多详细入口。

    19

    2026.02.03

    短剧入口地址汇总
    短剧入口地址汇总

    本专题整合了短剧app推荐平台,阅读专题下面的文章了解更多详细入口。

    27

    2026.02.03

    植物大战僵尸版本入口地址汇总
    植物大战僵尸版本入口地址汇总

    本专题整合了植物大战僵尸版本入口地址汇总,前往文章中寻找想要的答案。

    15

    2026.02.03

    c语言中/相关合集
    c语言中/相关合集

    本专题整合了c语言中/的用法、含义解释。阅读专题下面的文章了解更多详细内容。

    3

    2026.02.03

    漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题
    漫蛙漫画网页版入口与正版在线阅读 漫蛙MANWA官网访问专题

    本专题围绕漫蛙漫画(Manwa / Manwa2)官网网页版入口进行整理,涵盖漫蛙漫画官方主页访问方式、网页版在线阅读入口、台版正版漫画浏览说明及基础使用指引,帮助用户快速进入漫蛙漫画官网,稳定在线阅读正版漫画内容,避免误入非官方页面。

    13

    2026.02.03

    Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口
    Yandex官网入口与俄罗斯搜索引擎访问指南 Yandex中文登录与网页版入口

    本专题汇总了俄罗斯知名搜索引擎 Yandex 的官网入口、免登录访问地址、中文登录方法与网页版使用指南,帮助用户稳定访问 Yandex 官网,并提供一站式入口汇总。无论是登录入口还是在线搜索,用户都能快速获取最新稳定的访问链接与使用指南。

    114

    2026.02.03

    Java 设计模式与重构实践
    Java 设计模式与重构实践

    本专题专注讲解 Java 中常用的设计模式,包括单例模式、工厂模式、观察者模式、策略模式等,并结合代码重构实践,帮助学习者掌握 如何运用设计模式优化代码结构,提高代码的可读性、可维护性和扩展性。通过具体示例,展示设计模式如何解决实际开发中的复杂问题。

    3

    2026.02.03

    C# 并发与异步编程
    C# 并发与异步编程

    本专题系统讲解 C# 异步编程与并发控制,重点介绍 async 和 await 关键字、Task 类、线程池管理、并发数据结构、死锁与线程安全问题。通过多个实战项目,帮助学习者掌握 如何在 C# 中编写高效的异步代码,提升应用的并发性能与响应速度。

    2

    2026.02.03

    Python 强化学习与深度Q网络(DQN)
    Python 强化学习与深度Q网络(DQN)

    本专题深入讲解 Python 在强化学习(Reinforcement Learning)中的应用,重点介绍 深度Q网络(DQN) 及其实现方法,涵盖 Q-learning 算法、深度学习与神经网络的结合、环境模拟与奖励机制设计、探索与利用的平衡等。通过构建一个简单的游戏AI,帮助学习者掌握 如何使用 Python 训练智能体在动态环境中作出决策。

    3

    2026.02.03

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 3.2万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 3.3万人学习

    CSS教程
    CSS教程

    共754课时 | 27.1万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号