HTML常用基础标签，前端从入门到精通
myzbx 2024-12-23 12:22 22 浏览
首先，我们来理解一下一个网页的基本组成
代码如下
一个网页是有许许多多的标签对组成的，即开始标签-结束标签，都是成对出现（当然我们后面会说的还存在单标签，表示自闭合标签，例如：<br />）
对上述的标签先来解释一下
html------------超文本标记语言，浏览器识别的语言，主要负责页面的内容和结构
head------------标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
body------------元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
HTML常用基础标签用法及实例
1. <!--注释-->
2. <!--DOCTYPE 声明文档类型-->
3. <!--a--><a href="http://www.baidu.com/">百度一下</a></br><!--超链接标签-->
4. <!--address--><address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息.-->
</address>
5. <!--5.article <article> 标签规定独立的自包含内容。-->
<article>
<h1>百度</h1>
<p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。</p>
</article>
6. <!--6.aside <aside> 标签定义其所处内容之外的内容。-->
<p>123123</p>
<aside>
<h1>文本之外的内容</h1>
<p>我也是文本之外的内容</p>
</aside>
7.<!-- audio video-- <audio> 标签定义声音，比如音乐或其他音频流。
<audio src="/i/horse.ogg" controls="controls>
</audio>
8.<!--b 文本加粗-->
<p>普通文本--<b>粗体文本</b></p>
9.<!--big -->
<big>大号字体</big><br>
10.<!-- body body 主体内容-->
11.<!-- br 给文本换行-->
12.<!--button <bubtton> 标签定义一个按钮。-->
<button type="button">点击领取</button>
13.<!--center 对其所包括的文本进行水平居中。-->
14.<!--dl dd dt <dd> 在定义列表中定义条目的定义部分。-->
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
15.<!--del ins <del>定义文档中已被删除的文本。 <ins> 标签定义已经被插入文档中的文本。-->
<p>你叫<del>张3</del><ins>文字</ins>吗？</p>
16.<!--div p h1-h6 div是块标签 p是段落标签 h1-h6是标题标签根据h后面数值调整大小-->
17.<!--em span i strong <em>把文本定义为强调的内容。<span> 标签被用来组合文档中的行内元素。
<i> 标签显示斜体文本效果。<strong>把文本定义为语气更强的强调的内容。
-->
<em>强调文本内容</em>
<p><span>组合文档中的行内元素</span>你好啊</p>
<i>斜体文本</i><br>
<stong>内容重要</strong>
18.<!--footer nav <footer> 标签定义文档或节的页脚。<nav> 标签定义导航链接的部分.-->
<footer>
<p>联系邮箱：<a >href="1758539486@qq.com">1758539486@qq.com</a></p>
</footer>
<nav>
<a href="http://www.baidu.com">百度</a>|
<a href="http://www.douyu.com">斗鱼</a>
</nav>
19.<!-iframe iframe 元素会创建包含另外一个文档的内联框架（即行内框架）-->
20.<!--hr html-- <hr>文本分割线 <html>根文件-->
21.<!--img input label-- img 元素向网页中嵌入一幅图像。
<input>--表单标签（一共八种类型） 如下所示：
<input type="radio" name=""value="单选"/><input type="checkbox" name=""value="选择"/><input type="submit" name=""value="提交"/><input type="button" name=""value="按钮"/><input type="password" name=""value="密码"/><input type="text" name=""value="文本"/><input type="reset" name=""value="清空"/><input type="hidden" name=""value="隐藏"/><label> 标签为 input 元素定义标注（标记）。
-->
<img src="img/Advertisement_03-3.jpg" alt="" /><br>
<label for="男">男</label>
<input type="radio" name="sex" id="男">
<input type="submit" name="提交" >
22.<!--ol ul li <ol>有序列表 <ul>无序列表 <li>列表项目-->
23.<!--link script <link>标签最常见的用途是链接样式表。<script> 标签用于定义客户端脚本，比如 JavaScript。-->
24.<!--select option <select> 元素可创建单选或多选菜单。<select> 元素中的 <option> 标签用于定义列表中的可用选项。-->
<select name="">
<option value="">请选择</option>
<option value="">选项一</option>
<option value="">选项二</option>
<option value="">选项三</option>
<option value="">选项四</option>
</select>
25.<!--textarea <textarea> 标签定义多行的文本输入控件。-->
<textarea></textarea>
resize禁止拉伸文本框
outline取消文本框选中的颜色
Text-indent:2em首行缩进两个字符
希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。
相关推荐
- 斐波那契时钟:据说智商太低的人看不懂，你敢来挑战吗?
-
如果你在一个公共场合，看到了桌上亮着的东西，你会以为它是什么？小夜灯？恭喜你，回答错误。它是Fibonacci钟，专为追求与众不同的“怪胎们”准备。它外表精美，甚至看不出这是一个钟，但它真的是个钟，只...
- 曾都区文峰学校二年级数学组开展钟表制作主题活动
-
为了使学生更加直观地认识钟表、感知钟表，曾都区文峰学校二年级数学组开展了“小钟面大创意”钟表制作主题活动。孩子们大胆设计、精心制作，每一个作品都充满了创意与童趣。 滴答滴答滴答，小小时钟在说话。它都...
- 不能更酷!游戏机改造的报时钟表（游戏机能改成正常机吗）
-
当家里的游戏机逐渐过时的时候，你会把它怎么办？无论是卖掉还是封存珍藏都是不错的办法，不过Rurue0111有更酷的主意：将PlayStation改造成时钟。初代PS正脸有一个圆圆的硕大光驱盒盖，别...
- 计量小知识来了!古代没有钟表，夜晚是如何计算时间的?
-
古人把一昼夜分为十二个时辰，用十二地支名加上“时”字表示。即子时、丑时、寅时、卯时、辰时、巳时、午时、未时、申时、酉时、戌时、亥时。每一时刻相当于今天的两个小时。这十二时辰与现今计时法的关系是：子时－...
- 「爱」的挂钟（爱的时钟）
-
鸳鸯和天鹅算是鸟类中最会秀恩爱的了吧，以它们为元素做设计也应该是件很优雅的事。台湾的好事（haoshi）工作室成立于2009年。设计师坚持纯洁与和平的设计理念，将生活中抽象的好事物以艺术化的形式呈...
- 亚洲最大欧米茄时钟亮相北京王府井百货 钟面直径约7.9米
-
亚洲最大欧米茄(OMEGA)时钟正式亮相北京地标性建筑王府井百货（专题阅读）大楼。作为迄今为止亚洲最大的欧米茄时钟，甫一亮相即吸引到众多游客的目光。至此，位于北京最繁华地带的王府井大街将被欧米茄时钟...
- 初一数学难点“线段与角”，老师手把手教你画图，保证学会
-
期中考试已过去，学生们的学习进了一个新的阶段，每个科目的老师又开始兢兢业业开始了他们的讲授之路。现以初一数学为例，具体说说现阶段的数学学习什么？如何去高效学习？在现阶段，学生们开始学习了一些简单的几何...
- 科技感十足的悬浮时钟（悬浮 时钟）
-
说起来磁悬浮已经不是什么新鲜事儿了，自从有了磁悬浮列车，好像所有的东西都可以跟磁悬浮扯上关系。一个来自瑞典的设计团队FLYTE设计了一款叫做STORY的时钟，利用磁悬浮技术，让时钟的指针飞了起来~▽设...
- 一上数学 第七单元 认识钟表 逐字稿
-
(bluehouse456全文整理）同学们大家好，老师，这里准备了一些图片，你知道是什么吗？是钟表。钟表在我们的生活中经常遇到，你知道钟表有什么作用吗？是的，钟表可以帮助人们计时安排一天的工作和学习...
- 人教版数学一年级上册第七单元《认识钟表》知识要点:
-
一、认识钟面1.钟面结构钟面上有12个数字，按顺时针方向排列，代表1到12时。分针：又细又长的指针，转动较快，指示分钟。时针：又粗又短的指针，转动较慢，指示小时。指针转动方向为顺时针（从左到右）。2...
- 浔阳小学一年级数学组举行钟表制作活动
-
九江新闻网讯（伍巧红）12月23日，浔阳小学一年级数学组组织学生进行制作钟表的活动。孩子们利用双休日与父母共同参与了这项活动。这次钟面设计手工制作活动，属于数学“设计与应用”领域。钟表与学生的生活息息...
- 时钟指针夹角计算公式（时钟夹角万能公式）
-
关于时钟指针夹角问题，小学应该有一定的认识，一些特殊情况下的夹角，学生能顺利求出。在初一数学《角》的教学中，我们对夹角问题会有更深入的了解。设定钟面时间为a时b分，此时，时针与分针夹角是多少呢？有没有...
- 雨城区四小教育集团汉碑校区一年级数学组开展“创意钟面”制作比赛
-
四川新闻网雅安5月6日讯为丰富学生的课余生活，培养创新思维和动手操作能力，复习巩固新学的《钟面的认识》，使学生进一步掌握“整时、几时半、大约几时”等知识点。近日，雨城区四小教育集团汉碑校区一年级数学...
- 一大波奇奇怪怪的钟表来袭，你见过几个?
-
别再问时间都去哪了，其实时间都去了设计师的脑洞里……No.1音乐时钟DINN意大利设计师AlessandroZambelli为钟表品牌Diamantini&Domeniconi设...
- 瑞士国铁钟表Mondaine:分秒不差的精准，穿越七十年的经典
-
在瑞士，时间不仅是数字，更是一种艺术。当你踏入瑞士任何一个火车站，目光一定会被站台上那简洁优雅的挂钟吸引——纯白的钟面、清晰的黑色刻度，再配上一根醒目的红色圆头秒针，仿佛在无声地诉说着瑞士人对精准与美...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)