html标签及属性

‬‬‫‍‍‭‪‏‏‪2‌6——‫‏‬‏

已于 2022-08-11 21:25:02 修改

阅读量557

点赞数 1

文章标签： html 前端 css

于 2022-07-21 15:59:29 首次发布

本文链接：https://blog.csdn.net/weixin_68531139/article/details/125779752

版权

常用标签及标签的属性

a：超链接标签

超链接标签,语法：
<a href="" title="">内容</a>

href属性的取值：	描述
#	空链接，占位，跳转到当前页的顶部
href="javascript:	假链接，不跳转的
要跳转的网址

href:跳转的路径；网址，本地文件。
title:提示信息的作用
target:被链接文档在哪里显示取值：

target=‘_self’ 在当前窗口跳转,默认值
.target='_blank’在新窗口跳转

href属性没有写东西，点击的时候会刷新页面
text-decoration: none ;去掉a标签自带下划线

img：图像标签

语法：
<img src="" alt="" title="" width="" height="">

src:图片的路径
…/…/表示上上级目录
alt:用来为图片定义预备的替换文本，当图片路径错误时或者浏览器无法加载图片时显示这个文本
title:提示信息的作用,鼠标悬停在图片时显示提示信息
width：宽度
height：高度

audio：音频属性

语法：
<audio src="" controls loop muted></audio>

controls：播放插件，loop ：循环播放，muted：静音属性，音频格式：MP3 ogg wav

video：视频属性

语法：
<video src="" controls loop autoplay poster=""></video>

controls:播放插件， loop：循环播放，width、height属性:写在视频开始标签，px单位可以省略， autoplay：自动播放属性必须在静音的时候能用， poster:预览图片，封面，里面写图片的路径 poster=“./image/1.jpg”。

source：音频媒介标签

  <source src="" type="audio/ogg">
    <source src="" type="video/mp4">

 <!-- 音频 -->
    <audio controls>
        <source src="../file/movie.ogg" type="audio/ogg">
        <source src="../file/zhoujie.mp3" type="audio/mp3">
    </audio>

    <!-- 视频 -->
    <video controls>
        <source src="../file/guo.mp4" type="video/mp4">
        <source src="../file/movie.webm" type="video/webm">
        <source src="../file/movie.ogg" type="video/ogg">
    </video>

列表

标签	语义	说明
ol	ordered list	有序列表
ul	unordered list	无序列表
dl	definition list	定义列表

列表有3种：有序列表、无序列表和定义列表。

有序列表和无序列表都比较常用，而定义列表比较少用。在实际应用中，最常用的是无序列表，要重点掌握。

有序列表

语法：
<ol>
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

type属性值	列表项的序号类型
1	数字1、2、3…
A	大写英文字母A、B、C…
a	小写英文字母a、b、c…
I	大写罗马数字I、II、III…
i	小写罗马数字i、ii、iii…

strat属性:开始值 写在 <ol start="6"></ol>开始标签中
reversed属性：倒叙  写在 <ol start="6" reversed></ol>开始标签中

 <ol start="5" reversed type="1">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项</li>
    </ol>

无序列表

语法：
<ul  type="列表项符号">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

type属性值	列表项的序号类型
disc	默认值，实心圆“●”
circle	空心圆“○”
square	实心正方形“■”

自定义列表

语法：
<dl>
    <dt>定义名词</dt>
    <dd>定义描述</dd>
    ……
</dl>

标签	说明
dl	definition list（定义列表）
dt	definition term（定义名词）
dd	definition description（定义描述）

表格

标签	语义	说明
table	table（表格）	表格
tr	table row（表格行）	行
td	table data cell（表格单元格）	单元格
th	table header	表头单元格

标签	语义	说明
caption		标题
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚

每个表格只能定义一个标题
thead,tbody，tfoot通常配合适用,用于划分表格语义，实现长表格分步加载
注意：在一个表格中只能有一组thead/tfoot标签，可以有多个tbody标签

