html的基本标签

dadaooxx 2020-06-16

当我们需要写页面的时候,肯定会用到一些html的基本标签,现在我们就来罗列下我们常用的html的基本标签有哪些

首先我们开始页面之前,我们需要写声明文档类型,以便我们的浏览器方便阅读

<!doctype html><!--申明文档类型 html-->
<html><!--页面开始-->
    <head><!--头部开始-->
        <title>xxx</title><!--标题-->
        <meta charset="utf-8" /><!--申明编码集-->   <style></style><!--如果需要写样式需要在style里面写-->
        
    </head><!--头部结束-->

    <body><!--身体开始-->   <!--里面写我们的页面架构-->
   </body><!--身体结束-->
    
    
</html><!--页面结束-->

上面的代码流程就是我们写页面前需要准备的

那我们常用的基本标签有哪些呢

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--h1~h6标签,常用来写标题的-->

<i></i>
<em></em>
<!--这两个是设置斜体字的标签-->

<b></b>
<strong></strong>
<!--这两个是设置粗体字的标签-->

<u></u>
<!--这个是下划线标签,特点是占据自己内容位置的大小,给文字添加下划线-->

<br /> 换行标签(空标记)
<hr /> 水平线标签(空标记)

<sub></sub>下标标签
<sup></sup>上标标签

<p></p>
<!--段落标签,特点是单独占据一行,可以嵌套文本 非单独占据一行的标签 可以插入图片-->

<span></span>
<!--文本节点标签,特点是只占据自己内容大小的位置,一般结合css体现样式-->

<a href=""></a>
a拥有的属性分别是
    href="跳转地址"
    target="页面打开方式"
    _self 在当前页面刷新(默认值)
    _blank 在新窗口中打开
    title="鼠标移入的提示文本"
    拓展:
    rel="nofollow"指定当前页面与被链接的页面之间的关系
<!--超链接标签,特点是实现页面与页面之间的跳转,只占据自己内容大小的位置,默认文本蓝色带有下划线-->

img:图片标签
    src="图片路径"
        	相对路径:
        	    相对某一个文件夹
        		tupian/1.jpg
        		./longmao.jpg
        	绝对路径:
        		从盘符出发的路径
        		域名地址
        						
        	../ 返回上级目录
        	./ 在当前目录
        					
        	alt="文本信息"
        	title="提示文本"
        	width="宽度"
        	height="高度"
        	注意:只写宽度或者高度,另一边等比例缩放


<div></div>盒子标签,特征:单独占据一行,用来搭建页面结构

表格标签
table: 表格标签
    tr:行
    td:单元格
        					
    border="设置边框"
    bordercolor="边框颜色"
        					
    cellspacing="单元格边框与边框之间的距离"
    cellpadding="单元格与内容之间的距离"
    注意:给table添加
        					
     align="表格水平位置"
     left 在左边
     center 在中间
     right 在右边
        						
     width="宽度"
     height="高度"
        					
      colspan="合并列" 左右合并
      rowspan="合并行" 上下合并
      注意:给td添加,合并几个,数字写几

列表标签:
ul > li:无序列表标签
	type="disc默认值实心圆 circle square"通常不用,因为丑还不好控制 去掉小黑圆点list-style:none; 
        特征:单独占据一行,一般用来做单导航,列表

ol > li:有序列表
        type="a/A/1/i/I"修饰符号,通常不用,start="3"从第三个开始

dl > dt + dd:自定义列表标签
        特征:单独占据一行,一般用来做双导航,一个dl里面只有一个dt,可以有多个dd

 我们还有一些表单元素,我们一起来看看吧

<form action="提交地址" method="提交方式" name="表单名字">
      <input type="类型">
           type="text" 单行文本输入框
           type="password" 密码框
           type="submit"    提交按钮
           type="reset"    重置按钮
           type="button"    空按钮(如果要做功能,需要结合js)
                    
                    
           name="名字"
           value="值"
           maxlength="允许输入的字符个数"
           size="设置元素显示的宽度"
                    
           get和post的区别:
           get:在地址栏提交,有长度限制,可能造成数据丢失,一般提交的数据较短,明文可见,不安全,就算加密,也比较容易破解
           速度较快,如果只考虑速度,那就用get
                    
           post:不在地址栏提交,安全,没有长度限制(理论上是有长度限制),一般提交的数据较大,速度较慢,
</form>

以上就是我们html常用的标签,如果还需要用到其他的标签,可以去我们的W3C查找,谢谢

相关推荐