HTML基础标签

186 阅读6分钟

一、标签属性

使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设 置。 通过<标签名 属性名1="属性值1" 属性名2="属性值2" …> 内容 </标签名> 方式使用,例如:key="value" ,key是键(属性名)的意思 ,value是值的意思。

注意:

   1、 标签可以有很多属性,必须写在开始标签中,位于标签名后面。
   2、 属性之间不分先后顺序,标签名与属性、属性与属性之间用空格分开。
   3、 任何标签的属性都有默认值,省略该属性则取默认值。
   4、 采用键值对的格式(key="value" )。

二、注释标签

注释就是对代码进行解释,是不会显示在浏览器窗口的,但如果用户查看源代码还是可以看到的,注释格式如:在这里插入图片描述

三、文字标签

1、h1~h6标题标签 h标签用作文章的标题,使用h标签文字会加粗变黑,自己占一行,其中 h1 是最大的,h6是最小的。 注意 h1 标签因为重要,尽量少用; 一般 h1 都是给logo使用;一般一个网页上只有一个h1标签。

2、p段落标签 双标签<p></p>表示段落。默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

3、b和strong标签 <b></b>、<strong></strong> 标签文本以粗体方式显示,推荐使用strong,strong标签更有强调意味。

4、i和em标签 <i></i>、<em></em> 标签文本以斜体方式显示,推荐使用em,em标签更有强调意味 。

5、s和del标签 <s></s>、<del></del> 标签文本以加删除线方式显示,推荐使用del。

6、u和ins标签 <u></u>、<ins></ins> 标签文本以加下划线方式显示,推荐使用ins。

注意:

   1bi、s、u标签只有使用, 没有强调的意思,我们以后不要用。
   2strongemdelins标签语义更强烈,对SEO更加友好一点。

四、其他标签

1、hr水平线标签

<hr>标签是水平线,可以用来分割页面。

2、br换行标签

<br>标签是换行标签,可以放在

标签文字里面去进行换行

3、div和span标签

没什么意思,就是表示分区。div 是 division 的缩写,表示分割、分区的意思,由很多div 来组合网页,而span则是跨度、跨距、范围 <div>是一个块标签, <span>是一个行内标签。

4、img图片标签

<img>用来展示图片的。

 常用属性:       
   1src:图像的路径。
   2、alt:图像不能显示时的替换文本。
   3、title:当鼠标悬停时显示的内容。
   4widthheight:设置图像的宽度和高度。
   5border:设置图像边框的宽度。

5、a超链接标签

用来放一个链接去跳转到其他页面。

   常用属性:
   1、href:Hypertext Reference的缩写,意思是超文本引用用于指定链接目标的url地址。  
   2、target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为 在新窗口中打开方式。

两种链接方式:

   1、外部链接:指你的网页链接到别人的网页,必须添加 http://。平常我们虽然在地址栏中没有写协议,但是浏览器会自动帮我们添加。
   2、内部链接:指在一个网站内的链接,直接在链接内部页面名称即可,如 `< a href="in.html">` 。

除上述两种外,还有空链接和锚点链接。

   空链接:通常将链接标签的href属性值定义为“#”(href="#")就可以表示该链接为空。
   锚点链接:指在一个网页内的链接,使用相应的id名标注跳转目标的位置,如`<a href="#id">`。

6、列表标签

容器里面装载着文字或图表的一种形式,叫列表,列表最大的特点就是整齐 、整洁、 有序。

列表分类:无序列表、有序列表、自定义列表。

   无序列表:各个列表项间没有顺序级别之分,他们是并列的。里面有两个标签:ul标签和li标签。其中ul标签中u是指unorder无序的意思 ,l是list列表的意思。li标签就是list列表的意思。
   有序列表:有排列顺序的列表。里面有两个标签:olli标签。
   自定义列表:顾名思义,自己定义的列表,有三个标签:dldtdd 定义列表常用于对术语,名词,事件,时间点进行解释和描述,定义列表的列表项前没有任何项目符号。dt是标题,dd是标题解释。

7、表格标签

里面有四个标签:table、th、tr、td。其中table定义 HTML 表格,简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成,tr定义表格行,th定义表头,td定义表格单元。

  常用属性:
  1border:规定表格边框的宽度。
  2、cellpadding:规定单元边沿与其内容之间的空白。
  3、cellspacing:规定单元格之间的空白。
  4width:规定表格的宽度。
  5、表格合并:行合并(rowspan),列合并(colspan)。

8、表单标签

在HTML中,一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。 提示信息是指在一个表单中包含的一些提示性的文字。 1、表单域 表单域相当于一个容器,用来容纳所有的表单控件和提示信息,可通过定义处理表单数据所用程序的url地址以及数据提交到服务器的方法。使用form标签创建一个表单实现用户信息的收集和传递。

   常用属性:
   1、action:用于指定接收并处理表单数据的服务器程序的url地址。
   2、method:用于设置表单数据的提交方式,其取值为get或post。
   3、name:用于指定表单的名称。
   2、表单控件
   表单控件包含具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
    
    常用标签:
    1、input标签:单标签,type属性为最基本的属性,其取值有多种,用于指定不同的控件类型。
    2、label标签:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
    3、textarea标签:用于创建多行文本输入框。
    4、下拉菜单:包含selectoption标签,select创建一个下拉菜单,option是下拉菜单中的选项。
    
    注意: 
    1select标签中至少应包含一对`<option></option>` 。
    2、在option 中定义selected =" selected "时,当项即为默认选中项。