<table border="1px" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
</table>

table属性

<table>
<tr>: 行
<td>普通单元格</td>
<th>表头单元格</th>
</tr>
</table>
border属性:
表格的边框
默认值：0 无边框
取值： 1 或者正整数（2 3）
注意：只有table的边框是10px，th和td的边框还是1px
宽高属性：
width  单位 px 可以省略
height  单位 px 可以省略
cellpadding属性：
作用：定义单元格中内容和边框之间的间距,单位是像素，可以省略；

cellspacing
作用：单元格和单元格之间的间距,默认值为2，单位是像素，可以省略
cellspacing='0',单元格之间的距离为0

th/td 属性

th/td 属性：
宽高属性：
width 单位 px 可以省略
height 单位 px 可以省略

text-align: 取值;
- 作用：单元格水平方向的对齐方式
- 取值
-  left左对齐
-  center 居中对齐
-  right 右对齐

写在行间：valign="取值"
- 作用：单元格垂直方向的对齐方式
- 取值
- top顶对齐
- middle居中对齐
- bottom底部对齐

表格实现1px的边框

 table {
      /* 边框独立  默认值 */
      border-collapse: separate;
      /* 边框合并 相邻的边框合并为单一的边框*/
      border-collapse: collapse;
      /*只有在 边框独立border-collapse: separate时才能用*/
      border-collapse: 20px 20px;
    }
    
    border-collapse:（边框折叠属性）
      边框折叠属性取值：
      separate：边框独立（默认值）
      collapse：相邻边框被合并为单一的边框
      border-spacing:单元格之间的间距
      border-spacing:水平方向 垂直方向；
      border-spacing：一个值；代表水平方向和垂直方向的间距是一样的
      注意：只有在 边框独立border-collapse: separate时才能用。

边框的颜色

1.table上的属性：
borderColor：改变边框的颜色
borderColor="#ffa500"
<table border="1"  borderColor="#ffa500"></table>

2.给table和th、td设置边框
注意：不能只设置边框的颜色
table {
border: 1px solid #ffa500; 
}
/* 群组选择器 */
th,
td {
border: 1px solid #ffa500; */
}

表格的标题

表格的标题 ，紧跟table之后，只有在table里有效
<caption></caption>
居中于表格之上
  默认水平居中
<table border="1" >
    <!-- 表格的标题 -->
    <caption>表格的标题</caption>
</table>
<!-- 写在table外caption标签无效，不会被解析 -->
<caption>表格的标题</caption>

标题位置 caption-side
该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前（或之后）的一个块级元素。
caption {
caption-side: bottom 
}
top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。

表格特性

1.未规定宽度的表格，单元格适应内容（单元格的宽高由内容撑开）
2.同一行的单元格，高度只会识别一个，取值最大
3.同一列的单元格，宽度只会识别一个，取值最大
4.表格可以包含任何html标签及表格

表单区域–form标签

语法：

  <form action="" target=""></form>

作用：
定义 HTML 表单域，是一个包含表单元素的区域。实现用户信息的收集和传递。举例说明：比如最为常见的交互操作，注册会员、跟帖留言或者文章发布等
注意：
form表单实现上述操作是最为常见方式之一，也可以使用其他方式，比如ajax等
一个页面中可以包含多个form标签，标签之间是相互独立的，不能嵌套

form的属性

1、 action属性

action="数据提交地址"
 注意：如果省略 action 属性，则 action 会被设置为当前页面。

作用：
把数据提交到后台或者服务器
注意：
如果省略 action 属性，则 action 会被设置为当前页面。

2、 target属性

作用：
设置目标地址的打开方式
取值：
_self当前窗口(默认值)
_blank新窗口

3、method属性

