html常用标签认识与练习（二）

最新推荐文章于 2022-07-25 12:31:43 发布
最新推荐文章于 2022-07-25 12:31:43 发布
阅读量133 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bangyou2019/article/details/88305567
版权

一、超链接和锚文本

定义超链接用<a>标签，可以为其制定id、class、style等属性，指定onclick各种事件属性，不会自动换行

<a>标签里面几个重要的属性：

href 指定超链接所关联的另一个资源

target 指定打开另外一个资源的方式，包括_self、_blank、_top、_parent

media 指定目标URL所引用的媒体类型，默认值为all

eg:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<title>a标签练习</title>

</head>

<body>

<!--在本窗口打开另外一个资源-->

<a href="https://www.baidu.com" target="_self">百度</a><br />

<!--在新窗口打开另外一个资源-->

<a href="https://www.so.com" tarhet="_blank">360搜索</a><br />

<!--为图像增加新链接-->

<a  href="https://www.baidu.com"  target="_blank"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1551951447685&di=4af13522eb14647f312117c892e76f4c&imgtype=0&src=http%3A%2F%2Fwww.xiangshu.com%2FUploadFiles%2FDay_190218%2F64_260641_2f3046a240d02c2.jpg" / alt="梦幻花世界"></a><br />

<!--基于相对路径指定另外一个资源-->

<a href="amp.html" target="_blank"></a><br />

</body>

</html>

 

二、列表相关元素

列表常用元素

<ul>定义无序列表

<ol>定义有序列表

<li>定义列表项目

<dl>也用于定义列表，该元素只能包含<dt><dd>

<dt>定义标题列表项

<dd>定义普通列表项

 

eg:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>列表元素应用</title>

</head>

<body>

<!--定义无序列表-->

<ul>

  <li>语文</li>

  <li>数学</li>

  <li>英语</li>

</ul>

<!--定义有序列表-->

<ol type="I">

  <li>上坡起步</li>

  <li>侧方位停车</li>

  <li>倒车入库</li>

</ol>

<!--定义列表-->

<dl>

  <dt>常用的程序语言</dt>

  <dd>C语言</dd>

  <dd>JAVA</dd>

  <dd>PHP</dd>

   <dd>PYTHON</dd>

  <dt>常用的前端框架</dt>

  <dd>jquery</dd>

  <dd>node.js</dd>

  <dd>bootstrap</dd>

</dl>

</body>

</html>

 

三、图像相关元素

图像元素用<img>

常用的元素属性：

src图片的路径

alt图片的描述

height图片的高度

width图片的宽度

<map>定义图片映射

<area>定义图片映射的区域

其中area常用属性包括

1、shape指定哪种区域，默认是"rect"方形区域，还可以指定"cicle"圆形、"poly"多边形

2、coords指定坐标值

3、href指定区域所链接的资源

4、alt指定一段文本，该文本作为该图片的提示信息

5、target指定资源的打开方式

6、media指定目标URL所引用媒体类型

 

eg:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content=" text/html;charset=utf-8" />

<title>图像相关元素</title>

</head>

<body>

<img src="https://www.zqnhb.com/uploads/190116/1-1Z116124623211.jpg" alt="甲醛治理"  target="_blank" /><br />

<!--指定图片的宽高-->

<img src="https://www.zqnhb.com/uploads/190116/1-1Z116124623211.jpg" alt="甲醛治理" target="_blank" height="60%" width="60%" /><br />

<!--定义图片，使用指定的图片映射-->

<img src="https://www.zqnhb.com/uploads/190116/1-1Z116124623211.jpg" alt="甲醛治理" target="_blank" usemap="#test" /><br />

<!--定义图片映射-->

<map name="test" id="test">

  <area shape="cicle" coords="55,68,34" href="https://www.zqnhb.com" alt="甲醛治理"  />

  <area shape="poly" coords="18,26,59,37,40,17" href="https://www.zqnhb.com" alt="除甲醛"  />

</map>

</body>

</html>

