html 标签、图像、链接、注释、锚点定位、特殊字符
常用的 html 标签
<!-- 1、成对出现的标签:--><h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p><!-- 2、单个出现的标签: -->
<br>
<img src="data:images/pic.jpg" alt="图片">
<hr><!-- 3、带属性的标签,如src、alt 和 href等都是属性 -->
<img src="data:images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a><!-- 4、标签的嵌套 -->
<div><img src="data:images/pic.jpg" alt="图片"><a href="http://www.baidu.com">百度网</a>
</div>
提示:
- 标签不区分大小写,但是推荐使用小写。
- 根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签)
双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签
单标签是一个标签组成,没有标签内容, 比如: img标签
标题标签h
单词缩写: head 头部. 标题 title 文档标题
为了使网页更具有语义化,经常会在页面中用到标题标签,HTML提供了6个等级的标题,即
标题标签语义: 作为标题使用,并且依据重要性递减
其基本语法格式如下:
<h1> 标题文本 </h1>
<h2> 标题文本 </h2>
<h3> 标题文本 </h3>
<h4> 标题文本 </h4>
<h5> 标题文本 </h5>
<h6> 标题文本 </h6>
显示效果如下:
小结 :
加了标题的文字会变的加粗,字号也会依次变大
一行是只能放一个标题的
段落标签p
单词缩写: paragraph 段落
作用语义:
可以把 HTML 文档分割为若干段落
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是
<p> 文本内容 </p>
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。
水平线标签hr
单词缩写: horizontal 横线
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,<hr />就是创建横跨网页水平线的标签。其基本语法格式如下:
<hr />是单标签
在网页中显示默认样式的水平线。
换行标签br
单词缩写: break 打断 ,换行
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签
<br />
这时如果还像在word中直接敲回车键换行就不起作用了。
div 和 span标签
div span 是没有语义的 是我们网页布局主要的2个盒子
div 就是 division 的缩写 分割, 分区的意思 其实有很多div 来组合网页。
span 跨度,跨距;范围
语法格式:
<div> 这是头部 </div> <span>今日价格</span>
他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别:
div标签 用来布局的,但是现在一行只能放一个div
span标签 用来布局的,一行上可以放好多个span
排版标签总结
标签名 | 定义 | 说明 |
---|---|---|
<hx></hx> | 标题标签 | 作为标题使用,并且依据重要性递减 |
<p></p> | 段落标签 | 可以把 HTML 文档分割为若干段落 |
<hr /> | 水平线标签 | 没啥可说的,就是一条线 |
<br /> | 换行标签 | |
<div></div> | div标签 | 用来布局的,但是现在一行只能放一个div |
<span></span> | span标签 | 用来布局的,一行上可以放好多个span |
文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。
区别:
b 只是加粗 strong 除了可以加粗还有 强调的意思, 语义更强烈。
标签属性
使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
<手机 颜色="红色" 大小="5寸"> </手机>
图像标签img
单词缩写: image 图像
要想在网页中显示图像就需要使用图像标签,下面详细介绍图像标签<img />以及和他相关的属性。(单标签)
语法如下:
<img src="图像URL" />
该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。
border 通常会用css来做
注意:
标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
采取 键值对 的格式 key="value" 的格式
比如:
正常的<br /><img src="data:image.jpg" width="300" height="300" /><br />带有边框的<br /><img src="data:image.jpg" width="300" height="300" border="3" /><br />有提示文本的<br /><img src="data:image.jpg" width="300" height="300" border="3" title="happy" /><br />有替换文本的<br /><img src="data:image.jpg" width="300" height="300" border="3" alt="图片不存在" />
链接标签
单词缩写: anchor 的缩写 。基本解释 锚, 铁锚 的
在HTML中创建超链接非常简单,只需用标签把文字包括起来就好。
语法格式:
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性 | 作用 |
---|---|
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其取值有self和blank两种,其中_self为默认值,__blank为在新窗口中打开方式。 |
注意:
外部链接 需要添加 http:// www.baidu.com
内部链接 直接链接内部页面名称即可 比如 < a href="index.html"> 首页 </a >
如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。
注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。
简单解释:
注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。
语法格式:
<!-- 注释语句 --> 快捷键是: ctrl + / 或者 ctrl +shift + /
注释重要性:
团队约定
一般用于简单的描述,如某些状态描述、属性描述等
注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行
推荐:
<!-- Comment Text -->
<div>...</div>
不推荐:
<div>...</div><!-- Comment Text --> <div><!-- Comment Text -->...
</div>
锚点定位
通过创建锚点链接,能够快速定位到目标内容。
创建锚点链接分为两步:
1. 使用相应的id名标注跳转目标的位置。 (找目标)<h3 id="two">第2集</h3>
2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) (拉关系) 嘻嘻嘻嘻嘻嘻嘻..<a href="#two">
特殊字符
一些特殊的符号,我们在html 里面很难或者 不方便直接 使用, 此时可以使用下面的替代代码。
总结:
是以运算符
&
开头,以分号运算符;
结尾。他们不是标签,而是符号。
HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体
团队约定
推荐:
<a href="#">more >></a>
不推荐:
<a href="#">more >> </a>
html 标签、图像、链接、注释、锚点定位、特殊字符相关推荐
- 标签有关用法以及锚点定位;
一.页面内的锚点定位: 锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转: 1.单向定位: 锚定定位实在页面必须要发生滚动的情况下,不滚动也能发 ...
- a标签有关用法以及锚点定位;
一.页面内的锚点定位: 锚点定位中,就算采用overflow:hidden将滚动条隐藏,但是它依然可以发生锚点定位,实现定点跳转: 1.单向定位: 锚定定位实在页面必须要发生滚动的情况下,不滚动也能发 ...
- 前端的学习之路:初级HTML---超链接的锚点定位
超链接的锚点定位 <!DOCTYPE html> <html lang="en"> <head><meta charset="U ...
- 【2022.7.11】HTML基础介绍语法常用标签超文本链接锚点定位
来自2022.7.11 今日学习 一.HTML基础介绍 1.网页 1.1什么是网页 1.2什么是HTML 1.3超文本 1.4网页的形成 2.常用浏览器 2.1常用浏览器 2.2浏览器内核 3.web ...
- 如何用html语言定位img,html经常使用标签(图像标签img,连接标签a,锚点定位,及路径)...
1 图像标签img (重点) 单词缩写: image 图像html HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就须要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性 ...
- 超链接标签(外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接)、注释
超链接标签 在HTML中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面 1.链接的语法格式 <a href="跳转目标" target=" ...
- 链接标签(anchor)和锚点定位
一.链接标签 HTML中创建超链接只需要用标签环绕需要被链接的对象即可,基本原格式如下: <a href="跳转目标" target="目标窗口的弹出方式" ...
- Html常见标签- 排版标签 - 文本格式化标签 - 图像标签 - 链接 - 相对路径,绝对路径的使用
1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后 ...
- 前端(一)——HTML之基本标签、图片标签、超链接、锚链接
文章目录 1. 定义 2. 发展史及优势 2.1 发展史 2.2 优势 3. W3C标准 4. HTML的基本结构 5. 网站的基本标签 5.1 标题标签 5.2 段落标签 5.3 水平线标签 5.4 ...
最新文章
- SD卡驱动分析(一)
- 历史:2007年总结与2008年展望
- MATLAB利用串口接收数据,并实时显示图形
- VSS源代码管理应该怎么样对bin目录及项目中用到的第三方组件进行管理?
- [Cnoi2019]须臾幻境(LCT维护最大生成树+主席树/分块)
- 题解 P3811 【【模板】乘法逆元】
- 前端学习(1807):前端调试之列表伪类练习三
- js二维数组传递java,ActiveX获取JavaScript传递的二维数组
- Base64编码解码
- 信号与线性系统分析_线性系统与采样定理
- (36)虚拟时钟(中心对齐约束)
- Spring Boot@Component注解下的类无法@Autowired的问题
- 利用python爬取图片_利用Python爬取网页图片
- html词云图生成,图悦在线词云图制作工具
- DSP降噪拾音器 语音增强 噪声抑制器 反馈抑制器
- CCYYMMDD时间格式
- 如何离线下载网易云音乐
- 笔记本电脑硬盘不见了_笔记本电脑找不到硬盘原因及解决方法
- oppoa83t怎么升级android8,OPPO A83t刷机教程_OPPO A83t专用rom包下载
- 华为“达芬奇计划”首次曝光!