HTML文件结构
<!DOCTYPE html>
<html>
<head>
<!-- 字符编码 -->
<meta charset="utf-8">
<title>这里是标题</title>
</head>
<body>
<!-- 这里是正文部分 -->
</body>
</html>
字体标签 font
<font size="7" face="宋体" color="red">是是是</font>
<!-- size 1-7 1最小7最大,超过7大小为7的大小 -->
<!-- face 字体样式 -->
<!-- color 字体颜色 -->
段落标签 p
<p></p>
<!-- p标签包裹的内容为一个段落会自动换行,2个P便签中间会存在空行为段间距 -->
换行标签
<br>
<!-- br标签没有收尾便签,看到br即换行但是不换段 -->
标题标签
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--h1-h6六个文字大小,重要性及权重从h1到h6依次降低 一般只使用前3级 默认情况独占一行-->
<!-- 尽量靠近在html中的body便签,越近越好,以便让搜索引擎最快的领略主题 -->
img标签
<img src="icon_gh.png" alt="异常提示" width="200px" height="200px">logo</body>
<!-- src 图片路劲 -->
<!-- alt 图片显示异常的提示 -->
<!-- width 宽度 height高度 -->
a超链接标签
<a href="one.html">打开本地html</a>
<a href="https://www.baidu.com/">打开网页</a>
<a href="icon_gh.png">打开本地图片</a>
<a href="icon_gh.png" target="_parent">target属性</a>
<!-- target 属性:
1:_blank 在新打开未命名的窗口打开;
2:_parent 在父窗口打开
3:_self 当前窗口打开
4:_top 目标将清除所有被包含的frame框架
-->
锚点标签
<!-- name为自定义锚点或者定义为id也同理 -->
<a name="myName">自定义锚点</a>
<!-- 跳转到锚点位置 -->
<a href="#myName">跳转到锚点</a>
<!-- 锚点必须先定义,再调用 -->
<!-- 可以跨文件使用,使用时为锚点所在文件路径+#锚点名如:c://test/aa.html#myName -->
列表
<!-- 无序列表 前面为黑色小圆点 -->
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ul>
<!-- 有序列表 前面为1.2.3... -->
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<!-- li内可以放其他显示的内容标签 -->
表格
<!-- table表格 -->
<table border="1px" width="600px">
<!-- border边框 不写默认无边框 -->
<!-- width 宽度 -->
<!-- caption表格标题 居中不加粗 -->
<caption>表格标题</caption>
<!-- tr行标签 -->
<tr>
<!-- th 列标签 加粗并居中 表头的意思 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<!-- td 列标签 默认字体样式 -->
<td>张三</td>
<td>男</td>
<td>16</td>
</tr>
<tr>
<!-- td 列标签 默认字体样式 -->
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</table>
表格-单元格合并
<!--rowspan 列合并,colspan 行合并-->
<table border="1" width="600px">
<caption>商品库存表</caption>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
<tr>
<!--rowspan 列合并-->
<td rowspan="2">家电类</td>
<td>家电类</td>
<td>家电类</td>
<td>家电类</td>
</tr>
<tr>
<td>家电类</td>
<td>家电类</td>
<td>家电类</td>
</tr>
<tr>
<!-- colspan 行合并 -->
<td >备注</td>
<td colspan="3">家电类</td>
</tr>
</table>
表格-表头/表体/表尾
<table border="1" width="600px">
<!--caption 标题名称 -->
<!-- thead 表头-->
<!-- tbody 表体 -->
<!-- tfoot 表尾 -->
<!-- 目前这几个参数未使用样式未变化,后续css可以设置样式 -->
<caption>商品库存表</caption>
<thead>
<tr>
<th>商品类别</th>
<th>商品名称</th>
<th>单位</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<!--rowspan 列合并-->
<td rowspan="2">家电类</td>
<td>家电类</td>
<td>家电类</td>
<td>家电类</td>
</tr>
<tr>
<td>家电类</td>
<td>家电类</td>
<td>家电类</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- colspan 行合并 -->
<td >备注</td>
<td colspan="3">家电类</td>
</tr>
</tfoot>
</table>
表格-对齐方式
<table border="1px" width="600px" height="200px">
<!-- aglin 组合中内容的对齐方式:
1.right右
2.left 左
3.cengter 居中
4.justify
5.char 以某个字符对齐,已暂停使用 -->
<!-- span 规定列组应该横跨的列数 -->
<!-- valign 在列组合中内容的垂直对齐方式:
1.top 上
2.middle 中
3.bottom 下
4.baseline 底线
-->
<!-- width 列组合的宽度 -->
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td align="right">张三</td>
<td align="middle">男</td>
<td align="left">16</td>
</tr>
<tr>
<td valign="top">李四</td>
<td valign="middle">女</td>
<td valign="bottom">18</td>
</tr>
</table>
表格的其他属性:
<!-- bgcolor 背景颜色 -->
<!-- cellpadding 内容与边框的距离 -->
<!-- cellspacing 单元格之间的距离 -->
<!-- border 边框粗细-->
<!-- width 宽度 -->
<!-- aglin 对齐方向 -->
<table border="1px" width="600px" cellpadding="0px" cellspacing="5px">
<tr bgcolor="red">
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr >
<td>张三</td>
<td>男</td>
<td>16</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</table>
表单-基础控件
| 常用属性 |
描述 |
| name |
指定控件的名称,可重复,相同的name为一组 |
| id |
指定标签的唯一标识 |
| value |
控件的值,后台获取时拿到的值,与现实的信息无关 |
| checked |
复选框组默认被选中的项目 |
| selected |
列表框组默认被选中的项目 |
| src |
图片框的图片来源 |
| onclick |
鼠标单击事件 |
| disabled |
禁止该控件 |
| multiple |
允许多选(适合普通列表框) |
<!-- form表单 表达的是一个范围包含了一系列控件 -->
<form action="" method="">
<!-- label一般用于显示文字的包裹,以便添加样式调整 -->
<label>输入姓名:</label>
<!-- name允许重复,相同的name为一组 id是唯一的不允许重复 -->
<input type="text" name="userName" id="userName">
<br>
<label>输入密码:</label>
<input type="password" name="userPassword" id="userPassword">
<br>
<label>确认密码:</label>
<input type="password" name="aglinPassword" id="aglinPassword">
<br>
<label>性别:</label>
<!-- name允许重复,相同的name为一组 id是唯一的不允许重复 -->
<!-- value 是通过控件获取到的内容,这个值和页面显示的内容 -->
<input type="radio" name="sex" id="man" value="男">男
<input type="radio" name="sex" id="girl" value="女">女
<br>
<label>兴趣爱好:</label>
<input type="checkbox" name="" id="" value="1">读书
<input type="checkbox" name="" id="" value="2">游泳
<input type="checkbox" name="" id="" value="3">游戏
<input type="checkbox" name="" id="" value="4">打球
<br>
<label>生日:</label>
<!-- select 下拉列表 -->
<select>
<!-- option下拉列表的选项 -->
<!-- selected 默认选中 -->
<option value="1988">1988</option>
<option value="1989" selected="true">1989</option>
<option value="1990">1990</option>
</select>
<label>年</label>
<select>
<option value="10">10</option>
<option value="11">11</option>
<option value="12" selected="true">12</option>
</select>
<label>月</label>
<select>
<option value="7">7</option>
<option value="8" selected="true">8</option>
<option value="9">9</option>
</select>
<label>日</label>
<br>
头像:<img src="touxiang.png" width="50px" height="50px">
<br>
<!-- button和submit样式上是一样的,button是前端的普通按钮,
submit为点击后提交数据给后台使用的 -->
<input type="button" name="" value="普通按钮">
<input type="submit" name="" value="提交按钮">
表单的其他控件
<!-- textarea多行输入框 -->
<!--cols行,rows列 调节输入框大小,输入内容超出范围显示滚动条 -->
多行输入框<textarea cols="3" rows="2"></textarea>
<br>
<!-- 文件本地选择 -->
<input type="file" name="">
<br>
<!-- 隐藏域 该控件不显示,不影响其他控件的展示-->
<input type="hidden" name="">
<br>
<!-- select 添加size属性则为直接显示多少列,而非下拉的普通列表 -->
<!-- multiple是否允许同时多选 true时 +ctrl键可多选 -->
<select size="3" multiple="true">
<option>item1</option>
<option>item2</option>
<option>item3</option>
<option>item4</option>
</select>
网友评论