首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

重学基础和原理 1 - 如何理解 HTML 语义化

其实这个问题在我们开发的时候根本不会遇到,只会出现在面试。 那如果是你,你怎么回答呢?...语义化可以这样理解,对比下我们生活中人和人沟通交流,要想更高效的将信息传达出去或者解决问题,就需要想办法表达清楚,要语义明确,有逻辑性。...比如 b和strong, b 就是表示这段内容加粗,无语义化,一个样式上的处理,,而 strong 虽然也是表示加粗,但它用于强调被包裹的内容整个html页面的重要性,更具语义化和人性化。...无论从何种角度来说,违背语义化的标签,都应该让它消失历史的长河之中。...读者必看:既然读到了这里,就别这么快离开,奔着学习和交流的目的,可以思考下我说的对不对,有没有问题,和你的理解有什么不同。所以请思考片刻,留下你的足迹,交流是进步最快的途径。

44410

Web标准的常见问题

Web标准的常见问题 引言 大概2004年的时候,Web标准的概念藉由一本名为《网站重构》的书开始被国内人了解。...发现许多制作人员对Web标准的理解不够深入,有的地方甚至存在误区,在这篇文档,我将就我了解的问题做一点分析,以供参考。...大家一定发现这样一个事实,标签标签对于文字的效果都是加粗标签标签对于文字的效果都是斜体,它们之间有什么区别呢?...避免过多的HTML标签内部使用 onclick、onmouseover、onmouseout 等行为,而应该在页面首部写成函数,window.onload事件中加载它,这样你的代码会清晰很多,同时也做到了行为与结构的分离...IE7还没有大范围普及之前,:first-child及a标记以外的:hover 还是没有实际的使用价值,与其给额外的标签加class属性,我宁可在css里使用现在不被IE6支持的伪类, 再使用js来达到相同的效果

