HTML基础【2】:基础标签
H系列标签(H1 ~ H6)
- 作用:
- 用于给文本添加标题语义
- 格式:
<h1>xxxxxx</h1>
- 注意点
- H 标签是用来给文本添加标题语义的,而不是用来修改文本的样式的
- H标签一共有6个,从 H1 ~ H6,最多就只能到 6,超过 6 则无效
- 被 H 系列标签包裹的内容会独占一行
- 在 H 系列的标签中,H1 最大,H6 最小
- 在企业开发中,一定要慎用 H 系列的标签,特别是 H1 标签。在企业开发中一般情况下一个界面中只能出现一个 H1 标签
p标签(Paragraph)
- 作用:
- 告诉浏览器哪些文字是一个段落
- 格式:
<p>xxxxxxxx</p>
- 注意点:
- 在浏览器中会单独占一行
hr标签(Horizontal Rule)
- 作用:
- 在浏览器上显示一条分割线
- 格式:
<hr />
- 注意点:
- 在浏览器中会单独占一行
- 通过观察发现 HR 标签可以写 / 也可以不写 /, 如果不写 / 那么就是按照 HTML 的规范来编写,如果写上 / 那么就是按照 XHTML 的规范来编写。但是在 HTML5 中,由于 HTML5 兼容 HTML 和 XHTML,所以写不写都可以。那么以后在做前端开发时到底写还是不写呢?按照高级开发工具的提示来写即可
- 由于 hr 标签是用来修改样式的,所以不推荐使用。今后开发中添加水平线一般都使用 CSS 盒子来做
HTML注释(Annotation)
什么是注释?
- 注释是在所有计算机语言中都非常重要的一个概念,从字面上看,就是注解、解释的意思
- 注释可以用来解释某一段程序或者某一行代码是什么意思,方便直接或程序员之间的交流
为什么要使用注释?
- 适当的注释,能够让我们的程序更加可读,所以用中文提示自己,这里的程序是干什么的
注释格式
<!--被注释的内容-->
注意点:
- 被注释的内容不会在浏览器中显示,注释是写给我们自己看的
- 注释不能嵌套使用
快捷键:
ctrl + /
img标签(image)
作用:在网页上插入一张图片
格式:
<img src="./xxx.jpg" alt="这是图片标签" title="这是一张图片" width="200px" >
标签的属性:
写在标签中 key = "value" 这种格式的文本称之为标签属性
属性名称 作用 src 告诉浏览器需要插入的图片路径,以便于浏览器到该路径下找到需要插入的图片 alt 规定图像的替代文本,只有在src指定的路径下找不到图片,才会显示alt指定的文本 title 悬停文本(介绍这张图片, 只有在鼠标移动到图片上时才会显示) height 设置图片显示的高度 width 设置图片显示的宽度
注意点:
- alt 必须存在
- 建议图片的宽度和高度只设置一个,另一个会等比例放缩
- img标签添加的图片默认不是占一整行空间,多个图片可以同行显示
br标签
- 作用:让内容换行
- 格式:
<br/>
- 注意点:
- br 的意思是不另起一个段落进行换行,而网页中99.99%需要换行时都是因为另起了一个段落,所以应该用 p 来做
a标签(anchor)
- 格式:
<a href="http://www.cnblogs.com/qiuxirufeng/">湫兮如风</a>
- 作用:用于从一个页面链接到另一个页面
- 注意事项:
- 在a标签之间一定要写上文字,如果没有,那么在页面上找不到这个标签
- a标签也叫做
超级链接
或超链接
- a标签的属性
属性名称 | 作用 |
---|---|
href | 指定跳转的目标地址 |
target | 告诉浏览器是否保留原始界面, _blank保留, _self不保留 |
title | 悬停文本(介绍这个链接, 只有在鼠标移动到超链接上时才会显示) |
- base标签和a标签结合使用
- 如果每个a标签都想在新页面中打开,那么逐个设置a标签的target属性比较麻烦,这时我们可以使用base和a标签结合的方式,一次性设置有a标签都在新页面中打开
- 格式:
<base target="_blank" />
- 注意事项:
- base必须嵌套在head标签里面
- 如果标签上指定了target,base中也指定了target,那么会按照标签上指定的来执行
- a标签其它用法
- 假链接(本质是跳转到当前页面)
- 格式:
<a href="#">湫兮如风</a>
- 格式:
<a href="javascript:">湫兮如风</a>
- 格式:
- 跳转到
当前
页面指定位置
(锚点链接)- 格式:
<a href="#location">跳转到指定位置</a>
- 在页面的指定位置给任意标签添加一个id属性
- 例如
<p id="location">这个是目标</p>
- 例如
- 跳转到
指定
页面的指定位置
- 格式:
<a href="01-锚点链接.html#location">跳转到指定位置</a>
- 只需要在
01-锚点链接.html
页面添加一个id位置即可
- 格式:
- 格式:
- 假链接(本质是跳转到当前页面)
HTML基础【2】:基础标签的更多相关文章
- iOS系列 基础篇 06 标签和按钮 (Label & Button)
iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...
- Bootstrap<基础二十> 标签
Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...
- HTML基础及一般标签
HTML 内容 Hyper Text Markup Language 超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...
- HTML基础:<a>标签 编写个人收藏夹
编写个人收藏夹 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- [.net 面向对象编程基础] (7) 基础中的基础——流程控制语句
[.net 面向对象编程基础] (7) 基础中的基础——流程控制语句 本来没有这一节的内容,后来考虑到既然是一个系列文章,那么就尽可能写的详细一些,本节参考了网上朋友所写的例子,为的是让更多小伙伴学习 ...
- Java基础技术基础面试【笔记】
Java基础技术基础面试[笔记] String.StringBuilder以及StringBuffer三者之间的区别? 三者的区别可以从可变性,线程安全性,性能这三个部分进行说明 可变性 从可变性来说 ...
- [.net 面向对象编程基础] (3) 基础中的基础——数据类型
[.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...
- [.net 面向对象编程基础] (4) 基础中的基础——数据类型转换
[.net面向对象编程基础] (4)基础中的基础——数据类型转换 1.为什么要进行数据转换? 首先,为什么要进行数据转换,拿值类型例子说明一下, 比如:我们要把23角零钱,换成2.30元,就需要把整形 ...
- [.net 面向对象编程基础] (5) 基础中的基础——变量和常量
[.net面向对象编程基础] (5) 基础中的基础——变量和常量 1.常量:在编译时其值能够确定,并且程序运行过程中值不发生变化的量. 通俗来说,就是定义一个不能改变值的量.既然不能变动值,那就必须 ...
- [.net 面向对象编程基础] (6) 基础中的基础——运算符和表达式
[.net 面向对象编程基础] (6) 基础中的基础——运算符和表达式 说起C#运算符和表达式,小伙伴们肯定以为很简单,其实要用好表达式,不是一件容易的事.一个好的表达式可以让你做事半功倍的效果,比如 ...
随机推荐
- java学习之路--面试之多线程基础
Java多线程面试问题1. 进程和线程之间有什么不同?一个进程是一个独立(self contained)的运行环境,它可以被看作一个程序或者一个应用.而线程是在进程中执行的一个任务.Java运行环境是 ...
- 学习完HTML后的5大测试题----9.18
考试题目 第一题: 布局出该效果 提示:使用DIV的border样式,调整边框粗细出现该效果,保留上边框,其它三个方向的边框需设置:border-left:100px solid transpar ...
- HTML01
1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它不是编程语言) 2.为什 ...
- JAVA SE ------------------- 项目的菜单输入
//写一个工具类,进行输入选项数值的获取public class InputUtil { static Scanner sc=new Scanner(System.in); public static ...
- Markdown编辑工具及命令
Markdown是一种可以使用普通文本编辑器编辑的标记语言,通过使用简单的编辑,可以使文本具有一定的格式. Typora是一款简介的Markerdown编辑器. 文本编辑语法: 标题: # 一阶标题 ...
- arcmap发布服务报错:“Faild to publish service”
发布gp服务时,Analyze没有重大错误,但是发布结束时提示"Faild to publish service".让人很懵逼: 解决方法: 打开arcgis server man ...
- [redis] 与redis cluster有关的学习笔记
主要是以下三个官方文档,只略读了前两个,第三个还没有读. <redis cluster tutorial> <redis sentinel> <redis cluster ...
- 图->最短路径->单源最短路径(迪杰斯特拉算法Dijkstra)
文字描述 引言:如下图一个交通系统,从A城到B城,有些旅客可能关心途中中转次数最少的路线,有些旅客更关心的是节省交通费用,而对于司机,里程和速度则是更感兴趣的信息.上面这些问题,都可以转化为求图中,两 ...
- 实验二:MAL——简单后门 by:赵文昊
实验二:MAL--简单后门 一.后门是什么? 哪里有后门呢? 编译器留后门 操作系统留后门 最常见的当然还是应用程序中留后门 还有就是潜伏于操作系统中或伪装为特定应用的专用后门程序. 二.认识netc ...
- 深度学习基础(三)NIN_Network In Network
该论文提出了一种新颖的深度网络结构,称为"Network In Network"(NIN),以增强模型对感受野内local patches的辨别能力.与传统的CNNs相比,NIN主 ...