HTML基础知识（2）------HTML的常用标签

小城-前端

已于 2022-08-07 16:23:06 修改

阅读量988

点赞数 1

分类专栏： HTML 文章标签： html 前端

于 2022-08-07 16:21:17 首次发布

本文链接：https://blog.csdn.net/m0_46684554/article/details/126195166

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

标签的属性

格式：属性="属性值" 以键值对形式定义

<标签名属性1="属性值1" 属性2="属性值2"...> 内容 </标签名>

注意：多个属性之间用空格隔开，标签的共有属性：id，class，style，title等

常用标签

1、标题标签：作为标题使用，根据重要性逐级递减

特点：独占一行、字体变大和加粗、重要性逐级递减

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

2、meta标签：定义页面中的特殊信息。其中，包含name和http-equiv属性

name的属性值有description(网页描述）、keywords、author、copyright、viewport(定义视图窗口)

http-equiv用于定义网页编码（简写为<meta charset:"UTF-8"> ）、网页自动刷新跳转(refresh)和定义默认浏览器

3、段落标签

特点：独占一行、段落之间存在空隙

<p>我是一个段落</p>

4、水平线标签

<hr />

5、换行标签

<br />

6、div和span标签

div的特点：独占一行、默认宽度100%、可设置宽高

span的特点：不独占一行、设置宽高不生效

<div>这是div</div>
<span>这是span</span>

7、文本格式化标签

特点：不独占一行

b、i、s、u均为强调文字的视觉效果，不强调语义

strong、em、del、ins更强调语义，对内容进行强调，更符合W3C的标准

粗体：

<b></b>

<strong></strong>

斜体：

<i></i>

<em></em>

删除线：

<s></s>

<del></del>

下划线：

<u></u>

<ins></ins>

8、图像标签

特点：不独占一行、可设置宽高、行内元素

<img src="" alt="src图片引用地址，alt图片加载失败的提示信息" title="悬停时的提示信息">

9、链接标签

特点：不独占一行、宽高不生效、可嵌套除a标签外的所有元素

属性：

1、href 链接地址（网络地址、本地地址、空链接（#锚点）、具有简单的下载功能，能下载的脚本：txt、office全家桶、zip）

2、target 控制页面的打开方式

_self 从当前页面打开

_blank 从新窗口打开

_parent 在父窗口打开

_top 在顶层窗口打开

<a href="跳转目标" target="目标窗口的弹出方式">链接的文本或图像</a>

10、base标签（写在head标签中）

.属性：

target 控制整个页面中所有链接地址的跳转方式

href 基于当前链接进行跳转，即在链接前连接base标签中的链接地址

注意：若链接地址或路径以http/https协议开头，则不会受影响。若页面中带有相对路径的标签，则会在相对路径前加入base标签中的链接，导致相对路径失效

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <base target="_blank" />

11、注释标签

12、列表标签

有序列表 ol>li*index(简写方式)

独占一行、可以设置宽高、只能嵌套li标签，而li标签里可以嵌套任何元素

属性：（没有前后之分）

        1.type 改变序号样式 1、A、a、 I、i

        2.start 从第几个开始

        3.reversed 序号反转

无序列表 ul

属性：（没有前后之分）

        1.type 改变序号样式

                disc 实心圆

                square 正方形

                circle 空心圆

        2.start 从第几个开始

        3.reversed 序号反转

自定义列表 dl>dt+dd*index dt为dd的标题

（按住alt+点击光标：可同时选中多个光标）

13、table标签

caption   表名

thead 表格标题

th tablehead 表头（文字居中且加粗）

tbody 表格主体内容

tr tablerow 行

td tabledata 单元格

tfoot   表格备注或总结

        属性：

                border                边框

                cellspacing         控制边框之间的间隙

                cellpadding         控制内容与边框之间的间隙

                align 对齐方式

                left    左对齐

                right      右对齐

                center              居中

14、label标签：绑定文字/图片/盒子（需要设置id和for关联起来）

for 与单选框中的id值一一对应

input（输入框）标签（相同类型的输入框通过name属性进行关联）

特点：不独占一行、能设置宽高

属性：

type	输入框类型
	text	文本
	password	密码
	button	普通按钮
	submit	提交按钮
	radio	单选框
	checkbox	复选框
	file	文件上传
	image	图片形式的提交按钮
	reset	重置/取消
value	默认值（提交的键值）
name	提交的键名（可绑定单选框）
placeholder	占位符（输入提示）
maxlength	最大输入长度
checked	默认选中
disabled	禁止选中
required	必填项

<input type="text"><br>
<input type="password" name="" id="e">
<input type="radio" id="image" name="radio"><label for="image"><img src="./img/1.png" alt=""></label>
<input type="radio" id="text" name="radio"><label for="text"><img src="./img/1.png" alt=""></label>
<input type="radio" name="sex" id="man"><label for="man">男</label>    
<input type="radio" name="sex" id="men"><label for="men">女</label>    
<input type="button" name="" id="">
<textarea name="" id="" cols="5" rows="5"></textarea>
<select name="" id="">
    <option value="">feaj</option>
    <option value="">ve</option>
    <option value="">bibb</option>
    <option value="">bbi</option>
</select>

15、表单标签