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不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

    相关专题

    更多
    C++ 设计模式与软件架构
    C++ 设计模式与软件架构

    本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

    14

    2026.01.30

    c++ 字符串格式化
    c++ 字符串格式化

    本专题整合了c++字符串格式化用法、输出技巧、实践等等内容,阅读专题下面的文章了解更多详细内容。

    9

    2026.01.30

    java 字符串格式化
    java 字符串格式化

    本专题整合了java如何进行字符串格式化相关教程、使用解析、方法详解等等内容。阅读专题下面的文章了解更多详细教程。

    12

    2026.01.30

    python 字符串格式化
    python 字符串格式化

    本专题整合了python字符串格式化教程、实践、方法、进阶等等相关内容,阅读专题下面的文章了解更多详细操作。

    4

    2026.01.30

    java入门学习合集
    java入门学习合集

    本专题整合了java入门学习指南、初学者项目实战、入门到精通等等内容,阅读专题下面的文章了解更多详细学习方法。

    20

    2026.01.29

    java配置环境变量教程合集
    java配置环境变量教程合集

    本专题整合了java配置环境变量设置、步骤、安装jdk、避免冲突等等相关内容,阅读专题下面的文章了解更多详细操作。

    18

    2026.01.29

    java成品学习网站推荐大全
    java成品学习网站推荐大全

    本专题整合了java成品网站、在线成品网站源码、源码入口等等相关内容,阅读专题下面的文章了解更多详细推荐内容。

    19

    2026.01.29

    Java字符串处理使用教程合集
    Java字符串处理使用教程合集

    本专题整合了Java字符串截取、处理、使用、实战等等教程内容,阅读专题下面的文章了解详细操作教程。

    3

    2026.01.29

    Java空对象相关教程合集
    Java空对象相关教程合集

    本专题整合了Java空对象相关教程,阅读专题下面的文章了解更多详细内容。

    6

    2026.01.29

    热门下载

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

    精品课程

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

    共46课时 | 3.1万人学习

    AngularJS教程
    AngularJS教程

    共24课时 | 3.2万人学习

    CSS教程
    CSS教程

    共754课时 | 25.5万人学习

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

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