作用：
method=“GET/POST”:提交表单时所用的HTTP方法，默认是GET方法
取值：
GET/POST
get 方法：将表单中数据的按照 variable=value 的形式，添加到 action 所指向的【 URL 后面，并且两者使用“?”连接】，而各个变量之间使用“&”连接。（通过地址栏提交）
```
https://www.baidu.com/?user=11&pass=22
https://www.baidu.com/?参数1=值1&参数2=值2  
```
post方法：将表单中的【数据放在 form 的数据体】中，按照变量和值相对应的方式，传递到 action 所指向 URL。将数据隐藏在http数据流中传输（通过后台提交）
注意：name属性：如果input表单不设置name属性，输入框的内容无法随表单一起提交

input表单标签

语法：<input type="" name="" value="">

name属性：控件的名称，也就是name的值代表当前input元素的名字；表单的字段名，如果不设置name属性，输入框的内容无法随表单一起提交
value属性：文字域的默认取值，用于定义文本框中的默认值（就是你什么都不输入的时候就会在文本框里显示的值)
maxlength：属性规定表单元素中允许的最大字符数。
disabled属性:禁用属性，表示元素不可用，不可以点击
placeholder 提示用户输入信息
readonly属性:只读属性,只能读，不能修改
size属性：控件长度,规定下拉列表中可见选项的数目
autocomplete属性
设置表单是否启用自动完成功能，可以加在form标签、input标签中
autocomplete=“on” 启用自动完成功能
autocomplete=“off” 不采用自动完成功能
autofocus属性:页面加载时自动获取焦点；一个页面中只能有一个表单元素具有这个属性
required属性:提交表单时元素不能为空
pattern属性:验证输入内容——正则表达式
multiple属性:可以选择多个值，用于长传域file类型和email类型的文本输入域

type的取值：	描述：
text	默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
password	定义密码字段（字段中的字符会被遮蔽）
radio	定义单选按钮
checkbox	定义复选框
color	定义拾色器
hidden	定义隐藏输入字段
image	定义图像作为提交按钮
number	定义用于输入数字的字段
submit	定义提交按钮。
reset	定义重置按钮（重置所有的表单值为默认值）
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）
tel	定义用于输入电话号码的字段
date	选择一个日期（年月日）
time	选择小时分钟
datetime-local	选择一个日期和时间 (年月日时分)
month	从一个日期选择器中选择周，包含年、周（全年的第几周）
…	…

type属性:用来规定input元素的类型。input标签可以通过type属性值的不同，展示不同的效果

实例：

文本域

<input type="text" name="" value="">

密码域

<input type="password" name="" value="">

复选框

<form>
我喜欢自行车：
<input type="checkbox" name="Bike">
<br />
我喜欢汽车：
<input type="checkbox" name="Car">
</form>

单选框:带有预选定复选框的 HTML 表单

默认选中，checked
写在input标签中
<form>
男性：
<input type="radio" checked name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>

下拉列表:带有预选值的下拉列表

selected:默认选中
写在input标签中
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

创建按钮

<input type="button" value="Hello world!">
普通按钮常常配合JavaScript脚本语言使用

文本域

<textarea></textarea>
文本域,写多行文字或留言,可以给文本域设置宽高改变大小,当文字的内容超过了文本域的大小会出现滚动条
行内块标签


文本域的resize属性：用户是否可以对元素尺寸进行调整
- resize: none; 不允许用户手动调整元素的尺寸
- resize: both）; 用户可以调整元素的宽度和高度
- resize: horizontal; 用户可以调整元素的宽度
- resize: vertical; 用户可以调整元素的高度

提交按钮

提交按钮:
type:submit
具有提交功能
默认文字:提交
通过value属性改里面的内容
把信息提交给后台
行内块标签
<input type="submit">
<input type="submit" value="登录">

点击文本，就会触发此控件
label标签的 for 属性应当与相关元素的 id 属性相同。

<form>
  <label for="man">男</label>
  <input type="radio" name="sex" id="man" />
  <br />
  <label for="woman">女</label>
  <input type="radio" name="sex" id="woman" />
