前端开发注意事项(HTML与CSS进阶)

HTML 与 CSS 进阶

  • Img 标签

    alt 属性 一定要添加 用于图片描述 给机器看的,如果图片加载失败,会显示 alt

<img src="" alt=""/>    
  • 为 img 添加 图片注释 建议做法为 figure(图形) 和 figcaption [caption(字幕)]
<figure><img src="" alt=""/>    <figcaption>图片说明</figcaption>
</figure>
  • 表格语义化 数据形式的最佳选择还是表格

(h5新增 th, caption, thead, tbody 和 tfoot 根据需求选择使用者三个标签)

    <table><caption>表格示例</caption><!-- 表头 --><thead><tr><th>表头单元格1</th><th>表头单元格2</th></tr></thead><!-- 表身 --><tbody><tr><td>标准单元格1</td><td>标准单元格2</td></tr><tr><td>标准单元格1</td><td>标准单元格2</td></tr></tbody><!-- 表脚 --><tfoot><tr><td>标准单元格1</td><td>标准单元格2</td></tr></tfoot></table>
  • 换行符<br/>
<div><span>标题</span> <br/><span>第一部分内容</span><br/><span>第二部分内容</span><br/><span>第三部分内容</span>
</div>
<!-- 上边是错误用法 吃惊吗 -->
<!-- br 有自己的特定语义  只适合用户 P 标签内部的换行--> 
<p>广东省<br/>广州市<br/>黄埔大道61号
</p>
  • 无序列表 <ul>

    主要用于列表型数据

<ul><li><span>1</span>HTML 教程</li><li><span>2</span>PHP 教程</li><li><span>3</span>java 教程</li>
</ul>
有人说,每一个列表前都有数字,为什么不用有序列表实现。
答: 因为有序列表前的数字外观是固定的,不能修改。所以在开发中,大多数情况下都是使用无序列表
  • Strong 标签和 em标签

    可以用于 SEO 突出

W3C 对这两个标签赋予了"强调"的语义。 为了SEO突出,可以使用 strong 和 em如果被 CSS 重新定义新的样式,也不影响这两个标签的语义

如何判断一个页面是否语义良好

去掉所有CSS效果,查看便知

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/451544.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IT巨头互掐云存储:Dropbox能否一马当先

随着北京时间4月25日Google Drive横空出世&#xff0c;微软也迫不及待的发布了SkyDrive的大量更新。各大巨头进军云存储市场&#xff0c;激烈角逐的意向已经昭然可见。网友针对此事纷纷发表热议。苹果、微软、谷歌三巨头加上一个Dropbox各出各的云存储高招&#xff1a;微软SkyD…

Spring集成redis(Spring Data Redis)

2019独角兽企业重金招聘Python工程师标准>>> 转载地址&#xff1a;http://blog.csdn.net/zhu_tianwei/article/details/44923001 Spring-data-redis是spring大家族的一部分&#xff0c;提供了在srping应用中通过简单的配置访问redis服务&#xff0c;对reids底层开发…

PHP环境搭建和Apache HTTP服务器配置

所需软件: 需要准备Apache HTTP 服务器: http://httpd.apache.org/download.cgi PHP环境下载:http://www.php.net/downloads.php Apache HTTP服务器安装: 由于最新的 Apache 已经不提供 Windows 的安装版本了&#xff0c;所以我们这里使用的是解压版。 下载地址&#xff1a;htt…

ElasticSearch安装过程中遇到的一些问题

问题1&#xff1a; 安装Elasticsearch5.X版本&#xff0c;不修改默认配置的情况下&#xff0c;一切还好&#xff0c;能够正常启动。但我必须开通外网访问。然后报错了&#xff0c;报错信息如下&#xff1a; ERROR: max file descriptors [1024] for elasticsearch process like…

进程的五种状态和线程的六种状态

参考文章&#xff1a; 进程的状态转换和线程的状态转换

Nexus 安装(Linux 环境)

一、环境准备 安装 JDK 1.7 二、下载 Nexus 压缩文件 下载地址&#xff1a;http://www.sonatype.org/nexus/archived/ 三、上传压缩文件 四、解压缩文件 五、配置环境变量 1、临时配置 mvn clean package -Dmaven.test.skiptrue -Dmaven.javadoc.skiptrue命令&#xff1a;expor…

java.util.UnknownFormatConversionException: Conversion = ‘,‘ 解决

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 报错&#xff1a; 2. 原因&#xff1a; 出错代码&#xff1a; if(info.getRiceCount() < 0){ ... } 事实上 对象的riceCoun属性值…

