酷炫网页制作之《HTML认识及基础标签使用》，分分钟搞定
gaoyangw 2024-11-13 10:36 24 浏览 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 : 在当前行的上方插入新行
相关推荐
- 网站建设全流程指南:从需求分析到上线运营
-
建网站看似步骤繁多，但实际上可以依照既定的流程和步骤逐一完成。从需求调研到正式上线运营，每一个步骤都不可或缺。接下来，我将详细地为大家介绍网站建设的各个阶段和流程。需求分析首先，要弄清楚网站建设的初衷...
- 建网站流程详解:从目标到设计的关键步骤
-
今天咱们讨论一下建网站的话题。说起来，建网站并不复杂。只要掌握了几个基础步骤和技巧，就能打造出属于自己的网站。我已经把建站流程归纳了一下，现在来给大家详细介绍一下。明确目标先要弄明白建网站的目的。若是...
- 网站建设全流程:从规划到上线的关键步骤
-
建立一个网站，需要考虑的要素颇多。从最初的策略制定到最终的上线与维护，每个环节都至关重要。接下来，我将逐一阐述网站建设所涵盖的具体内容。规划设计首先，得制定一个明确的计划。计划中要确定网站的目的和方向...
- 网站建设全流程解析:从目标到功能实现
-
打造一个网站并不简单，它涉及多个操作步骤。接下来，我会逐一为大家解说网站建设的具体流程，以及每个环节需要注意的点，帮助大家掌握关键步骤，顺利构建个人网站。确定目标和需求建网站前先要搞清楚目标。若是电商...
- 网站建设不易，详细介绍其具体流程的规划与操作
-
搭建网站并非易事，需我们逐步推进。从最初的规划阶段到最终上线及后续维护，每一步都不可轻视。接下来，我将为大家详细介绍网站建设的具体流程。确定网站定位首先，我们要搞清楚这个网站是做什么的。它是企业展示平...
- 从零开始教你APP推广:关键词分词组词
-
“如何有效拓展关键词覆盖数?优化OK的关键词如何保持排名?为何我优化的关键词没带来显著新增?这3个问题可能也是大家在优化过程中挥之不去的难题。其实这三个问题都是由一个问题所带来的：关键词的设置不合理。...
- 我，一个月外贸询盘300+告诉你谷歌推广怎么找关键词!
-
如何在谷歌推广中找到适合自己的关键词，却是很多人头疼的问题。我作为一家激光雕刻机工厂的优化师，现在一个月有300+的有效询盘，今天将会分享一下我的经验，告诉大家如何通过谷歌推广找到适合自己的关键词。一...
- 直通车标准计划和智能计划是否会相互起冲突?
-
智能计划出来以后，标准计划与智能计划就经常被区分开讨论，相互比较，哪个效果好、在免费流量拉动上会不会有区别；又担心是否会互相影响，今天就来细细的说一下标准计划与智能计划。标准计划和智能计划的区别是什么...
- SEM推广的关键词匹配方式是什么?（sem推广关键词优化方式有哪些）
-
百度推广总共包含三种匹配方式，精确(相同/相近)、短语(包含)、广泛(相关)，在推广中利用最多的是精确和【短语（精确包含）】，广泛慎用。核心重点匹配方式：短语有分为：精确包含、同义包含、核心包含...
- 微信搜一搜SEO排名优化中，标题关键词布局有何技巧?
-
一、引言...
- 搜狗推广怎样做关键词数据分析?（搜狗推广是什么意思）
-
搜狗推广关键词数据分析其实和百度，360，神马推广差不多，但是为什么要单独列文来说明呢？是因为由于搜索关键词报告不存在点击为0的关键词，就造成找不到大量有展现没点击的关键词，这和百度推广等媒体是不同的...
- 网络营销推广介绍网站该如何布置关键词?
-
网络营销推广表示网站在进行优化的时候，关键词优化也是非常重要的一环，更合理的把网站关键词进行布局和设置，会更好地给网站形成一种体系，更有力的帮助网站提升收录，进而更利于提升排名，那么对于网站优化中该如...
- 做竞价推广怎样挖掘挑选关键词?（竞价推广关键词逻辑）
-
从本质上来讲，竞价推广就是花钱买流量。关键词选择是否合适，将直接影响到我们推广的成本和线索量。如果关键词选的不合适，成本就会很高，甚至于消费，不转化。在关键词选择上，我们不仅要选对的，更要选择合适的。...
- 搜索推广经验——闲扯关键词的淡（搜索推广关键词怎么出价）
-
一、我们认为的关键词关键词，对电商人尤其是做网络营销推广方面的人来说，是最熟悉不过了！关键词贯穿了网络营销推广的整个过程中，选择产品，筛选关键词，围绕关键词编写文案策划，然后做关键词的排名等！这些都...
- 深圳百快抖网络:网络推广如何选择合适的关键词?
-
对于网络推广来说，恰当地选择关键词是推广成功与否的关键。关键词选择不恰当，网络推广工作可能会长时间卡在第一步，迟迟不能达到推广目的。那么网络推广应当如何选择关键词呢？我们需要考虑以下几点：...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站收录查询 (46)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 长尾关键词 (47)
- 手机网站建设 (53)
- 一键优化 (47)