1.2K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    第四讲 CSS选择器

    课程概要 这一讲,我们会学习CSS几种常用的选择器。首先,什么是css选择器?...像我们之前的写法,都是直接给标签名设置css,这样会有一个很严重的问题,比如一旦我们给div设置高度为100px,那么所有的div高度都是100px,这种效果肯定不是我们想要的。...为了给不同的标签设置不同的样式,就需要选择器。 站长建议:视频只是作为知识点补充,不要一开始就直接看视频,最好是阅读之后,带着疑问去看视频。 步骤1:ID选择器 先复制下面的代码,作为素材。 <!...emmm, 怎么说呢,就是一种分类的概念,好像是一种神奇的徽章,贴上这种徽章的标签就变成了同一个模样。 步骤3:后代选择器 我现在要让烤山药,酥梨和窝窝头字体全部加粗,又该怎么做咧?...办法当然有很多啦,比如你可以用ID选择器,一个个设置CSS,也可以用类选择器给这三个标签都加上同一个class。这里单纯为了介绍后代选择器,看代码: ? image.png ?

    42220

    html其他语义化

    image.png 对于如图所示效果,不少新手很可能会写出如下代码来实现。...实际开发,大多数情况下都是使用无序列表,极少情况下会使用有序列表。 3、strong标签和em标签 strong用于实现加粗文本,em用于实现斜体文本。...基于 结构和样式分离的原则,标签仅仅是为了实现简单的加粗或者 斜体效果,我们一般不会用这两个。实际上,W3C对这两个标 签赋予“强调”的语义,strong或者em标签内部的文本被 强调为重要文本。...image.png 4、del标签和ins标签 HTM L,del和ins这两个标签是配合使用的。del表示“delete”,用于定义被删 除的文本。... Web Developer ZL具栏找到“CSS” —► "Disable Styles" —'"Disable All Styles" 并且选中,就可以查看页面去掉样式后的效果,如图2-21示。

    83840

    10 款 提升工作效率的VSCode 扩展

    顾名思义,Auto Rename Tag可以一个标签更改时自动更新另一个标签: 这款扩展不仅可以HTML中使用,也可用于React,因为React使用了JSX: 上述示例中标签内只有一个文本,但是真正的应用程序...,方便浏览代码和阅读: 代码片段 代码片段是节约时间提高生产力的最好办法。...React/Redux/GraphQL/React-Native snippets Vue 3 Snippets 例如,React创建新组建时,输入函数式组件的语法非常繁琐。...Import Cost Importcost可以代码显示导入的估计大小。编写项目时,很重要的一点就是不要导入过大的软件包,以免损害用户体验。...你可以自行配置小、、大分别对应的大小。 Profile Switcher ProfileSwitcher可以多个用户配置中切换。

    1.7K30

    HTML基础02-HTML标签(上)

    DOCTYPE html> 这句代码的意思是:当前页面采用HTML5版本来显式网页 注意: 必须声明文档最前面的位置,处于标签之前。 它是文档类型声明标签,不是一个HTML标签。...特点: 加了标题标签的文字会加粗,字号也会增大 每个标题独占一行 4.2段落和换行标签(重要) 段落标签 在网页,要把文字有条理地显示出来,就需要将这些文字分段显示。...HTML标签标签用于定义段落,它可以将整个网页分为若干个段落。...换行标签 HTML,一个段落的文字会从左到右依次排列,直到浏览器窗口的右端才自动换行。...-- 快捷键:ctrl+/ --> 5.2特殊字符 HTML页面,一些特殊符号很难或不方便直接使用,此时我们可以使用下面的字符代码来代替。

    85120

    用HTML写一篇简单的日记

    ,那就是这个标签有没有用,现在的我只能告诉你,看实际情况而定。...> 2020年7月5日 image.png 我们可以看到时间的下面有一根水平的分割线,这就是hr标签展示的效果,你写成也可以,和<hr...b标签是一样的吗,同样是加粗呀,我们先来比较一下,请看代码: image.png strong标签的效果和b标签的效果都是让文字变粗,那么肯定是我上面说的em标签和i标签一样,肯定是不一样的,...但是b标签本身不具备HTML语义,如果精通HTML的人很快就会知道这个标签在HTML代码里面只有加粗的意思。Strong标签在HTML语义为强调,表示语气上的强调、加重。...本来想简单的介绍一下strong标签和b标签的区别的,结果说了一大堆拓展的内容,反正目前的你只需要知道,strong标签和b标签都是使文字加粗,不同的是strong标签加粗用来强调,而b标签的只是为了加粗加粗

    1.4K80

    筛选加粗字体格式的单元格的3种方法

    标签:Excel技巧 工作表中有很多数据,一些数据所在单元格设置为加粗字体格式,现在想要筛选出所有这些加粗字体格式的单元格。 示例数据如下图1示。...3.“查找和替换”对话框,单击“选项”按钮展开对话框。单击“查找内容”后的“格式”按钮,选择“字体”选项卡加粗;单击“替换为”后的“格式”按钮,设置背景色,如下图2示。...此时,所选数据区域中加粗字体单元格添加了背景色。 5.选择所有数据区域,功能区“数据”选项卡,单击“排序和筛选”组的“筛选”命令,单击筛选下拉箭头,单击“按颜色筛选”,如下图3示。...单元格C4,输入公式: =FilterBoldCell 将该公式复制到所有数据区域,将得到一组内容为TRUE/FALSE的数据,TRUE表明对应的单元格为加粗字体,FALSE表明不是,如下图4示。...图4 选择数据集,单击功能区“数据”选项卡“排序和筛选”组的“筛选”命令,然后TRUE/FALSE列只选择“TRUE”,如下图5示。 图5 此时,会自动筛选出所有加粗字体的单元格。

    3.3K30

    撸了这么多代码,你真的了解字体吗?

    这五类字体族不代表某一个具体的字体,而是当你 CSS 中指定字体族的时候,系统就有可能在字体族找出一种字体来显示。 ?...比如: .div{ font-family: "PingFang SC", "Microsoft Yahei", sans-serif; } 上面这行CSS代码的意思是:让文字 iOS &...如下: 关键问题是,很多人会发现, Android 平台的浏览器, font-weight 无论是设置300、400,还是500,文字的粗细都没有任何变化,只有到700的时候才会加粗一下,感觉浏览器好像不支持这些数值...就拿“微软雅黑”这个字体来举例,它只支持两种粗细,所以当你代码里写成500的时候,也会被认为是400。但是 Mac 上的“苹方”字体,就支持至少六种粗细。...2005年6月,苹果公司创始人乔布斯斯坦福大学的毕业典礼上做过一次演讲,他说了这样一段话: 里德学院在那时提供了全美最好的美术字课程。在这个大学里面的每个海报,每个抽屉的标签上面全都是漂亮的美术字。

    2.1K10

    织梦调用出来的文章标题如果超过限制字数时标题后面加省略号

    织梦建站仿站过程也许很多人会遇到这样的情况,列表标题文字太长了,想截取文字长度,同时标题后面加省略号......还有另外一种情况,假如标题在 dede 中加了加粗属性,大家查看网页源代码 文章标题测试演示说明 就会发现是多出一个 标签,上面的截取方法截取的时候就会把加粗生成的...strong 标签算进字符数内,输出的标题格式可能就会是 文章标题测试演示说明</……的形式,今天的重点是以下是解决办法: {dede:arclist titlelen='...='50' 当然了里面的数值可以自己修改,但是一定要注意,设定的字符长度一定要大于截取的字符长度,不然不显示省略号,同时简要的说明一下里面调用到的函数: Html2text() 函数是去掉 html 标签代码...strlen(Html2text("@me")) 函数是计算去掉 html 标签后字符的大小。

    1K30

    Markdown 语法

    : 这里是斜体 这里是斜体 这里是加粗 这里是加粗 这里是加粗并斜体 这里是加粗并斜体 6.2 加下划线 下划线 效果如下: 下划线 也可以使用 标签完成加下划线的操作...10 修改图片 10.1 设置图片尺寸 markdown 直接使用提供的语法引入图片是无法设置大小的,所以我们需要用到 html 的 img 标签。...[logo](https://docsify.js.org/_media/icon.svg ':size=10%') 11 插入代码块 MarkdownIT圈子里面比较流行的一个重要原因是,它能够轻松漂亮地插入代码...英文模式下,找到键盘最左侧esc键下面的第一个键点击即可。 有人会问:如何在代码打出 ``` 实际上是使用 4个` 包含 3个` 就可以了,想表示更多,最外层+1就好了。...Markdown,主要有以下几种特殊符号需要处理: \ 反斜线 ` 反引号 * 星号 _ 底线 {} 花括号 [] 方括号 () 括弧 # 井字号 + 加号 - 减号

    3.3K30

    SVG 动画精髓(下)

    SVG ,最长用到的线条标签就是 Path。这里我前面一篇文章已经做了介绍,我这里就不赘述了。 而在具体变化当中用到的是关于stroke的相关属性:(下面的属性都可以直接用在 CSS 当中!)...SVG 文字 SVG 定义文字直接使用text 标签即可。关于文字来说,一般而言需要注意的点就那么即可,文字的排列,间距等等。这些都可以直接使用 CSS 进行控制。... Path 展示 text Text 一般可以横放,竖放。那有没有办法让文字可以按照一定的路径任意排放呢? 有的,这里可以使用textPath标签,来定义具体参考路径。...defs 用来保存一些代码,使其不会被浏览器解析。并且里面的分组可以被 use 属性的 style 样式覆盖。...不过,它有个特点,即,不会被浏览器渲染。那它不和 defs 差不多吗? 恩,确实。不过,defs 是官方推荐,用来包裹一些模板 svg 代码而创造出来,用来增加可读性的标签

    1.8K00

    【Web技术】421- 富文本原理介绍

    缘起 最近产品想让我富文本里加个旋转图片的功能,我一想?,就觉得事情并不简单,因为印象好像没见过这种操作。果然,经过一番百度之后,确实没怎么看到相关信息,这也就意味着要自己动手丰衣足食了?。...有的同学可能用的不是 button 标签,然后执行命令就会无效,是因为点击其他标签大多都会造成先失去焦点(或者不知不觉就突然失去焦点了),再执行点击事件,此时没有选区或光标所以会没有效果,这点要留意一下...至此,一个简易版的富文本就完成了(当然了 bug 也是有的?,不过并不妨碍我们理解),具体代码可以参考 npm 上的 pell 包,它已经是个极简版的了。...由于 chrome ,失去焦点并不会清除 Seleciton 对象和 Range 对象,所以就像我一开始说的我没怎么去了解?。。。...最后的最后,不知道大家有没有更好的方法来对图片或内容进行处理,欢迎留言探讨,See you?。

    1K20

    微软正式发布 Visual Studio 2022

    Visual Studio 现在支持 CMakePresets.json 的 buildPresets.targets 选项。这允许你 CMake 项目中构建目标的子集。...…… 个性化 为垂直和水平标签添加颜色标签 增加了主题包,并与 VS Code 主题作者合作,推出了自定义主题集合 建立了主题转换器,将 VS Code 主题转换到 Visual Studio 2022...中使用 增加了将 Visual Studio 主题与 Windows 主题同步的功能 增加了新的文档管理功能,包括自定义标签宽度,加粗活动文档,以及 docwell 额外的关闭按钮。...VS SDK Reference 程序集不再安装到该VSSDK\\VisualStudioIntegration\\Common\\Assemblies 文件夹。...添加了 ILanguageClient 重大更改修复 Git 工具 创建 git 仓库的过程,现在完全支持发布到 Azure DevOps 状态栏的增强,包括从空 VS 查看和打开仓库的新功能,并显示未拉取提交的数量

    2.6K30

    轻松搞定MarkDown

    纯文本内容,兼容所有的文本编辑器与文字处理软件。 可读,直观。是个适合所有人的写作语言。 用什么工具进行编辑? Mac OS X 上,建议你用Mou 。...注意:因为HTML中最多支持6级标题,所以markdown超出6个的#将不会起作用。 如何换行? 在行尾插入至少两个空格即可。 例如: ? 如何加粗和斜体?...例如: 第一 第二 第三 MarkDown的高级应用(常见问题的解决办法) 如何插入代码?...插入代码的方式有两种: 方式一:每行代码前加入4个空格或者添加一个制表符(TAB键) 方式二:代码两侧添加三个反引号(```)。...这里可以指定代码所属的语言,只要在第一组反引号后面添加相应的语言名称即可。这样就会以javascript的语法格式来显示包含的代码。 如何设置首行缩进?

    1.8K50

    微软正式发布 Visual Studio 2022!香得一腿~

    Visual Studio 现在支持 CMakePresets.json 的 buildPresets.targets 选项。这允许你 CMake 项目中构建目标的子集。...个性化 为垂直和水平标签添加颜色标签 增加了主题包,并与 VS Code 主题作者合作,推出了自定义主题集合 建立了主题转换器,将 VS Code 主题转换到 Visual Studio 2022 中使用...增加了将 Visual Studio 主题与 Windows 主题同步的功能 增加了新的文档管理功能,包括自定义标签宽度,加粗活动文档,以及 docwell 额外的关闭按钮。...VS SDK Reference 程序集不再安装到该VSSDK\\VisualStudioIntegration\\Common\\Assemblies 文件夹。...添加了 ILanguageClient 重大更改修复 Git 工具 创建 git 仓库的过程,现在完全支持发布到 Azure DevOps 状态栏的增强,包括从空 VS 查看和打开仓库的新功能,并显示未拉取提交的数量

    2.7K20

    HTML、CSS 和 JavaScript 基本前端语言学习指南

    HTML vs  CSS vs  JavaScript有什么区别? 虽然这三种前端语言都用于设计网站,但它们都有自己的特定用途和复杂性。...你有没有注意到打印出来的电子邮件底部的文字是“ ”之类的?那是HTML。标记语言还可以帮助 Web 开发人员避免单独格式化项目类别的每个实例(例如,将网站上的标题加粗),从而节省时间并避免错误。...HTML 使用“元素”或标签来表示诸如段落开头、字体加粗或添加照片标题之类的内容。通过这种方式,它控制网页的外观、文本的分隔和格式以及用户看到的内容。...例如,HTML,您可以创建与您在互联网上经常看到的按钮类似的按钮。...以下面的代码片段为例: hello_world-e1634831535455.png 正如您看到的,它与 HTML 类似,具有额外的“style=”语法来指示标题和段落文本的颜色。

    6.1K30

    Android开发笔记(一百四十)Word文件的读取与显示

    电脑上的office文件,常见的有三种格式,分别是word、excel和ppt,其中excel文件的读写已经博文《Android开发笔记(三十四)Excel文件的读写》做了介绍,比excel更加常用的是...如果仅仅把word文件里面的文字内容读取出来,有个简单的解决办法,只要在android工程中导入tm-extractors-0.4.jar,即可快速获得word文件的文本。...所以要想把word里的图文内容原样读出,就得另想办法了,如果是java服务端,可以考虑apache的poi库,该库支持读取包括word、excel、ppt在内的office文件;然而在android手机端...,仅仅把word文件的图文内容读取出来还是不够的,还要想办法把这些图文内容在手机上显示才行。...output.write(underlineEnd.getBytes()); isUnderline = false; } if (isBold == true) { // 输入加粗结束标签

    2K10
    领券