HTML标签(上)
程序员文章站
2022-05-15 20:25:37
...
HTML 语法规范
基本语法概述
- HTML 标签是由尖括号包围的关键词,例如 。
- HTML 标签通常是成对出现的,例如 和 ,我们称为双标签。标签对中的第一个标签是
开始标签,第二个标签是结束标签。 - 有些特殊的标签必须是单个标签(极少情况),例如
,我们称为单标签。
标签关系
双标签关系可以分为两类:包含关系和并列关系。
包含关系:
<head>
<title> </title>
</head>
并列关系:
<head> </head>
<body> </body>
HTML 基本结构标签
HTML 常用标签
标签语义
简单理解就是指标签的含义,即这个标签是用来干嘛的。
标题标签 < h1 > - < h6 >(重要)
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题,
即< h1 > - < h6 > 。
<h1> 我是一级标题 </h1>
标签语义:作为标题使用,并且依据重要性递减。
特点:
- 加了标题的文字会变的加粗,字号也会依次变大。
- 一个标题独占一行。
段落和换行标签(重要)
段落 < p > < /p >
换行标签 < br / >
文本格式化标签
在网页中,有时需要为文字设置粗体、斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要.
语义 | 标签 | 说明 |
---|---|---|
加粗 | < strong >< /strong > 或 < b >< /b > | 推荐 < strong >< /strong > |
倾斜 | < em >< /em > 或 < i >< /i > | 推荐 < em >< /em > |
删除线 | < del >< de l> 或 < s >< /s > | 推荐 < del >< /del > |
下划线 | < ins >< /ins > 或 < u>< /u > | 推荐 < ins >< /ins > |
< div > 和< span >标签
< div > 和 < span > 是没有语义的,它们就是一个盒子,用来装内容的
特点:
- < div > 标签用来布局,但是现在一行只能放一个< div >。 大盒子
- < span > 标签用来布局,一行上可以多个 < span >。小盒子
图像标签和路径 (重点)
图像标签
在 HTML 标签中,< img > 标签用于定义 HTML 页面中的图像。
<img src="图像URL" />
src 是< img >标签的必须属性,它用于指定图像文件的路径和文件名。
图像标签的其他属性:
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,若图片无法显示,则替换为这个文本 |
title | 文本 | 提示文本,鼠标放在图片上显示的文字 |
width | 像素 | 设置图像宽度 |
height | 像素 | 设置图像高度 |
border | 像素 | 设置图像边框粗细 |
路径
目录文件夹和根目录:
目录文件夹:就是普通文件夹,里面只不过存放了我们做页面所需要的相关素材,比如 html 文件、图片等。
根目录:打开目录文件夹的第一层就是根目录
路径可以分为:1. 相对路径 2. 绝对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 同一级目录 | |
下一级路径 | / | 下一级目录 |
上一级路径 | …/ | 上一级目录 |
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”。
超链接标签 (重点)
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性 | 作用 |
---|---|
href | 指定跳转地址,必须属性 |
target | _self 为默认值,在当前页打开;_blank 在新窗口打开 |
链接分类
- 外部链接: 例如 < a href="http:// www.baidu.com "> 百度< /a >。
- 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href=“index.html”> 首页 < /a >。
- 空链接: 如果当时没有确定链接目标时,< a href="#"> 首页 < /a > 。
- 下载链接: 如果 href 里面地址是一个文件或者压缩包,会下载这个文件。
- 网页元素链接: 在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接.
- 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
a.在链接文本的 href 属性中,设置属性值为 #名字 的形式,如< a href="#two"> 第2集 < /a >
b.找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:< h3 id=“two” >第2集介绍< /h3 >
HTML 中的注释和特殊字符
注释
<!-- 注释语句 --> 快捷键: ctrl + /
特殊字符
上一篇: 卡片式切换效果
推荐阅读
-
基本的html表格知识,一定要学会!
-
向大家请问一上,新闻网站用哪个CMS比较好
-
html网页中插入script脚本,src指向php文件,怎么在html中显示php返回的数据?求大神赐教。
-
Kidney自得其乐版CSS教程 Chapter1 Selector_html/css_WEB-ITnose
-
Thinkphp的volist标签嵌套循环使用教程_PHP
-
【原】《DIV+CSS商业案例与网页布局开发精讲》读书笔记(2)_html/css_WEB-ITnose
-
有谁知道这种窗口是怎么做的?_html/css_WEB-ITnose
-
求个精:韩顺平html、css、javascript完全教程(共和55讲)_html/css_WEB-ITnose
-
初学者,js写的一个俄罗斯方块问题_html/css_WEB-ITnose
-
css实现带箭头选项卡_html/css_WEB-ITnose