HTML
表格和列表
表格标签
表格的基本语法
<tr>表示行 <td>表示列 外部由<table>包围
示例
<body>
<table>
<tr><td>姓名</td> <td>性别</td> <td> 年龄 </td></tr>
<tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr>
<tr><td>张学友</td> <td>男</td> <td> 58 </td></tr>
<tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr>
</table>
</body>
<th>为表头标签。
<tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr>
效果如图
表格的属性值
想加上边框啊什么的 就要用到下列属性值
<table align="center" border="1" cellpadding="2" cellspacing="0" width="500" height="249">
合并单元格
合并单元格方式:
● 跨行合并: rowspan=”合并单元格的个数"
● 跨列合并: colspan= “合并单元格的个数”
合并单元格3三步曲:
1.先确定是跨行还是跨列合并。
2.找到目标单元格写上合并方式=合并的单元格数量。比如: <td colspan=“2” > </td>.
3.删除多余的单元格。
示例
<body>
<table width="500" height="250" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
列表分为
- 有序列表(用的少
- 无序列表(重点
- 自定义列表(重点
dd和dt是并列关系
在HTML标签中, dl标签用于定义描述列表(或定义列表),该标签会与 dt (定义项目/名字)和dd (描述每一个项目/名字 )一起使用。
注意:ul里面只能放li 但是li里可以放任何标签。
表单标签
使用表单目的是为了收集用户信息。
表单标签
表单元素
input
<form>
<!-- text文本框 用户可以在里面输入任何文字 -->
用户名:<input type="text"> <br>
<!-- password 密码框 用户看不见输入的密码 -->
密码:<input type="password"><br>
<!-- radio 单选按钮 可以实现多选一 -->
性别:男<input type="radio" > 女<input type="radio"><br>
<!-- checkbox 复选框 可以实现多选 -->
爱好:吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox">
</form>
但是此时 我们发现
男和女是都可以选的 这当然不合适蛤 这是因为此时它俩没有相同的name值 (name即为input元素的名称
name
name属性存在的意义:这么多表单元素,我们怎么区分开来呢 就给他们不同的name值
- name 和value是每个表单元素都有的属性值主要给后台人员使用.
- name 表单元素的名字,要求单选按钮和复选框要有相同的name值
<!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
性别:男<input type="radio" name="sex" value="男"> 女<input type="radio"name="sex" value="女"><br>
这时候就能实现 男和女只能选一个了
value
用户名:<input type="text" name="user" value="请输入用户名"> <br>
value只有在输入文本框里才会显示出来 在男/女这里面写是显示不出来的
如果你密码:<input type="password" name="password" value="请输入密码"><br>
这样写的话
checked
单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮
性别:男<input type="radio"********* checked="checked">
这样一打开页面 男这个选项就已经被勾选上了
maxlength
maxlength规定了输入的最大字符数
用户名:<input type="text" maxlength="6">
此时输入6个字符后就不能再输入了
submit
submit提交按钮<input type="submit">
写个这个 页面里就会出现一个提交按钮
通过value可以更改“提交“里面的文字
<input type="submit" value="免费注册">
效果如图
点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器
reset
reset重置按钮<input type="reset">
同样是通过value值可以改变 重置 的文字 不再赘述。
button
<!-- 普通按钮 button 后期结合js 搭配使用-->
<input type="button" value="获取短信验证码"> <br>
file
<!-- 文件域 使用场景 上传文件使用的 -->
上传头像: <input type="file" >
label
点男那个图片即可以实现男前面的按钮被点了 这依靠的是label标签
<input type="radio" name="sex" id="sex">
<label for="sex">男</label>
这时就可以实现点男时前面的按钮也自动被点上了
select
<form>
籍贯
<select>
<option>山东</option>
<option>河南</option>
<option>湖北</option>
</select>
</form>
textarea
<form>
先给自己打个气
<textarea cols="50" rows="5">hhhhjxx加油加油</textarea>
</form>
HTML5新特性
1.1 HTML5新增的语义化标签
●<header> : 头部标签
●<nav> : 导航标签
●<article> :内容标签
●<section> :定义文档某个区域
●<aside> : 侧边栏标签
●<footer> :尾部标签
1.2 HTML5新增的多媒体标签
HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播放,当然,支持的格式是有限的。
1.3 HTML5新增的input类型
属性值 | 说明 |
---|---|
type=“email” | 限制用户输入必须为Email类型 |
type=“url” | 限制用户输入必须为URL类型 |
type=“date” | 限制用户输入必须为日期类型 |
type=“time” | 限制用户输入必须为时间类型 |
type=“month” | 限制用户输入必须为月类型 |
type=“week” | 限制用户输入必须为周类型 |
type=“number” | 限制用户输入必须为数字类型 |
type=“tel” | 手机号码 |
type=“search” | 搜索框 |
type="colorl | 生成一个颜色选择表单 |
1.4 HTML5新增的表单属性
属性 | 值 | 说明 |
---|---|---|
required | required | 表单拥有该属性表示其内容不能为空,必填 |
placeholder | 提示文本 | 表单的提示信息,存在默认值将不显示 |
autofocus | autofocus | 自动聚焦属性,页面加载完成自动聚焦到指定表单 |
autocomplete | off/ on | 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete=“on”,关闭autocomplete ="off"需要放在表单内,同时加上name属性,同时成功提交 |
multiple | multiple | 可以多选文件提交 |
可以通过以下设置方式修改placeholder里面的字体颜色:
input::placeholder {
color: pink;
}