HTML的基本标签及属性
HTML
- 1. 标题与段落标签
- 2. 文本修饰标签
- 3. 图片标签
- 4. 链接标签
- 5. 无序、有序列表与定义列表
- 6. 表格、表单标签
- 7. div与span标签
1. 标题与段落标签
(1) 标题标签是一对双标签:<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>。在网页中,h1标签最重要,一个.html文件中只能有一个h1标签,h2、h3、h4、h5、h6可以有多个,最常用的标题标签是h1~h4,h5和h6在网页中不常使用。
(2) 段落标签是一对双标签:<p></p>。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title></head><body><h1>一级标题</h1><p>盼望着,盼望着,东风来了,春天的脚步近了。</p><h2>二级标题</h2><p>一切都像刚睡醒的样子,欣欣然张开了眼。山朗润起来了,水涨起来了,太阳的脸红起来了。</p><h3>三级标题</h3><p>小草偷偷地从土里钻出来,嫩嫩的,绿绿的。园子里,田野里,瞧去,一大片一大片满是的。</p><h4>四级标题</h4><p>坐着,躺着,打两个滚,踢几脚球,赛几趟跑,捉几回迷藏。风轻悄悄的,草软绵绵的。</p></body>
</html>
2. 文本修饰标签
(1) 强调标签是一对双标签:<strong></strong>、<em></em>,strong标签会对文本进行加粗,em标签会对文本进行斜体,strong的强调性比em更强。
(2) 上、下标文本标签都是一对双标签:<sup></sup>、<sub></sub>。
(3) 插入、删除文本标签都是一对双标签:<ins></ins>、<del></del>。
(4) 换行标签是单标签:<br>。
(5) 水平分割线标签是单标签:<hr>。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title></head><body><strong>strong标签强调的文字</strong><br><hr><em>em标签强调的文字</em><br><hr>3<sup>2</sup>+2<sup>2</sup>=13<br><hr><ins>100</ins><br><hr><del>200</del></body>
</html>
3. 图片标签
(1) 图片标签是单标签:<img src=“./img/scene_1.jpg” alt=“风景图片1”>
<img width="30%" height="30%" src="./img/scene_1.jpg" alt="风景图片1" title="风景图片1">
(2) 图片标签的属性:
width、height:图片的宽、高;
src:在.html文件中引入图片的地址;
alt:当图片加载出现问题或无法加载时,起提示作用;
title:提示图片的信息。
(3) 引入文件的路径:
相对路径:文件相对于引用文件去定义被引用文件的地址,.表示当前文件目录下,..表示上一级文件目录下。
当图片scene_1.jpg在index.html文件的上一级目录下时,引入这张图片的路径src=“../img/scene_1.jpg”。
绝对路径:文件相对于磁盘位置定位的地址,例如:C:\Users\19464\Desktop\img\scene_1
,或者文件在网络中的地址,例如:https://img-blog.csdnimg.cn/5c19201f59c9434eae99cc9ced43c0a8.png#pic_center。
4. 链接标签
(1) 链接标签是一对双标签:<a></a>。
(2) a标签的属性:
href:链接的地址;
target:链接的跳转方式,默认值_self是在当前页面打开,_blank是在新窗口打开链接。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title></head><body><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩官网</a><!--给图片加上链接--><a href="https://www.bilibili.com/"><img src="./img/scene_1.jpg" alt="风景图"></a></body>
</html>
给文本加上a标签,点击文本内容就会跳转到指定网址。不仅文本可以加上a标签,图片也可以,点击图片也会跳转到指定网址。
(3) base标签:单标签<base href=“” target=“”>,可以改变链接的默认跳转行为。
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>Document</title><!--点击网页中的所有链接都会在新窗口中打开--><base target="_blank"></head><body><a href="https://www.bilibili.com/">哔哩哔哩官网</a><a href="https://www.bilibili.com/">哔哩哔哩官网</a><a href="https://www.bilibili.com/">哔哩哔哩官网</a><a href="https://www.bilibili.com/"><img src="./img/scene_1.jpg" alt="风景图"></a></body>
</html>
(4) 跳转锚点:
在网页内部进行跳转,网页内部的一个点跳转到另一个点。
第一种方式:href属性值为#id名,跳转到带id属性的标签元素处;
第二种方式:href属性值为#name属性的属性值,跳转到带name属性的a标签处。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><a href="#p_1">段落1</a><a href="#p_2">段落2</a><p>文字段落</p><p>文字段落</p><p>文字段落</p><p id="p_1">文字段落1文字段落1文字段落1文字段落1文字段落1文字段落1</p><p>文字段落</p><p>文字段落</p><p>文字段落</p><a name="p_2"></a><p>文字段落</p>
</body>
</html>
5. 无序、有序列表与定义列表
ul、ol标签和li标签必须组合存在,而且li的父级标签必须是ul或者ol,不能是其它标签。有序列表用得比较少,无序列表经常可以代替有序列表实现列表功能。
(1) 无序列表:<ul></ul>
列表项:<li></li>
(2) 有序列表:<ol></ol>
列表项:<li></li>
(3) 定义列表:<dl></dl>、<dt></dt>、<dd></dd>。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!--正确语法--><ul><li>无序列表项1</li><li>无序列表项2</li><li>无序列表项3</li></ul><ol><li>有序列表项1</li><li>有序列表项2</li><li>有序列表项3</li></ol><dl><dt>HTML</dt><dd>HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。</dd><dt>CSS</dt><dd>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</dd></dl><!--错误语法--><ul><p><li></li></p></ul><ol><span><li></li></span></ol>
</body>
</html>
(4) 列表之间也可以相互嵌套,从而形成多层级的列表,二级导航就是使用多层级列表来实现的。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ul><li><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul></li><li><ul><li>列表项4</li><li>列表项5</li><li>列表项6</li> </ul></li></ul>
</body>
</html>
6. 表格、表单标签
(1) 表格外层容器:<table></table>,表格标题:<caption></caption>,表头:<th></th>,表格行:<tr></tr>,表格单元:<td></td>。
(2) 表格语义化标签:<tHead>、<tBody>、<tFood>,tBody和tFood在一个表中可以定义多个,但是tHead只能定义一次。
(3) 表格的属性:
border:表格边框;
cellpadding:单元格内空间;
cellspacing:单元格之间空间;
rowspan:合并一行的单元格;
colspan:合并一列的单元格;
align:水平对齐方式;
valign:竖直对齐方式。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><table><caption>员工工资表</caption><tr><th>编号</th><th>姓名</th><th>工资</th></tr><tr><td>1</td><td>张三</td><td>8000</td></tr><tr><td>2</td><td>李四</td><td>10000</td></tr></table>
</body>
</html>
(4) 表单外层容器:<form></form>,表单input标签:<input></input>;
input标签的type属性值:
type属性值 | 含义 |
---|---|
text | 文本框 |
password | 密码输入框 |
checkbox | 复选框 |
radio | 单选框 |
submit | 提交按钮 |
reset | 重置按钮 |
file | 上传文件 |
多行文本框:<textarea></textarea>;
下拉菜单:<select></select>,选项:<option></option>;
辅助表单:<label></label>。
表单的常用属性:
placeholder:给出输入框的提示信息;
checked:被选中;
name:表单名称;
disabled:用于复选框禁用某个选项;
action:表单提交数据的目的地;
method:表单发送数据的方式,get和post方式;
for:规定 label 与哪个表单元素绑定。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><form action="https://www.bilibili.com/" method="post"><label for="user">账号</label><input type="text" id="_user" placeholder="请输入账号"><br><label for="_password">密码</label><input type="password" id="_password" placeholder="请输入密码"><br><select><option>运动</option><option>音乐</option><option>电影</option></select></form>
</body>
</html>
7. div与span标签
(1) div(块)标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联,div标签是一个块级元素,每个div标签独占一行,换行是div标签固有的唯一格式表现。
(2) span(内联)标签被用来组合文档中的行内元素。如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body> <div style="background-color: red;">这是一个块级元素</div><span style="background-color: blue;">这是一个内联元素</span>
</body>
</html>
HTML的基本标签及属性相关推荐
- 访问HTML标签的属性1
<html> <head> <title>访问HTML标签的属性</title> <script language="JavaScrip ...
- html width字符数,HTML pre标签 width 属性
HTML 标签 width 属性 定义和用法 HTML5 不支持 width 属性.请使用 CSS 代替. 在 HTML 4.01 中, 的 width 属性 已废弃. width 属性规定每行的最大 ...
- Spring中bean标签的属性和值:
Spring中bean标签的属性和值: <bean name="user" class="com.pojo.User" init-method=" ...
- video标签poster属性在安卓微信中不生效问题解决
video标签poster属性在安卓微信中不生效问题解决 参考文章: (1)video标签poster属性在安卓微信中不生效问题解决 (2)https://www.cnblogs.com/shicha ...
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构 网页的内容 二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
- html5标签及属性大全,HTML5 标签 和属性 列表.pdf
HTML5 标签 和属性 列表 按字母顺序排列的标签列表 4: 指在HTML 4.01 中定义了该 元素 标签 描述 5: 指在HTML 5 中定义了该元 素 定义注释 4 5 定义文档类型 4 5 ...
- QTP的那些事---通过html标签的属性获取对象(类似onclick的属性)
看到这个问题,有的人可能觉得就是通过DOM获取呗.我承认确实是通过DOM获取,唯一不同的是我通过的是html中标签的属性获取的. 代码如下: On error resume next btv=&quo ...
- java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动 昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
- python爬虫提取a标签_Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
一.Tag(标签)对象 1.Tag对象与XML或HTML原生文档中的tag相同. from bs4 import BeautifulSoup soup = BeautifulSoup('Extreme ...
最新文章
- @Controller与@RestController区别
- 计划策略 : 40 / 20 测试
- 六十九、Springboot整合JDBC,连接Mysql
- Testner自动化测试平台免费开放啦
- java XML解析防止外部实体注入
- 甲子光年 | 为什么知识图谱终于火了?
- linux解释名词shell环境,Linux 定时任务
- 20200916:leetcode34周双周赛题解
- HTML5实现扫描识别二维码/生成二维码
- 2021 年全球知名开源项目
- java学习日记-基础-列出2~100内的素数
- SSO单点登录解决方案[转载]
- 数据治理之数据质量管理
- 嵌入式FTP服务器的移植与配置:VSF…
- 操作系统-3.假设某多道程序设计系统中有供用户使用的内存100KB,打印机1台。系统采用可变分区方式管理内存:对打印机采用静态分配,并假设输入输出操作的时间忽略不计;采用最短剩余时间优先的进程调度算法
- C#数据Encrypt加密Encrypt解密的算法使用
- python 微信公众号开发[1] 后台服务器端配置与公众号开发配置
- 当前线程运行完毕,再运行后续逻辑
- 每日刷题记录 (十五)
- 解决Java运行时错误For input string:问题