html-w3c规范及常见标签
W3C提倡的web结构:
内容(HTML)与表现(css样式)分离
内容(HTML)与行为(JS)分离
HTML内容结构要求语义化
基本规范:
标签名和属性名称必须小写
HTML标签必须关闭
属性值必须用引号括起来
标签必须正确嵌套(标签不能交叉)
超级链接
*(了解)rel:用于表明被链接文档与当前文档的关系:
rel="prev"(被链接文档是)前一篇文档 rel="next"(被链接文档是)后一篇文档
rel="icon" 被链接图片是当前文档的图标 rel="stylesheet"被链接文档是当前文档的样式表
rel="prefetch"预加载;在当前文档加载完成后,利用空余时间预加载即将链接的文档
锚点语法:
锚链接:
① 本页面锚链接:a.设置锚点:<a name="top"></a>
b. 在超链接上,使用#name 跳转到对应锚点。
② 页面间锚链接:a.在即将跳转页面的指定位置,设置锚点
b.在超链接的href属性中使用"页面地址.html#name"
<a href="text.html#name">跳转到新页面指定部分</a>
功能性链接:mailto://********* @qq.com用于给指定邮箱发送邮件
tencent://message/?uin=*********
给指定QQ发送消息
file:///e:/aaa.png 打开本地文件
补充img属性
align:设置图片周围文字相对于图片的位置。top、center、bottom
这里以center为例
认识即可(
S有误文本:删除线
cite标签:浏览器显示为倾斜。常用与书、画作、作品的引用
u:下划线
)
code:只是表示计算机代码,但是浏览器只会显示等宽字体,不会保留代码格式,需配合pre标签使用
bdo:表示文本方向,dir="ltr"从左往右 dir="rtl"从右往左
kbd:表示需要用户用键盘输入的内容,浏览器显示为等宽字体
sup:上标文本 sub:下标文本
【补充】版权符号:© ©
H5新增标签
Data:主要用于定义机器可读的数据格式。
Time:Data标签的时间文本,data元素的特例
Mark:高亮或标记文本,浏览器显示为黄色背景
为什么使用表格
基本布局
表格标签的属性
表格
table
表格的行:<tr></tr> 每行中的列:<td></td>
表格的表头:<th></th> 默认加粗,单元格居中
【常用属性】
1、border:给表格添加边框,当border属性增大时,只有外围框线增加,单元格的边框线始终为1px
2、Cellspacing:单元格与单元格之间的间隙距离,当Cellspacing="0"时,只会使单元格间隙为0,但不会合并边框线。【表格边框合并】style="border-collapse:
collapse;":无需再写Cellspacing="0"
3、Cellpadding:每个单元格中的内容与边框线的距离。
4、Width、Height:表格的宽高
5、align:表格在屏幕的左中右位置显示。 left center right
>>>注意:给表格加上align属性相当于让表格浮动。会直接打破表格后面元素的原有排列方式。
(这里以right为例)
6、Bgcolor:背景色
等同于style="background-color:;"
7、Background:背景图片 等同于style="background-image:;"且背景图会覆盖背景色
8、Bordercolor:边框颜色
、width/height:单元格的宽高
2、bgcolor:单元格的背景颜色
3、align:left center right 单元格中的文字水平对齐方式
4、valign:top center bottom 单元格中的文字垂直对齐方式
5、nowrap:nowarp="nowrap" 单元格中文字不换行
注意:
1、当表格属性与行列属性冲突时,以行列属性为准;(近者优先)
2、表格的align属性,是控制表格自身在浏览的的显示位置,行和列的algin属性,是控制 单元格中文字在单元格中的对齐方式;
3、表格的align属性,并不影响表格内文字的水平对齐方式
tr的align属性,可以控制一行中所有单元格的水平对其方式
【表格的跨行跨列】
colspan 跨列,当某个格跨N列时,其右边N-1个单元格需删除
rowspan 跨行,当某个格跨N行时,其下方N-1个单元格需删除
*
html-w3c规范及常见标签的更多相关文章
- html5 Doctor——教你规范使用html5标签
学习地址(英文资料):http://html5doctor.com/ http://www.w3.org/html/wg/drafts/html/master/text-level-semantics ...
- Html 常见标签,css基础样式,css的浮动和清流,浏览器的兼容
1.html模板<!DOCTYPE html><html><head> <meta charset="UTF-8"> <tit ...
- W3C规范学习
w3c:万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会.W3C组织是对网络标准制定的一个非赢利组织,W3C是万维网联盟的缩写,像HTML.XHTML.CSS ...
- 1、前端--HTML简介、head内常见标签、body内常见标签(特殊符号、div、span、a、img、列表、表格table、表单form)、标签两大属性
今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...
- W3C规范
连接:https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html W3C 代码标准规范 由 路飞 创建, 最后一次修改 2017-01-03 W ...
- 常见标签的默认属性值及相互作用——关于CSS reset的思考
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...
- 【html5】常见标签使用说明(持续更新)
说明: 所谓常见,是指我在优秀网页源码中见到的. 1.viewport 我见到的时候是这样: <meta name="viewport" content="widt ...
- HTML常见标签总结
什么是浏览器 解释和执行HTML源码的工具 五大浏览器:IE.FF(FireFox)(火狐).Chrome(谷歌).Opera(空中).Safari(Apple)(苹果) IE用的是Trident引擎 ...
- HTML常见标签学习与笔记总结
HTML其实就是把页面的数据封装并加上标签 表头<head> <title> 浏览器标题栏显示的内容 <base> 有href和target属性,href指定网页中 ...
随机推荐
- 重装系统后Myeclipse遇到的项目配置问题--一个菜鸟的经历!
电脑不知道为什么流量突然变大了. 一查svchost.exe后台下载老多系统.某某安全卫士根本么用,运维说用某企鹅管家. 结果一个鸟样.. 之前是系统是32位的win7 4G内存用不完.又打算升级内 ...
- 转:C语言的编译链接过程的介绍
11:42:30 C语言的编译链接过程要把我们编写的一个c程序(源代码)转换成可以在硬件上运行的程序(可执行代码),需要进行编译和链接.编译就是把文本形式源代码翻译为机器语言形式的目标文件的过程.链接 ...
- MySQL行(记录)的详细操作
一 介绍 MySQL数据操作: DML ======================================================== 在MySQL管理软件中,可以通过SQL语句中的 ...
- 010-Shell 输入/输出重定向
大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回到您的终端.一个命令通常从一个叫标准输入的地方读取输入,默认情况下,这恰好是你的终端.同样,一个命令通常将其输出写入到标准输出,默 ...
- 在vue中使用express-mock搭建mock服务
首先安装 nodemon ,如果是全局安装,那么所有的项目都可以使用mock服务 npm install nodemon 再安装express-mockjs npm i -D express-mock ...
- 我的Linux病毒追踪记录
第一次自己一个人全权负责做游戏服务器,对于Linux安全并不太懂,所以就在昨天,服务器遭到了攻击,刚开始,只是发现服务器的带宽占满了,以为是带宽不够用,可是想想,弱联网游戏对带宽占用也不高啊而且带宽加 ...
- 实参相依查找[条款25]----《C++必知必会》
名字空间对现代C++编程和设计有着深远的影响.其中有些影响直接而明显,例如using声明和using 指令以及采用名字空间作用域加以限定的名字.然而,名字空间还有一些在语法上不那么明显但任然很有基础. ...
- 利用trigger同步Oracle数据库
oracle不同数据库之间进行同步数据时,可以用触发器来实现,但需要数据库A访问数据库B,那么可以通过创建数据连接来实现,代码如下: CREATE DATABASE LINK dblink_test ...
- PHPCMS 小节
当前栏目id: {$catid}当前栏目名: {$CATEGORYS[$catid][catname]}当前栏目 ...
- PHP Web木马扫描器
<?php header('content-type:text/html;charset=gbk'); set_time_limit(0);//防止超时 /** * * php目录扫描监控 ...