HTML标签
1、图像标签
img标签可以在网页中插入一幅图像,例如：
<img src="img/meinv01.jpg" width="40%"/>
其中,src属性: 用于指向图片的路径(相对路径,网络路径)
width属性: 指定图片的宽度
height属性: 指定图片的高度
关于路径问题:
1)不建议写带盘符的绝对路径,因为将来换一个发布环境,这个路径很可能是错的,所以不建议
<img src="D:/JavaDevelop/HBuilderProjects/CGB-HTMLCSS-01/img/meinv02.jpg" width="40%"/>
2)建议写相对路径
./: 表示当前文件所在的位置,可以省略不写
../: 表示当前文件所在目录的上一级目录
<img src="./img/meinv01.jpg" width="40%"/>
表示在当前文件(html)所在的目录找img目录,在img目录下找meinv01.jpg文件
<html>
<head>
<meta charset="utf-8">
<!-- 通知网页当前使用的编码 -->
<title>直男的快乐</title>
</head>
<body>
<h1>Hello World!!</h1>
<h2>女朋友都是大猪蹄子</h2>
<h3>女朋友有点可爱</h3>
<h4>但有点矮</h4>
<!-- <h4>注释内容 ctrl+/</h4> -->
<!-- 生成一条水平线 -->
<!--
soldi:实线 double：双线
dashed：虚线 dotted：点状线
-->
<hr style="border:5px solid red" />
hello world<br/>
<!-- br 换行
  空格 -->