</form>

例题：

<form action="">
        昵称:<input type="" name="" value=""><br>
        密码:<input type="password" name="" value=""><br>
        邮箱:<input type="" name="" value="">
        <select>
            <option value="跑步">跑步</option>
            <option value="游泳" selected>游泳</option>
            <option value="骑单车">骑单车</option>
            <option value="步行">步行</option>
            <option value="跳绳">跳绳</option>
        </select>
        <br>
        性别:<input type="radio" name="" value="男" checked>男
        <input type="radio" name="" value="女">女
        <br>
        兴趣:
        <input type="checkbox" name="" value="旅游" checked>旅游
        <input type="checkbox" name="" value="摄影">摄影
        <input type="checkbox" name="" value="运动">运动
        <br>
        个人介绍:
        <br>
        <textarea rows="" cols=""></textarea>
        <br>
        <input type="submit" value="注册">
        <br>
        上次个人照片:
        <br>
        <input type="file"><br>
        <input type="color"><br>
        <input type="tel">
    </form>

效果图：在这里插入图片描述

表单元素

包含访问协议的完整路径的输入域，在提交表单时，自动验证url域的值
```
<input type="url" placeholder="请输入地址" name="userURL">
```
包含e-mail地址的输入域，在提交表单时，自动验证email域的值
```
<input type="email" placeholder="请输入邮箱地址" name="usermail">
```
用于搜索关键字的文本输入域，多用于手机客户端
```
<input type="search">
```
用于输入电话号码的文本输入域，服务于触屏网页开发，在电脑网页中无效，在触屏网页中点击输入域，显示虚拟电话键盘（0-9、*、#）
```
<input type="tel">
```

用于包含数值的输入域

<input type="number" max="10" min="0" value="2" step="2">
    max属性：最大值
    min属性：最小值
    step属性：步长，合法的数字间隔，默认步长为1

注意：当用户输入的数值不在指定范围内，会弹出相关提示，并阻止表单提交

用于生成一个数字滑动条。与number类型比区别在于外观样式不同、默认值不同。range类型的min值默认为0，max属性默认值为100
```
<input type="range" max="10" min="0" value="2">
```

用于生成一个颜色选择器，值为十六进制色值

<input type="color">
<input type="color" value="#ffff00">
value:必须是十六进制，不能简写

date日期

<input type="date">
设置默认值
<input type="date" value="2020-01-01">

time时间

<input type="time">

datetime-local本地时间

<input type="datetime-local">

month月份
从日期选择器中选择一个月份，包含年、月

<input type="month">

week周
从一个日期选择器中选择周，包含年、周（全年的第几周）

<input type="week">

表单属性
min、max、step属性
最小值、最大值、合法的数字间隔
用于包含数字的input类型，规定数值范围，如:input的number类型等

  <input type="number" step="2" min="4" max="10">

autocomplete属性
设置表单是否启用自动完成功能，可以加在form标签、input标签中

autocomplete=“on” 启用自动完成功能
autocomplete=“off” 不采用自动完成功能

在input标签中name属性是必要的

<form action="#">
    <div>
        <input type="text" name="username" autocomplete="on">
        <input type="text" name="username2" autocomplete="off">
    </div>
    <div><input type="submit" value="提交"></div>
</form>

autofocus属性
页面加载时自动获取焦点；一个页面中只能有一个表单元素具有这个属性
```
<input type="text" name="username2" autofocus>
```
required属性
提交表单时元素不能为空
```
<input type="text" required>
```

pattern属性
验证输入内容——正则表达式

<input type="text" pattern="[0-9]{3}">
0-9的三位数字
<input type="text" pattern="[0-9]">
只能输入0-9中的一位数字

multiple属性

   可以选择多个值，用于长传域file类型和email类型的文本输入域
   <input type="file" multiple>
   按ctrl键多选