酷炫网页制作之《HTML认识及基础标签使用》，分分钟搞定
gaoyangw 2024-11-13 10:36 22 浏览 0 评论
什么是HTML
Hyper Text Markup Language, 超文本标记语言
标记又称为标签(Tag), 一般语法:
<tagName></tagName>
它可以有属性(Attribute):
<tagName attributeName="value">, 如:
<meta charset="utf-8" />
标签也可以不成对地关闭:
<tagName />
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
网页标题, 显示在浏览器选项卡的标题栏上!
文本排版标签
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 : 在当前行的上方插入新行
相关推荐
- 网络推广引流策略:选准平台提升品牌影响力
-
网络推广引流是企业和个人自媒体发展中不可或缺的关键步骤，它能有效提升品牌名声、促进产品销售、吸引众多潜在消费者。为了做好这项工作，我们需深入了解众多细节和策略。下面，我将逐一为大家详细介绍网络推广引流...
- 王心凌翻红，南京某公司专门发文为其拉票?
-
前不久，“刘耕宏女孩”们纷纷加入健身大军，一起跳起了《本草纲目》。最近，“王心凌男孩”们又跳起了《爱你》，登上热搜。一首《爱你》重新翻红5月20日，《乘风破浪3》开播。今年39岁的王心凌在初舞台上，绑...
- 项目招标山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公
-
项目招标山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
- 关于山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
-
关于山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
- 最新项目山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
-
最新项目山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
- 山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
-
山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商...
- 山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
-
山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告...
- 最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商
-
最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告...
- 最新招标公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性
-
最新招标公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告
- 最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公
-
最新公告山海湾金澜锦翠项目广告设计及网络推广服务竞争性磋商公告...
- 合肥网站建设大概流程是怎么样的（合肥网站建设方案开发）
-
合肥网站建设是指在合肥地区进行网站建设的一系列流程和步骤。随着互联网的快速发展,网络在经济、商务、政府、教育和其他领域的作用越来越大,一个高效、安全、易用的网站在合肥的发展中起着重要的作用。下面将简要...
- 网站SEO优化如何制定策略（网站seo的主要优化内容）
-
原文地址：网站SEO优化如何制定策略作者：怎么可以那么难取名字做网站优化首先需要制定好SEO策略,SEO策略贯穿整个SEO工作中心，每一步都是按照这个策略走，循序渐进，一步一步进行。执行SEO之前一定...
- 2025年Google SEO趋势:AI如何重塑你的流量策略?
-
2025年，GoogleSEO正迎来一场由AI驱动的革命。作为一名拥有16年经验的SEO专家，我见证了无数网站因未能适应变化而流量暴跌，也看到那些紧跟趋势的网站实现逆袭。AI如何影响SEO？Goog...
- 网站建设费用包含哪些方面?（网站建设费用计入哪个科目）
-
在网站建设中，费用通常由多个方面组成，这些因素共同决定了网站的整体成本。首先，最基本的费用是域名和主机的购买。域名是网站的地址，而主机则是存放网站内容的服务器，这两者都是网站上线的必要条件。选择合适的...
- 做一个公司官网大概多少钱呢?（做一个公司官网大概多少钱呢知乎）
-
制作公司官网的费用因需求复杂度和服务商不同差异较大，以下是一个大致的费用范围和分析，供参考：#公司官网##网站搭建---**一、影响价格的核心因素**1.**网站类型**-**基础展示型**（5...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 网页设计 (44)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站收录查询 (46)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 网站设计模板 (45)
- 一键优化 (47)