前端—HTML中常见标签的使用
2024-06-28 08:56:25
HTML
1.常见标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>练习</title><link rel="stylesheet" href="../css/pra.css"><!--用来写css文件地址的,rel表明文档的样式表-->
</head>
<body>
<!--1.元素由于开始标签，内容，结束标签这个三部分组成-->
<!--段落标签--><p>我的猫咪起<strong>爆</strong></p>
<!--em标签是让字体变为斜体--><em>漂亮了</em><!--2.块级元素和嵌套元素，p就是一个块级元素-->em>第一</em><em>第二</em><em>第三</em><!--结果就在一行--><p>第四</p><p>第五</p><p>第六</p><!--每一个都会自己换行显示--><!--3.空元素，就是只有开始标签的--><img src=""><!--4.属性href:超链接的web地址-->
<!--<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>--><!--5.布尔属性-->
<!-- 使用disabled属性来防止终端用户输入文本到输入框中 --><input type="text" disabled>
<!-- 下面这个输入框没有disabled属性，所以用户可以向其中输入 --><input type="text"><!--6.练习--><h1>经典回忆</h1><p>相思无用，惟别而已。别期若有定，千般煎熬又何如？莫道黯然销魂，何处<strong>柳暗花明</strong>？<br>——《神雕侠侣》</p><img src="../image/q.jpg"><!--这里是图片的地址，可以写自己的地址，或者注释掉-->
<!--7.标题标签-->
<h1>静夜思</h1>
<p>床前明月光 疑是地上霜</p>
<p>举头望明月 低头思故乡</p><!--8.<span>元素它没有语义。当您想要对它用CSS（或者JS）时，您可以用它包裹内容，且不需要附加任何额外的意义（在未来的课程中你会发现更多这类元素）。-->
<h1>这是一个顶级标题</h1>
<span style="font-size: 32px; margin: 21px 0;">这是顶级标题吗？</span><!--9.列表-->
<ul><li>列表项1</li><li>列表项2</li>
</ul>
<ol><li>列表项1</li><li>列表项2</li>
</ol>
<ol><li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li><li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li><li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li><li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。<ul><li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li><li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li></ul></li>
</ol>
<dl><dt>培根</dt><dd>整个世界的粘合剂。</dd><dt>鸡蛋</dt><dd>一块蛋糕的粘合剂。</dd><dt>咖啡</dt><dd>一种浅棕色的饮料。</dd><dd>可以在清晨带来活力。</dd>
</dl><!--10.斜体字，粗体字，下划线-->
<i>咖啡</i>
<b>切面包</b>
<u>奶茶</u><!--11.超链接-->
<p><a href="https://www.qq.com/">腾讯</a></p>
<!--标记联系方式-->
<!-- <address>-->
<!-- <a href="mail:qq.com">qq.conm</a><br>-->
<!-- <a href="phone">1212315151</a>-->
<!-- </address> --><!--12.标记时间和日期-->
<time datetime="2016-01-20">20 January 2016</time><!--13.<header> 页眉-->
<header><h1>Cute Puppies Express!</h1>
</header>
<main><p>I love beagles <em>so</em> much! Like, really, a lot. They’re adorable and their ears are so, so snuggly soft!</p>
</main>
<!--14.<nav> 导航栏 -->
<nav><ol><li>主页</li><li>注册页面</li><li>登录页面</li></ol>
</nav>
<!--15.<main> 主内容 ,主内容中还可以有各种各样的内容前端<article>,<section>,<div>-->
<!--16.<aside> 侧边栏 经常嵌套在<main>中--><p>主要内容</p><aside><p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p></aside>
<!--17.<footer> 页脚-->
<article><h1>How to be a wizard</h1><ol><li>Grow a long, majestic beard.</li><li>Wear a tall, pointed hat.</li><li>Have I mentioned the beard?</li></ol><footer><p>© 2018 Gandalf</p></footer>
</article>
<!--13到17的结合-->
<main> <!-- 网页主体内容 --><article><!-- 此处包含一个 article（一篇文章），内容略…… --></article><aside> <!-- 侧边栏在主内容右侧 --><h2>相关链接</h2><ul><li><a href="#">这是一个超链接</a></li><!-- 侧边栏有n个超链接，略略略…… --></ul></aside>
</main><footer> <!-- 本站所有网页的统一页脚 --><p>© 2050 某某保留所有权利</p>
</footer><!--18.<div>块级无语义元素-->
<div class="shopping-cart"><h2>购物车</h2><ul><li><p><a href=""><strong>银耳环</strong></a>:$99.95.</p></li><li>...</li></ul><p>售价：$237.89</p>
</div><!--19.换行<br>和水平分割线<hr>-->
<em>好好学习</em><em>天天向上</em>
<em>好好学习</em><br><em>天天向上</em>
<em>好好学习</em><hr><em>天天向上</em>
</body>
</html>
2.运行结果
- 访问地址是按照自己放的目录来定的
前端—HTML中常见标签的使用相关推荐
- 前端面试中常见的算法问题
虽说我们很多时候前端很少有机会接触到算法.大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一方面.实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的.如果将来当我们面对较为复杂 ...
- 前端开发中常见的图片格式
JPEG,GIF,PNG,最流行的是 jpeg 格式,可以把文件压缩到最小在 ps 以 jpeg 格式存储时,提供 11 级压缩级别. 网页中常见的图片格式有: 1.GIF图片格式,GIF是一种调色板 ...
- 前端开发中常见的浏览器兼容性问题及解决方案
文章目录 前言 一.浏览器四大内核 二.主流兼容问题 (一)浏览器引擎 (二)兼容问题的原因 (三) 为什么浏览器会存在兼容性问题? (四)处理兼容问题的思路 1. 要不要做? 2. 做到什么程度? ...
- HTML中常见标签的英文解释及说明
HTML标签 英文全称 中文释义 a Anchor 锚 alt alter 替用(一般是图片显示不出的提示) b Bold 粗体(文本) bdo Direction of Text Display 文 ...
- MyBatis中常见标签的使用
1. <collection>标签 例如有两张表:user表 role表 那么我们再写实体类User .Role 的对应关系是,一个用户有多个角色,因此,在 User 的实体中加入一个 R ...
- 前端面试中常见的ES6新特性(一)
文章目录 一.let 关键字 特性 let创建变量代码示例: 不允许重复声明: 块儿级作用域(局部变量): 不存在变量提升: 不影响作用域链: 应用场景: 二.const 关键字 特性 const创建 ...
- 前端css中常见的-moz-,-webkit-,-o-分别是什么？
-moz-,-webkit-,-o-这三个是厂商前缀 不同浏览的厂商,因为不同浏览器有不同的标准, 所以为了兼容性,需要把常用的浏览器对应的厂商前缀加上. 所以四个属性代表的是一个意思. -moz- ...
- 前端开发中常见的鼠标事件
1.onclick 鼠标点击左键触发 2.onmouseover 鼠标经过触发 3.onmouseout 鼠标离开触发 4.onfocus 获得鼠标焦点触发 5.onblur 失去鼠标焦点触发 6.o ...
- 前端~html~HTML零基础（一） ~HTML常见标签/如何开发一个html文件/在网页查看源码
文章目录 引入-什么是HTML HTML基础 html标签 html元素 html开发工具 html文件基本结构/网页结构 HTML常见标签 注释标签 标题标签 段落标签 换行标签 格式化标签 图片标 ...
最新文章
- nacos 配置动态刷新_nacos配置中心修改后刷新
- 17 博客后台富文本编辑
- 查看电脑python虚拟环境-python虚拟环境--virtualenv
- jquery下拉分页
- 《狂人日记》金句摘抄（一）
- STL源码剖析 5中迭代器型别
- scrapy抓取淘宝女郎
- 计算机操作安全协议,安全协议操作语义模型研究及应用-计算机软件与理论专业论文.docx...
- 【转】Fresco之强大之余的痛楚
- Swagger注解-@ApiImplicitParams 和 @ApiImplicitParam
- 基于opencv，C++实现中值滤波器
- 斗鱼实名认证 mysql_斗鱼新人主播怎么进行实名认证 斗鱼直播实名认证失败怎么办...
- 语音转写录音转文字哪种更好
- 自举电路工作原理分析
- 去商场淘打折商品时，计算打折以后的价钱是件颇费脑子的事情。例如原价 ￥988，标明打 7 折，则折扣价应该是 ￥988 x 70% = ￥691.60。本题就请你写个程序替客户计算折扣价。
- 台风怎么看内存颗粒_【评测|内存】美光HDIE、GDIE超频测试
- Designing Machine Learning Systems with Python
- Apache Pulsar 首场亚洲峰会议题出炉：聚焦实战案例，火热报名中
- Unity3D脚本中文系列教程(八)
- 报告：ICO项目2019年第一季度融资总额仅1.18亿美金，相较于2018年同比下降逾58倍...