HTML常用标签
weixin_48668600的博客
07-28 871
- 排版标签 - 文本格式化标签 - 图像标签 - 链接 - 相对路径，绝对路径的使用
HTML标签的认识和练习
weixin_68393415的博客
03-30 5001
学习目标： 一、能够知道常见HTML标签的作用 二、根据测试流程对于黑马头条登录需求进行分析 三、能够对于登录模板提取测试点和设计用例 四、能够使用工具进行记录缺陷 学习内容： 一、HTML介绍 1、介绍 2、html骨架标签 重点：页面的内容必须在body编写；html为根标签，所有的标签必须在根标签中；head为头部标签，一般放在title和搜索相关知识。 3、编写HTML的工具 hbuilder工具初始化 3.1 新建web项目 3.2新建目.......
CSS学习笔记-04 a标签-导航练习
weixin_39037804的博客
08-19 396
个人练习，各位大神勿笑 。。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name...
Html入门练习
热门推荐
道亦无名
06-28 2万+
开始学些Html的时候主要进行一些简单的静态网页的处理： 1、HTML 标题 HTML 标题（Heading）是通过 - 等标签进行定义的。 2、HTML 段落 HTML 段落是通过 标签进行定义的。 3、HTML 链接 HTML 链接是通过 标签进行定义的。 4、HTML 图像 HTML 图像是通过 标签进行定义的。 5、HTML 元素 HTML 元素指的是从开始标签
html常用标签认识与练习（一）
邦优互联网技术学习之路
03-06 367
一、文本格式化元素 常用的标签： &lt;b&gt; 定义粗体文本 &lt;i&gt;定义斜体 &lt;em&gt;定义强调文本 &lt;strong&gt;定义粗体文本与&lt;b&gt;标签基本相同 &lt;small&gt;定义小号字体文本 &lt;sup&gt;定义上标文本 &lt;sub&gt;定义下标文本 &lt;bdo&gt;定义文
html常用标签有什么区别,HTML常用标签
weixin_35903223的博客
06-18 468
1.HTML常用标签首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。1.1 排版标签排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。1)标题标签h (熟记)单词缩写： head 头部. 标题 ...
初步认识HTML+表单标签练习
weixin_64449292的博客
07-25 615
适合初学者，内容比较基础。学好表单标签非常重要。
认识html标签,认识HTML代码
weixin_35843096的博客
06-26 126
博客入门--认识HTML代码HTML是一种用来制作超文本文档的简单标记语言，与普通文档不同，它可以加入文字、图片、声音、动画、影视等内容，可以从一个文件跳转到另一个文件，与世界各地主机的文件连接，通过WWW浏览器显示出效果。它的特点是用一对小尖括弧(“")作为标签。所谓标签，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“”来表示。而且大部份是成对的双标签，即首标签和尾标签。HTML...
WEB标准&认识HTML&HTML常用标签
Driedmango的博客
04-03 946
typora-copy-images-to: media 第01阶段.web基础：html-day01笔记-01-前言&WEB标准&认识HTML&HTML常用标签 一、前言 1. 基础班学习目标 目标： 能根据psd文件（psd文件，其实就是一张类似于图片的格式，这个呢是用ps做的，也就叫做源文件）， 用HTML+CSS 布局出符合W3C规范的网页（也就是说，我们...
前端基础——HTML常用标签
hewenqing
03-02 2087
学习目标 理解： 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径，绝对路径的使用 1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。 HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，可以查下手册就可以。 1...
python全栈开发第一天（HTML认识，HTML常用标签）
weixin_45410462的博客
08-13 166
第一天HTML认识1、HTML简介2、语法介绍HTML常用标签1、h1-h6 标题标签2、p 段落标签3、常见的实体字符4、i 标签 b标签 em 标签 strong标签 u标签5、br hr6、img 图片标签7、列表标签8、a 标签超链接9.表格标签10、form ：声明一个表单域 HTML认识 1、HTML简介 HTML是用来做网页 HTML:Herp Text MarkUp L...
前端基础第一天：HTML常用标签知识点
m0_46597922的博客
06-12 1159
学习目标 理解： 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径，绝对路径的使用 1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言，我们学的是结构，就只写HTML标签，认识标签就可以了。 不会再给结构标签指定样式了。 HTML标签有很多，这里我们学习最为常用的，后面有些较少用的，我们可以查下手册就可以了。 1.1 排版标签 排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最常用的标签。 1）标题标签h (熟记) 单词缩写： head
Web前端：HTML标签——Visual Studio Code
m0_58822294的博客
06-01 503
【前提】 掌握HTML结构 掌握HTML常用标签的使用 【知识】 【要求】 使用HTML标签完成《糖醋排骨》菜谱练习 使用HTML标签完成《楚乔传》网页练习 扩展：点击集数跳转到详细介绍 【效果】 《糖醋排骨》菜谱练习效果图如下： 《楚乔传》练习效果图如下： 【知识补充】 ...
从零开始学WEB前端——网页的骨架——HTML实战练习
m0_67403143的博客
03-09 249
??项目介绍 先做个自我介绍，本人是一个没人写前端所以就自学前端的后端程序员??。在此项目中我会和大家一起从零基础开始学习前端，从后端程序员的视角来看前端，受限于作者的水平本项目暂时只会更新到前端框架VUE，不会涉及node.js。该项目适合零基础的小白或者和我一样开发网站没人写前端所以自学前端的后端程序员??。 该项目的学习顺序是按照我自己学习时总结出来的，其中的每个知识点都是我认真去理解的，同时也查了很多的资料，所有的参考资料我都放在了文章末尾。尊重开源，尊重知识产权。每一个案例我都亲手写过并觉得不错才
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存
最新发布
09-15
Pytorch文本分类(imdb数据集)，包含DataLoader数据加载，最优模型保存_Pytorch-imdb-classification
5001-微信小程序家庭记账本的设计与实现+ssm（源码+数据库+lun文）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
5334-微信小程序同城交易小程序（源码+数据库）.zip
09-15
本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。本系统主要针对计算机相关专业的正在做毕业设计的学生和需要项目实战练习的学习者，可作为毕业设计、课程设计、期末大作业。
iOS一行代码集成空白页面占位图(无数据、无网络占位图)_emptyView-empty_set_LYEmptyView.zip
09-15
iOS一行代码集成空白页面占位图(无数据、无网络占位图)_emptyView-empty_set_LYEmptyView
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值