Hyper Text Markup Language, 超文本标记语言
标记又称为标签(Tag), 一般语法:
<tagName></tagName>
它可以有属性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
标签也可以不成对地关闭:
<tagName />
HTML文档由浏览器解释并执行。
HTML文档基本结构meta<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页
<html>
<head> ---- 头部, 可包含meta, title等标签
</head>
<body> ---- 主体, 包含主要内容
</body>
</html>
<meta charset="utf-8" /> 用于告诉浏览器用什么样的字符编码来解释网页中的文本.
常见编码:
iso-8859-1: 纯英文编码
gbk, gb2312: 简体中文编码
big5: 大五码,繁体中文编码,主要应用于台湾地区
utf-8: 国际首选编码,它兼容所有的字符
除此之外, meta还可以通过keywords, description属性对页面关键词及描述信息进行设置, 以提高搜索引擎的命中.
title网页标题, 显示在浏览器选项卡的标题栏上!
html特殊字符/转义字符h1-h6: 内容标题标签
p: 段落
br: 换行
hr: 水平线
strong: 粗体文本
em: 斜体文本
span: 无任何特殊样式的文本
pre: 预格式标签,其中的内容在页面上带格式渲染
small: 比当前字体小的文本
html注释空格
< 小于
> 大于
© 版权符
" 双引号
图像标签<!-- 注释内容 -->
<img
src="图像地址"
title="鼠标悬停提示"
alt="图像加载错误时的替代文本"
width="宽度"
height="高度"
/>
图像地址分为2种:
1. 相对地址, 如: img/cc.jpg
2. 绝对地址, 如: http://img.bcd.com/2017/1644232421.jpg
超链接
<a href="链接地址" target="目标窗口">文本|图片</a>
目标窗口:
_self: 目标页面在当前窗口打开
_blank: 目标页面在新窗口中打开
如果是在页面具有frameset/frame/iframe的场景下:
_top: 在顶级窗口中打开
_parent: 在父级窗口中打开
_自定义名称: 在指定的特定窗口中打开
三种用法:
div标签1. 页面间链接
<a href="page/login.html"></a>
2. 锚链接
<a href="#help"></a>
help是本页面中一处id为help的标签, 如: <p id="help">
或者:
help是通过a标签命名的锚记, 如: <a name="help"></a>
3. 功能性链接
唤醒本地安装的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>
div是一个容器, 常用于页面的布局
标签的分类:
1. 块级标签/块级元素
如: div, h1-h6, p, hr
特征: 独占容器中的一行, 其宽度是容器的100%
2. 行级标签/行级元素
如: span, img, strong, em, a
特征1: 多个行级元素可以同处一行, 其宽度由内容来撑开(auto)
特征2: 大部分行级元素设置其width/height无效
HBuilder常用快捷键ctrl D : 删除当前行
ctrl PgUp : 当前行上移
ctrl PgDown : 当前行下移
ctrl / : 注释 | 取消注释
ctrl shift F : 整理代码格式
ctrl C : 复制当前行
ctrl X : 剪切当前行
ctrl V : 粘贴
ctrl Z : 撤消上一步操作
ctrl S : 保存当前文件
ctrl shift S : 保存项目中全部文件
ctrl Enter : 在当前行的下方插入新行
ctrl shift Enter : 在当前行的上方插入新行
以上知识能做的效果图
部分效果
,
