沃土前端系列 - HTML常用标签
html是什么
HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。
那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。
第一个网页Hello world
打开记事本,写上Hello world,然后保存为index.html,接着用浏览器把index.html打开,就看到了
Hello world,这就是一个最简单的网页。
认识标签
- 什么是标签（元素）
<!-- DOCTYPE 这个文档类型，一开始无需深究 -->
<!DOCTYPE html>
<html>
<!-- 网页的一些设置放在head -->
<head>
<!-- 设置字符集 -->
<meta charset="UTF-8">
<!-- 设置标题-->
<title>demo</title>
</head>
<!-- 看得见的部分放在body -->
<body>
hello world
</body>
</html>html、body、head、meta都是标签，不同的标签作用也不同
常用标签一
- 标题标签H1~H6
- 分割线标签 hr
- div标签
- 段落p标签
- span标签
- 块级标签和行内标签
- 换行标签 br
- 图片标签
- 列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 标题标签 -->
<h1>这是h1标签</h1>
<h2>这是h1标签</h2>
<h3>这是h1标签</h3>
<h4>这是h1标签</h4>
<h5>这是h1标签</h5>
<h6>这是h1标签</h6>
<!--分割线标签-->
<hr />
<!-- div标签 -->
<div>
这是div标签
</div>
<!-- 段落标签 -->
<p>
这是段落标签，文字的上下会有间隔
</p>
<!-- span标签 -->
<span>
第一个span标签
</span>
<span>
第二个span标签
</span>
<!-- 换行标签 -->
<br />
<!-- 图片标签 -->
<img src="tupian.jpg"/>
<!-- 列表标签，包括有序列表和无序列表 -->
<h3>无序列表</h3>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li>内容5</li>
</ul>
<h3>有序列表</h3>
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ol>
</body>
</html>
常用标签二：表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- border加上边框，width设置宽度 -->
<table border width="500">
<!-- thead 表头 -->
<thead>
<!-- tr 行 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<!-- tbody 表的主体内容 -->
<tbody>
<!-- tr行 -->
<tr>
<!-- td列 -->
<td>楚留香</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>胡铁花</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>范冰冰</td>
<td>30</td>
<td>女</td>
</tr>
</tbody>
</table>
</body>
</html>常用标签三：表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- form表单标签，用来包各种表单相关的元素 -->
<form action="">
<!-- 输入元素 -->
<!-- 文本域type为text，value是默认值，placeholder为提示语 -->
<input type="text" value="" placeholder="请输入文字"/><br />
<!-- 密码框type=password -->
<input type="password" value="" placeholder="请输入密码"/><br />
<!-- 单选按钮type=radio，必须拥有相同的name -->
男：<input type="radio" name="sex" value="" />
女：<input type="radio" name="sex" value="" /><br />
<!-- 复选框checkbox -->
足球：<input type="checkbox" name="ball" value="" />
篮球：<input type="checkbox" name="ball" value="" />
羽毛球球：<input type="checkbox" name="ball" value="" />
乒乓球：<input type="checkbox" name="ball" value="" /><br />
<!-- 按钮 -->
<input type="button" name="" id="" value="按钮" /><br />
<!-- 提交按钮 -->
<input type="submit" name="" id="" value="提交" />
<!--重置按钮 -->
<input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>常用标签四：链接标签、下拉列表标签和iframe标签
链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p {
width: 300px;
line-height: 3;
}
</style>
</head>
<body>
<a href="helloWorld.html">hello world</a><br />
<a href="https://www.baidu.com">百度</a><br />
<!-- 打开新页面 -->
<a href="https://www.sina.com" target="_blank">新浪</a><br />
<a href="#aaa">锚点aaa</a>
<p>
HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。 那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。
</p>
<p>
HTML是Hyper Text Markup Language的缩写，中文的意思是“超文本标记语言”，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。 那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。
</p>
<p id="aaa">
这是个锚点
</p>
<a href="#">回顶部</a>
<p>
那什么是超文本呢？所谓超文本，就是指图像、视频、动画、声音、表格、链接等多媒体的内容。 HTML是网页的基本描述语言，由Tim Berners-Lee在1990年提出，其目的是方便地把一台电脑中的文本或图形，与另一台电脑中的文本或图形联系在一体，形成一个有机的整体，让人们不必考虑这些信息是在当前的电脑上，还是在网络上的其他电脑上。 HTML 不是一种编程语言，而是一种描述性的标记语言 (markup language)，它使用标签来描述网页，负责将网页内容进行格式化，使内容更具逻辑性。 HTML文档不需要编译，直接由浏览器解释执行，浏览器（IE、FireFox、Chrome、Opera、Safari、UC等）软件知道HTML的语法，知道如何解释HTML文档。目前互联网上的绝大部分网页，都是使用HTML编写的。
</p>
</body>
</html>下拉列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select name="">
<!-- 列表选项 -->
<option value="xigua">西瓜</option>
<option value="apple">苹果</option>
<option value="xueli">雪梨</option>
<option value="banner">香蕉</option>
</select>
</body>
</html>
iframe标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="https://www.baidu.com" width="800" height="600"></iframe>
</body>
</html>
常用标签五：html5新标签
- html5是什么
- Html5常用新增标签
- header头部标签
- footer底部标签
- nav导航标签
- audio音频标签
- video视频标签
- canvas画布标签
- 其他标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 头部标签 -->
<header>
<!-- 导航标签 -->
<nav>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sina.com" target="_blank">新浪</a>
<a href="https://www.qq.com" target="_blank">腾讯</a>
</nav>
</header>
<hr />
<!-- input type=tel移动端点击输入框，弹出的数字键盘 -->
<input type="tel" value="" placeholder="请输入手机号码" /><br />
<!-- 音频 -->
<audio src="jiaobu.mp3" controls="controls"></audio><br />
<!-- 视频 -->
<video width="800" height="400" controls="controls">
<source src="zhanlang.mp4" type="video/mp4"></source>
</video><br />
<!-- 画布 -->
<canvas id="myCanvas" width="200" height="100"></canvas>
<hr />
<footer>
底部标签
</footer>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0, 0, 150, 75);
</script>
</body>
</html>更多标签
更多标签请访问：
沃土前端系列 - HTML常用标签的更多相关文章
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- PHPCMS快速建站系列之常用标签
<span class="Nmore"><a href="/index.php?m=content&c=index&a=lists&am ...
- 2020年12月-第01阶段-前端基础-HTML常用标签
1. HTML常用标签 首先 HTML和CSS是两种完全不同的语言,我们学的是结构,就只写HTML标签,认识标签就可以了. 不会再给结构标签指定样式了. HTML标签有很多,这里我们学习最为常用的,后 ...
- 谷哥的小弟学前端(01)——HTML常用标签（1）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- 谷哥的小弟学前端(02)——HTML常用标签（2）
探索Android软键盘的疑难杂症 深入探讨Android异步精髓Handler 详解Android主流框架不可或缺的基石 站在源码的肩膀上全解Scroller工作机制 Android多分辨率适配框架 ...
- [Web 前端] 005 html 常用标签补充
少废话,上例子 1. 正常的字 <br> <tt>小一点的字体</tt> <br> <small>变小</small> < ...
- 【01】HTML_day01_03-HTML常用标签
typora-copy-images-to: media 第01阶段.前端基础.HTML常用标签 学习目标 理解: 相对路径三种形式 应用 排版标签 文本格式化标签 图像标签 链接 相对路径,绝对路径 ...
- web@前端--html,css,javascript简介、第一个页面(常用标签简介)
1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...
- 前端基础之html常用标签
前言: 1.在B-S模式下,server服务端和客户端之间 使用http协议(规定 客户端应该怎么请求服务端,服务端应该怎么响应)通信: 2.传输过程 浏览器 向服务端发起 post/get请求 服务 ...
随机推荐
- 文件流下载时 axios blob文件大小不正确？
文件流下载时 js blob文件大小不正确? res.data的字节长度 length blob.size匹配不上.. axio请求里必须修改 responseType: 'blob' 参数, 默认是 ...
- 染色dp（确定一行就可行）
题:https://codeforces.com/contest/1027/problem/E 题意:给定n*n的方格,可以染黑白,要求相邻俩行”完全“不同或完全相同,对于列也是一样.然后限制不能拥有 ...
- LeetCode No.133,134,135
No.133 CloneGraph 克隆图 题目 给你无向 连通 图中一个节点的引用,请你返回该图的 深拷贝(克隆). 图中的每个节点都包含它的值 val(int) 和其邻居的列表(list[Node ...
- python学习笔记（23）-异常处理
#异常处理与调试 #异常:在运行代码过程中遇到的任何错误,带有error字样的都是异常 #异常处理,对代码中所有可能出现的异常进行的处理 #1.处理某个错误 2,处理某个类型的错误 3 有错就抓 一. ...
- imageMso7345.rar
本工具用于Office开发中的customUI设计,查询内置图标的工具. 解压后,有2个Excel文件. 第一个文件的动态图: 第2个文件也可以查询图标: 下载地址: imageMso7345.rar
- BGP2
1) 按照拓扑搭建网络,在所有AS间使用直连接口建立EBGP邻居关系: 2) 在公司总部AS400中,R4与R5,R5与R7,R7与R6,R6与R4间使用环回接口建立IBGP邻居关系,IGP协议使用O ...
- 3dmax2015卸载/安装失败/如何彻底卸载清除干净3dmax2015注册表和文件的方法
3dmax2015提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装3dmax2015失败提示3dmax2015安装未完成,某些产品无法安装,也有时候想重新安装3 ...
- Longest Increasing Subsequence (Medium)
第一次做题思路201511092250 1.采用map存储,key为nums[i],value为以nums[i]为结尾的最大递增子序列的长度 2.采用map里面的lower_bounder函数直接找出 ...
- HTML面试题&知识点汇总
目录 问题&答案 参考资料 结束语 问题&答案 DOCTYPE作用?标准模式与兼容模式各有什么区别? 声明位于HTML文档中的第一行,处于 html 标签之前.告知浏览器的解析器用什么 ...
- 抽样分布|t分布|中心极限定理|点估计|矩估计|最大似然法|
生物统计与实验设计-统计学基础-2&区间估计-1 正态分布参数:均值和方差 其中,选择1d是因为好算:通常,95%区分大概率事件和小概率事件, 当总体是正态分布时,可以利用常用抽样分布估计出样 ...