Map转为String

Map转为String 最近在做redis缓存时&#xff0c;需要将一个Map<String,Object>的对象转换为String对象存入redis&#xff0c;用的时候需从redis中取出来后并转为Map<String,Objcet>对象。 之前的做法直接就是Map对象的toString()存入redis,后面取出是就是用再转换为…

PowerBI分析Exchange服务器IIS运行日志

只要是基于Windows Server 的IIS来提供Web服务的应用&#xff0c;其实都可以对IIS的日志W3C进行分析&#xff0c;这样可以快速的了解整个web站点的运行情况&#xff0c;特别是对一些请求页面响应时间有要要求的&#xff0c;都可以从这些日志中分析问题出在哪&#xff0c;下面我…

java中 4 种取整函数

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 如下&#xff1a; round 函数可以特别注意一下&#xff1a;

section8

本章节的目的是 【明确目标用户群】 &#xff0c;以更好的服务现有用户。 【知识点】 1.作图 显示中文plt.rcParams[font.sans-serif] [SimHei] # 步骤一&#xff08;替换sans-serif字体&#xff09; plt.rcParams[axes.unicode_minus] False # 步骤二&#xff08;解决坐标轴…

排查腾讯云服务器被挖矿病毒【pnscan】挟持

一、问题发现 最新在使用腾讯云部署项目应用&#xff0c;具体方式为docker部署。今天早上发现腾讯云发来一条报警信息&#xff1a; 看到信息中说到攻击行为&#xff0c;怀疑是否中了病毒&#xff0c;决定排查一下问题。 二、排查过程 首先登录腾讯云服务器控制台&#xff0…

redis 操作

一、自动分配&#xff08;redis&#xff09; 数据放缓存了&#xff0c;为的是速度快 redis是支持持久化的&#xff0c;如果关机了以后&#xff0c;数据已经会放在文件里了 先买上一台电脑&#xff1a;装上redis服务器软件 - 这个服务器有个工网IP&#xff1a;47.93.4.198 - 端口…

从另一个角度看大数据量处理利器:布隆过滤器

思路&#xff1a;从简单的排序谈到BitMap算法&#xff0c;再谈到数据去重问题&#xff0c;谈到大数据量处理利器&#xff1a;布隆过滤器。 情景1&#xff1a;对无重复的数据进行排序 给定数据&#xff08;2&#xff0c;4&#xff0c;1&#xff0c;12&#xff0c;9&#xff0c…

例题练习

1,购物车 功能要求&#xff1a;要求用户输入自己拥有总资产&#xff0c;例如&#xff1a;2000显示商品列表&#xff0c;让用户根据序号选择商品&#xff0c;加入购物车购买&#xff0c;如果商品总额大于总资产&#xff0c;提示账户余额不足&#xff0c;否则&#xff0c;购买成功…

并行计算的强大

最近在处理一批数据&#xff0c;10的8次方&#xff0c;处理完毕大概要一个月&#xff0c;并且这个程序占用的CPU只有一个&#xff08;我从来没有注意到这个问题啊啊啊&#xff09;。 突然师兄提醒我可以把10的8次方条数据拆成10个10的7次方&#xff0c;作为10条任务并行处理&a…

Kubernetes集群(概念篇)

Kubernetes介绍 2013年docker诞生&#xff0c;自此一发不可收拾&#xff0c;它的发展如火如荼&#xff0c;作为一个运维如果不会docker&#xff0c;那真的是落伍了。 而2014年出现的kubernetes&#xff08;又叫k8s&#xff09;更加炙手可热&#xff0c;我想大部分人仅仅是听说过…

$(“#addLowForm“).serialize()同时提交其它参数的写法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 原本写法&#xff1a; 2. 不光传表单参数&#xff0c;还有别的参数的写法&#xff1a;

JAVA自学笔记25

JAVA自学笔记25 1、GUI 1&#xff09;图形用户接口&#xff0c;以图形的方式&#xff0c;来显示计算机操作的界面&#xff0c;更方便更直观 2&#xff09;CLI 命令行用户接口&#xff0c;就是常见的Dos&#xff0c;操作不直观 3&#xff09; 类Dimension 类内封装单个对象…

Map是不是集合?

Map是不是集合&#xff1f; 一、起因 今天在一个群里跟几位朋友就“map是不是集合“”争执了起来&#xff1b;几位朋友一致认为map不是集合&#xff0c;他们说只有Collection接口下的才是集合&#xff0c;而我认为Collection和Map下的实现类都是集合类。二、发展 于是我开始在…