1.HTML基础知识-HTML进阶
一、HTML、XHTML和HTML5
1.HTML和XHTML
(1)二者起源
HTML,超文本标记语言,是构成网页的主要语言。我们经常所说的HTML,其实指的是HTML 4.01
。
XHTML,扩展的超文本标记语言。它是 XML 风格的HTML 4.01
,可以称 XHTML 为更严格、更纯净的HTML 4.01
。
HTML 语法书写较为松散,但有利于开发者编写,然而对机器处理起来越困难。所以,为了让机器能更好地处理 HTML ,才在 HTML 基础上引入了 XHTML
(2)二者区别
① XHTML标签必须闭合
在
XHTML
中,所有标签必须闭合。 例如:<p>和</p>
、<h1>和</h1>
等。 此外,空标签也需要闭合。例如:我们之前学到的换行标签<br>
必须要写成</br>
。
② XHTML标签以及属性必须小写
在
XHTML
中,所有标签以及标签属性必须小写,不能大小写混合,也不能全部都是大写。但标签的属性值可以大写。
③ XHTML标签属性值必须用引号
在
XHTML
中,标签属性值必须用引号括起来,单引号、双引号均可。
④ XHTML标签用id属性代替name属性
在
XHTML
中,除了表单元素之外的所有元素,都应该用 id 而不是 name。
2.HTML5
HTML 指的是 HTML4.01,XHTML 是 XML风格的HTML 4.01(是 HTML 的过渡版本),而 HTML5 指的是下一代 HTML,也就是 HTML4.01 的升级版。 HTML5 现在已经远远超越了标签的范畴。HTML5中增加了部分标签,而且还增加了
canvans、SVG、WebSocket、本地存储
等技术,这些技术都是使用JavaScript
操作的,这使得HTML从一门“标记语言”转变为一门“编程语言”。
(1)HTML5的特点
① 文档类型说明
HTML5 遵循着 “化繁为简” 的设计理念。页面的文档类型
<!DOCTYPE>
被极大的删减。
Ⅰ.XHTML的文档类型说明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Ⅱ.HTML5的文档类型说明:
<!DOCTYPE html>
② 标签不再区分大小写
<DIV>見贤思齊</div>
<!--上面这种写法,是完全符合HTML5规范的-->
Ⅰ.实际开发
在实际开发中,所有标签以及标签属性都小写是最规范的。
③ 允许属性值不加引号
<div id=wrapper style=color:purple>見贤思齊</div>
<!--上面这种写法,是完全符合HTML5规范的-->
Ⅰ.实际开发
在实际开发中,标签属性值最好都用引号括起来,单引号、双引号均可。
④ 允许部分属性的属性值省略
在
HTML5
中,部分具有特殊性属性的属性值可以省略。
Ⅰ.HTML5中可以省略属性值的属性
省略形式 |
等价于 |
---|---|
checked |
checked="checked" |
readonly |
readonly="readonly" |
defer |
defer="defer" |
ismap |
ismap="ismap" |
nohref |
nohref="nohref" |
noshade |
noshade="noshade" |
nowrap |
nowrap="nowrap" |
selected |
selected="selected" |
disabled |
disabled="disabled" |
multipe |
multipe="multipe" |
noresize |
noresize="disabled" |
Ⅱ.示例
1.
<input type="text" readonly="readonly">
等价于
<input type="text" readonly>
2.
<input type="checkbox" checked="checked">
等价于
<input type="checkbox" checked>
二、div和span
div 和 span 没有任何语义,所以它俩一般都是配合
CSS
来定义元素样式的。
1.二者区别
(1)div是块元素
div 是块元素,可包含任何块元素和行内元素,不会与其它元素位于同一行; span 是行内元素,可以与其它行内元素位于同一行。
(2)div用于结构划分
div 常用于页面中较大块的结构划分,然后配合
CSS
操作; span 一般用来包含文字等,它没有结构的意义,纯粹是应用样式。 当前它行内元素都不适合的时候,可以用 span 配合 CSS 操作 。
(3)示例
① 例1
将一个段落中的 ”見贤思齊人生若只如初见“ 前面 4 个字,进行加粗或改变颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
</head>
<body>
<p><span style="color: #00FFFF;font-weight: bold;">見贤思齊</span>人生若只如初见</p>
</body>
</html>
div和span二者区别示例.png
三、id和class
1.id属性
id
属性具有唯一性,一个页面中相同的id
只允许出现一次。W3C
建议,对于页面关键的结构 或 大结构,才使用id
;对于小结构,建议使用class
属性。
(1)关键结构
上面所说的关键结构,指的是诸如:LOGO、导航、主题内容、底部信息栏等。
(2)搜索引擎
搜索引擎识别一个页面的结构,是根据标签的语义及id属性来识别的。 因此,
id
属性勿要轻易使用,此外,id
命名同样十分关键,特别是对搜索引擎优化。
2.class属性
class,类。它所采用的思想跟编程语言中的类相似。 我们可以为同一个页面中的相同元素或不同元素设置相同的
class
,然后通过CSS
使得相同class
的元素具有相同的样式。若是要为两个或多个元素定义相同的样式,使用class无疑是最好的,因为这样可以大大地减少重复的代码。
(1)一个元素多个class
对于一个元素而言,可以给它定义多个class。 一般来说,定义多个
class
的目的是:用一个class
构建公有样式,用另一个class
定义单独样式。
(2)总结
对于页面关键结构,建议使用
id
;对于小地方,建议使用class
。 即使我们不需要对关键结构进行CSS
或JavaScript
操作,也建议加上id
以便搜索引擎识别页面结构。
四、浏览器标题栏小图标
当我们浏览网页的时候,细心的你可能会发现浏览器标题前通常都会带有一个小图标,如下图所示:
浏览器标题栏小图标举例.png
1.语法
若想在浏览器标题栏添加小图标,其实只需要在
head
标签添加一个link
标签即可。
<link rel="shortcut icon" type="image/x-icon" href="xxx.ico">
(1)说明
rel、type这两个属性的取值是固定形式。
href
属性取值为小图标的地址。这个地址是根据小图标在站点文件夹路径而定。 小图标的格式是.icon
。
(2)示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--必须放在title标签及其它meta标签前-->
<title>浏览器小图标</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
</body>
</html>
浏览器标题栏小图标示例.png
- 飞机大战
- 译《ES6的6个小特性》
- 微信小程序从使用到分析快速解析
- andriod游戏音效
- JavaScript模块探索
- 数据层扩展包EFCachingProvider 总结
- Mac配置Maven
- FileSystemWatcher 导致Mono ASP.NET应用程序CPU使用率比较高
- 网卡收包流程
- Android 异步加载图片,使用LruCache和SD卡或手机缓存,效果非常的流畅
- Terminal &zsh &oh-my-zsh配置
- 【Python量化投资】基于网格优化、遗传算法对CTA策略进行参数优化
- 将我的 Windows Phone 应用程序更新到 Windows Phone 8
- 绑定子类的泛型基类,反模式?
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Python搭建Keras CNN模型破解网站验证码的实现
- PyCharm 在Windows的有用快捷键详解
- Python 自动化测试(三): pytest 参数化测试用例构建
- 基于Android平台实现拼图小游戏
- kotlin项目加入Glide图片加载库并使用GlideApp的方法
- Android实现百分比下载进度条效果
- 实验2 OpenGL交互
- 深入了解OkHttp3之Interceptors
- 实验3.1 直线光栅化(键盘交互版)
- 150行Python代码实现带界面的数独游戏
- 实验4 编码裁剪算法
- 浅谈Python中os模块及shutil模块的常规操作
- Python decorator拦截器代码实例解析
- 实验4.1 编码裁剪算法(鼠标交互版)
- python实现对变位词的判断方法