html网页制作框架结构（酷炫网页制作之HTML认识及基础标签使用）

长旳很抱歉 2022-11-05 22:20:45

收藏赞分享

什么是HTML

Hyper Text Markup Language, 超文本标记语言

标记又称为标签(Tag), 一般语法:

它可以有属性(Attribute):

<tagName attributeName="value">, 如:

标签也可以不成对地关闭:

HTML文档由浏览器解释并执行。

HTML文档基本结构

<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页

<html>

<head> ---- 头部, 可包含meta, title等标签

</head>

<body> ---- 主体, 包含主要内容

</body>

</html>

meta

<meta charset="utf-8" /> 用于告诉浏览器用什么样的字符编码来解释网页中的文本.

常见编码:

iso-8859-1: 纯英文编码

gbk, gb2312: 简体中文编码

big5: 大五码,繁体中文编码,主要应用于台湾地区

utf-8: 国际首选编码,它兼容所有的字符

除此之外, meta还可以通过keywords, description属性对页面关键词及描述信息进行设置, 以提高搜索引擎的命中.

title

网页标题, 显示在浏览器选项卡的标题栏上!

html网页制作框架结构（酷炫网页制作之HTML认识及基础标签使用）(1)

文本排版标签

h1-h6: 内容标题标签

p: 段落

br: 换行

hr: 水平线

strong: 粗体文本

em: 斜体文本

span: 无任何特殊样式的文本

pre: 预格式标签,其中的内容在页面上带格式渲染

small: 比当前字体小的文本

html特殊字符/转义字符

空格

< 小于

> 大于

© 版权符

" 双引号

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: 在父级窗口中打开

_自定义名称: 在指定的特定窗口中打开

三种用法:

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标签

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 : 在当前行的上方插入新行