这里写目录标题
常用标签及标签的属性
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键多选