body标签,常用属性:
text:用于设定文字颜色
background:用于设定背景图片
bgcolor:用于设定背景色
<body text="#8a2be2" bgcolor="#7fffd4" background="images\guangtouqiang.jpg" >
<p>hello world</p>
</body>
HTML中常用标签
| 标签 |
作用 |
| p |
段落标签 |
| hn |
段落标签(n为1~6) |
| br |
换行标签 |
| hr |
水平线标签 |
| span |
无语义标签(有点像代码块) |
<p>hello <hr/> world</p>
基本属性:
1.align:水平对齐方式,默认居中
2.width:水平线的长度,可取像素(px) 和 百分比(%)
3.size:水平线的高度
4.color: 颜色
字体标签
<strong>北京</strong>
<em>上海</em>
<b>江西</b>
<i>深圳</i>
<u>广州</u>
<s>湖北</s>
A⁢P >
HTML属性值必须用承兑的"
图片标签
<body bgcolor="#7fffd4" >
<img src="images\guangtouqiang.jpg" border="2" title="光头强" alt="未能加载图片" width="300px" height="300px"/>
</body>
</html>
超链接
target 代表新窗口的位置， blank 在新的窗口, self在本窗口(默认)
<a href="HTML\19下拉列表框.html" title="我是下拉框" target="_blank">按钮</a>
锚点
<h3> <a href="#life"> 4 个人生活</a></h3>
<h5 ><a name="life">个人生活</a></h5>
文本格式化标签
| 标签 |
描述 |
标签 |
描述 |
| b |
定义粗体文本 |
del |
定义删除字 |
| u |
定义下划线文本 |
small |
定义小号字 |
| i |
定义斜体字 |
sup |
定义上标字 |
| strong |
定义加重语气字 |
sub |
定义下标字 |
| em |
定义着重字 |
ins |
定义插入字 |
pre标签会根据实际书写格式来输出结果
<pre>
春眠不觉晓
处处闻啼鸟
夜来风雨声
花落知多少
</pre>
块级元素和行内元素
1.块级元素独占一行,行内元素在同一行显示
2.块级元素默认宽度为100%,行内元素由内容撑开
3.块级元素可以设置宽高,行内元素不可以设置宽高
4.块级元素可以设置margin和padding和四个方向,行内元素只可以设置
margin和padding和左右值,上下不起作用
5.块级元素默认的display为block,行内元素的display为inline
6.块级元素可以包含块级元素和行内元素,行内元素一般只包含行内元素和文本
7.常见的块级元素有h1-h6,p,div等,行内元素有a,em,b,i,u等
列表
列表标签
| 标签 |
描述 |
| ul |
定义无序列表 |
| ol |
定义有序列表 |
| dl |
自定义列表 |
| li |
列表项目的标记 |
无序列表
<h5>中午吃的什么?</h5>
<ul>
<li>牛排</li>
<li>炒饭</li>
<li>面条</li>
</ul>
有序列表
<h5>今天做什么</h5>
<ol>
<li>java</li>
<li>数学</li>
<li>英语</li>
</ol>
自定义列表
一般用于对属于或者名词的解释和描述
<h2>领导人</h2>
<dl>
<dt>清朝皇帝</dt>
<dd>康熙帝</dd>
<dd>乾隆帝</dd>
<dd>光绪帝</dd>
<dd>咸丰帝</dd>
</dl>
表格基本结构
| 标签 |
作用 |
| table |
定义表格 |
| tr |
定义行,只能包含 |
或 |
元素 |
| td |
定义单元格 |
| caption |
定义表格标题 |
| th |
定义表格页眉的单元格 |
| thead |
定义表格头 |
| tbody |
定义表格的主体 |
| tfoot |
定义表格脚 |
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>男</td>
</tr>
</table>
table标签常用属性
| 属性 |
描述 |
说明 |
| width |
表格的宽度 |
|
| height |
表格的高度 |
|
| align |
表格在页面的水平摆放位置 |
|
| background |
表格的背景图片 |
|
| bgcolor |
表格的背景颜色 |
|
| border |
表格边框的宽度,(px像素单位) |
表格默认没有边框 |
| bordercolor |
表格边框颜色 |
当border>=1时起作用 |
| cellspacing |
单元格之间的间距 |
|
| cellpadding |
单元格内容与单元格边界之间的空白距离大小 |
|
表格行的常用属性
| 属性 |
描述 |
| height |
行高 |
| align |
行内容的水平对齐 |
| valign |
行内容的垂直对齐 |
| bgcolor |
行的背景颜色 |
<table align="center" bgcolor="" border="1px" bordercolor="red" width="400px" height="100px">
<caption>成绩单</caption>
<tr height="60px" bgcolor="gray">
<th>姓名 </th>
<th>编号 </th>
<th>数学成绩 </th>
<th>英语成绩 </th>
</tr>
<tr align="center" height="50px" valign="middle">
<td bgcolor="green"><b>张三</b></td>
<td>1001</td>
<td>88</td>
<td>66</td>
</tr>
<tr>
<td>里斯</td>
<td>1002</td>
<td>100</td>
<td>100</td>
</tr>
</table>
表格列的常用属性 < td >
| 属性 |
描述 |
| width/height |
单元格的宽和高 |
| align |
设置水平对齐方式,left,center,right |
| valign |
设置垂直对齐方式,可取值top,middle,bottom |
| bgcolor |
单元格的背景颜色 |
| colspan |
设置单元格跨列 |
| rowspan |
设置单元格跨行 |
合并单元格
<table border="1px" width="300px" height="300px" align="center">
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
学生信息表
<body>
<h3 align="center">学生信息表</h3>
<table align="center" border="1px" width="300px" height="300px">
<tr align="center">
<td colspan="3">学生基本信息</td>
<td colspan="3">成绩</td>
</tr>
<tr align="center">
<td>姓名</td>
<td>性别</td>
<td>专业</td>
<td >课程</td>
<td>分数</td>
</tr>
<tr align="center">
<td>球球</td>
<td>男</td>
<td rowspan="2">计算机</td>
<td rowspan="3">程序设计</td>
<td>68</td>
</tr>
<tr align="center">
<td>楠楠</td>
<td>女</td>
<td>89</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>会计</td>
<td>68</td>
</tr>
<tr align="center">
<td>小明</td>
<td>男</td>
<td>建筑</td>
<td>建筑设计</td>
<td>68</td>
</tr>
</table>
</body>
表单
< form action=“url” method=“get | post” name=“myform”>< /form>
name: 表单提交时的名称
action:提交到的地址
method:提交方式,默认为get
post和get的区别
1.数据提交方式,get把提交的数据url可以看到,post看不到
2.get一般用于提交少量数据,post用来提交大量数据
3.get最多提交1K数据,post理论上没有限制
4.get提交的数据在浏览器历史记录中,安全性不好
单行文本框 <input type="text"/> <br/>
密码框 <input type="password"/><br/>
单选按钮 <input type="radio" name=""/><br/>
复选框 <input type="checkbox"/><br/>
隐藏框 <input type="hidden"/><br/>
文件上传 <input type="file"/><br/>
下拉框
<select>
<option value="1">北京</option>
<option value="1">上海</option>
<option value="1">广州</option>
</select><br/>
多行文本<textarea></textarea><br/>
提交按钮<input type="submit"/><br/>
普通按钮<input type="button"/><br/>
重置按钮<input type="reset"/><br/>
video视频标签
视频格式: mp4,ogg移动端,webM 高清
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果出现该属性,则视频就绪后马上播放 |
| controls |
controls |
如果出现该属性,则向用户显示控件,比如播放按钮 |
| height |
pixels |
设置视频播放器的高度 |
| loop |
loop |
如果出现该属性,则当媒介文件完成播放后再次开始播放 |
| muted |
muted |
规定视频的音频输出应该被静音 |
| poster |
URL |
规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像 |
| preload |
preload |
如果出现该属性,则视频在页面加载时进行加载并预备播放,如果使用autoplay，则忽略 |
| src |
url |
要播放视频的URL |
| width |
pixels |
设置视频播放器的宽度 |
<video src="images/a.mp4" autoplay loop controls></video>
audio声音标签
| 属性 |
值 |
描述 |
| autoplay |
autoplay |
如果出现该属性,准备就绪马上播放 |
| controls |
controls |
如果出现该属性,向用户显示控件 |
| loop |
loop |
如果出现该属性,循环播放 |
| muted |
muted |
规定视频输出应该静音 |
| preload |
preload |
如果出现该属性,音频在页面加载时加载,预备播放。如果出现autoplay,则忽略 |
| src |
url |
要播放音频的url |
<audio src="images/1.mp3" autoplay loop controls></audio>