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指定网页中 ...
随机推荐
- python基础-第六篇-6.2模块
python之强大,就是因为它其提供的模块全面,模块的知识点不仅多,而且零散---一个字!错综复杂 没办法,二八原则抓重点咯!只要抓住那些以后常用开发的方法就可以了,哪些是常用的?往下看--找答案~ ...
- 一篇搞定MongoDB
MongoDB最基础的东西,我这边就不多说了,这提供罗兄三篇给大家热身 MongoDB初始 MongoDB逻辑与物理存储结构 MongoDB的基础操作 最后对上述内容和关系型数据做个对比 非关系型数据 ...
- RESTful HTTP的实践(转)
add by zhj: 文章有点老了,2009年的,到现在已经六年了,不过还是很有参考价值的. 另外,吐槽一下PUT method,竟然允许用户用实例号来创建,靠,这也行,实例号还是后台来定义比较方便 ...
- Ningx代码研究.
概述 研究计划 参与人员 研究文档 学习emiller的文章 熟悉nginx的基本数据结构 nginx 代码的目录结构 nginx简单的数据类型的表示 nginx字符串的数据类型的表示 内存分配相关 ...
- redis之django-redis
自定义连接池 这种方式跟普通py文件操作redis一样,代码如下: views.py import redis from django.shortcuts import render,HttpResp ...
- 一行代码让python的运行速度提高100倍
python一直被病垢运行速度太慢,但是实际上python的执行效率并不慢,慢的是python用的解释器Cpython运行效率太差. “一行代码让python的运行速度提高100倍”这绝不是哗众取宠的 ...
- Django restframwork实现自定义数据格式的分页与搜索
最近因为在做分页时遇到的问题很多,页浪费了好多时间,所以记录一下.以后如遇到可用省去不必要的麻烦 restframwork中的官方文档对分页和搜索页进行了详细的介绍,但是我公司需要的return的js ...
- ruby on rails 数据库操作
(1)增加列的操作 rails generate migration add_password_digest_to_students password_digest:string bundle exe ...
- 列表中相同key的字典相加
# 怎么把列表中相同key的字典相加,也就是id的值加id的值,doc_count的值加doc_count的值 # 目标列表 l=[{'id': 5, 'doc_count': 129}, {'id' ...
- 160726 smarty 笔记(2)
<?php //取当前页 $p=1; if(!empty($_GET["page"])) { $p=$_GET["page"]; } //定义页面缓存文件 ...