My love
</body>
</html>
2、超链接标签
a标签用于在网页中实现一个超链接
点击超链接后,会跳转到另外一个位置(网页、图片、下载地址等),例如:
<a href="http://www.baidu.com" target="_blank">
百度一下,你就不知道
</a>
其中href属性,用于指向所跳转到的url地址
target属性,用于指向以何种方式打开超链接
_self: 在当前窗口打开超链接
_blank: 在新窗口中打开超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片和超链接</title>
</head>
<body>
<!-- 引入一副图像 -->
<img src="img/meinv01.jpg" width="40%"/>
<a href = "https://www.baidu.com" target="_blank">
<img src="./img/meinv02.jpg" width="40%"/>
</a>
<!-- 不建议 使用绝对路径 -->
<hr/>
<a href = "http://www.baidu.com" target="_blank">
<!-- 新窗口打开 -->
你需要百娘~
</a><br>
<a href = "http://tmooc.cn"target="_self">
<!-- _self当前窗口打开 -->
tmooc一下~
</a>
</body>
</html>
3、表格标签
table: 用于定义一个表格,其中可以包含tr标签
tr(table row): 用于定义表格中的行, tr中可以包含td/th
td/th(table data cell): 用于定义表格中的单元格
th(table header cell): 用于定义表头中的单元格，其中的文本默认会加粗并且居中。
colspan属性：设置单元格横跨的列数,例如:
<th colspan="2">11</th>
colspan="2": 设置当前单元格横跨两列
rowspan属性：设置单元格竖跨的行数
<td rowspan="2">21</td>
rowspan="2": 设置当前单元格竖跨两行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
<!-- style标签内部用于书写css样式，css注释 -->
<style>
table,td,th{/* 选中所有名字为table 和 td的元素 实现复用*/
border:2px solid skyblue;
border-collapse: collapse;
}
table{
/*设置背景*/
background-color: pink;
/*设置宽度*/
width: 60%;
/*设置左右外边距自适应*/
margin-left:auto;
margin-right:auto;
text-align: center;
}
td,th{
/*内边距*/
padding: 5px;
}
h4{
/* border: 4px aqua;
margin-left:auto;
margin-right:auto;
width: 40% */;
/* 元素居中 */
text-align: center;
}
</style>
</head>
<body>
<h4>标题</h4>
<table>
<!-- 创建一个 3*3的表格 -->
<tr>
<!-- 11和12 横向合并 -->
<th colspan ="2">11</th>
<th>13</th>
</tr>
<tr>
<!-- 21和31单元格合并 行合并 -->
<td rowspan="2" colspan ="2">21</td>
<td>23</td>
</tr>
<tr>
<td>33</td>
</tr>
</table>
</body>
</html>
4、表单标签
表单的作用: 用于向服务器发送数据
向服务器发送数据的两种方式:
1)使用表单向服务器发送数据
表单中往往存在表单项标签(用户名、密码、昵称、邮箱、验证码等)，在表单项中可以输入数据，再提交表单就可以将输入的数据提交给相应的服务器。
2)使用超链接也可以向服务器发送数据
http://www.baidu.com?user=张三&age=20&like=篮球
在URL地址后面可以拼接问号,问号之前是url地址,问号之后可以拼接参数,参数包括参数名(user，age，like)，和参数值（张三，20，篮球）,多个参数之间用&分隔。在输入地址后访问服务器,就可以将地址后面拼接的参数一并带给服务器
form标签
<form action="http://www.baidu.com" method=""> ... </form> 其中action属性:用于指定表单中的数据将会提交到哪个地址。 例如：action属性指向百度服务器的网址，就意味着，表单中的所有数据都会提交到百度服务器。 method属性:指定提交方式,常用提交方式为GET和POST(区别后面会讲到) 如果不指定method,默认是GET提交。
5、表单项标签
1)文本输入框(用户名/验证码/邮箱/昵称)
<input type="text" name="username"/>
<input type="text" name="email"/>
<input type="text" name="nickname"/>
2)密码输入框(密码/确认密码)
<input type="password" name="psw"/>
<input type="password" name="repsw"/>
3)单选框(性别/单选题选项)
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
4)多选框/复选框(多选题选项/岗位/爱好)
<input type="checkbox" name="like"/>篮球
5)下拉选框(省份/城市/市区选择)
<select name="prov">
<option>北京市</option>
<option>上海市</option>
<option>广东省</option>
...
</select>
6)多行文本输入框
<textarea name="desc"></textarea>
7)按钮/提交按钮
<input type="button" value="换一张"/>
普通按钮本身没有功能,可以通过js为按钮添加功能(比如点击后,换一张图片)
<input type="submit" value="提交/登录/注册"/>
提交按钮用于提交表单,将表单中的数据提交给action属性所指向的服务器
6、注册表单案例
表单项的细节问题:
1)表单项上的name属性有什么作用?
<input type="text" name="user"/>
<input type="password" name="psw"/>
要提交数据的表单项(例如:用户名/密码/性别/爱好/昵称/邮箱/验证码等)都必须得有name属性,如果没有name属性,在表单提交时,该项会被忽略(即无法提交数据)
2)为什么单选框可以多选?
所有单选框的name属性值必须相同,值相同则说明是一个组,一个组中的单选框只能选一个(即单选)
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
3)为什么单选框或复选框提交时的值为on?
因为单选框或复选框不像文本输入框,输入在框中的内容就会作为value提交
单选框或复选框不能输入,所以只能通过value属性来指定提交时的值
<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female"/>女
<input type="checkbox"
name="like" value="basketball"/>篮球
4)如何设置单选框或复选框默认选中某一项?
<input type="radio" checked name="gender" value="male"/>男
<input type="checkbox" checked
name="like" value="football"/>足球
在单选框或复选上可以添加checked属性来设置某一项默认被选中
5)如何设置下拉选框中的某一项默认被选中?
下拉选框默认选中第一项, 如何要设置第一项以外的其它选项默认被选中
可以在option标签上添加一个selected属性。
<select name="city">
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
6)option标签上的value属性的作用是什么?
例如: 如果"上海"选项被选中,而"上海"的option上面没有value,则会提交city=上海;
如果在"上海"选项上有value属性,在"上海"被选中被提交时,就会提交value属性的值。
<select name="city">
<option>北京</option>
<option value="shanghai">上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
7、音频、视频标签
7.1.音频标签
audio可以在网页中插入音频流
<audio controls src="audio/沙漠骆驼_展展与罗罗.mp3">
如果您看到这段内容,则说明您的浏览器不支持此标签
</audio>
src属性: 指定所要插入的音频的url地址
controls属性: 为用户添加播放、暂停、音量控制等插件
autoplay属性: 在音频加载完成后,立即播放(自动播放)
width、height: 设置元素的宽度和高度
7.2.视频标签
video可以在网页中插入视频流
<video autoplay controls src="video/小拳拳.mp4">
如果您看到这段内容,则说明您的浏览器不支持此标签
</video>
src属性: 指定所要插入的视频的url地址
controls属性: 为用户添加播放、暂停、音量控制等插件
autoplay属性: 在视频加载完成后,立即播放(自动播放)
width、height: 设置元素的宽度和高度
7.3.div/span/p标签
div/span/p标签是非常普通的但是又很常用的标签
这三个元素都是容器标签,可以用来包裹其他的标签或者文本
在标签上设置样式,就可以作用在其中的内容上。
<div style="color:red;font-size:30px">
<span>文本文本文本</span>
<input />
<p>这是一个p元素</p>
</div>
div、p：是块元素，默认独占一行,都可以设置宽高
同是块元素的还有: h1~h6,form,table,div,p等
span：是行内元素，多个行内元素可以显示在同一行，不能设置宽高
同是行内元素的还有: span,b,i,u,input,img
浙公网安备 33010602011771号