声明:本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记,如果想详细了解的可以搜索以下网址:
- H5C3+移动布局: 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
- JavaScript系列 :JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程(持续更新)
文章目录
HTML标签:表格、列表和表单
1.表格标签
表格不是用来布局页面的,而是用来展示数据的
1.1 表格的基本语法
<table> <!--用来定义表格的标签 -->
<tr> <!--用来定义表格中的行 -->
<th>表头文本内容</th> <!--一般表头单元格位于表格的第一行或第一列,里面的文本内容加粗居中显示 -->
<td>单元格内的文字</td> <!--用来定义表格中的单元格 -->
...
</tr>
...
</table> <!--必须是层层嵌套的关系 -->
1.2 表格结构标签
在表格标签中,分别用<thead>标签和<tbody>标签来更好的分清楚表格结构。
- <thead></thead>:用于定义表格的头部,其内部必须拥有<tr>标签,一般位于第一行
- 注意 <thead>和 <th>的区别: <th>是表头单元格,<thead>是代表表头区域,范围更广)
- <tbody></tbody>:用于定义表格的主体,主要用于放数据本体
<!-- 这些属性要写到表格标签table 里面去 -->
<table align="center" width="500" height="249" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
1.3 合并单元格
1.合并单元格的方式
- 跨行合并:rowspan=“合并单元格的个数”
- 跨列合并:colspan=“合并单元格的个数”
2.目标单元格:(写合并代码)
- 跨行:最上侧单元格为目标单元格,写合并代码
- 跨列:最左侧单元格为目标单元格,写合并代码
3.合并单元格三部曲:
- 先确定跨行还是跨列合并
- 找到目标单元格,写上合并方式=合并的单元格数量,例如 <td colspan=“2”></td>
- 删除多余的单元格(最后这步不要忘记!)
<table width="500" height="249" 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>
2.列表标签
列表用来布局,最大的特点就是整齐、整洁、有序
2.1 无序列表(最常用)
<ul> 标签表示HTML页面中的无序列表,一般会以项目符号呈现列表项,列表项使用
- 标签定义。
-
<ul> <li>列表项1</li> <li>列表项2</li> ... </ul>
- 无序列表的各个列表项之间没有顺序级别之分,是并列的
- <ul></ul>只能嵌套<li></li>,在其中输入其他标签或者文字的做法是不被允许的
- <li></li>之间相当于一个容器,可以容纳所有元素
- 无序列表会带有自己的样式属性,但在实际使用中,会使用CSS来设置
2.2 有序列表(理解)
<ol>标签用来定义有序列表,列表排序以数字显示,并且使用<li>标签来定义列表项
<ol> <li>列表项1</li> <li>列表项2</li> ... </ol>
- <ol></ol>只能嵌套<li></li>,在其中输入其他标签或者文字的做法是不被允许的
- <li></li>之间相当于一个容器,可以容纳所有元素
- 无序列表会带有自己的样式属性,但在实际使用中,会使用CSS来设置
2.3 自定义列表(重点)
<dl>标签用来定义描述列表,该标签会与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl>
- <dl></dl>只能嵌套<dt><dd>,在其中输入其他标签或者文字的做法是不被允许的
- <dt><dd>的个数没有限制,经常是一个<dt>对应多个<dd>(不是包含关系,是并列关系)
3.表单标签
使用表单的目的是为了收集用户信息
一个完整的表单的组成:表单域、表单控件(表单元素)和提示信息三个部分组成。
3.1 表单域(了解)
表单域是一个包含表单元素的区域
在HTML标签中,标签用于定义表单域,以实现用户信息的收集与传递,会把他范围内的表单元素信息提交给服务器。
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
3.2 表单控件(表单元素)
表单元素就是允许用户在表单中输入或选择的内容控件
-
<input>输入表单元素
<input type="属性值", name="username", value="username"/>
-
标签为单标签
-
type属性设置不同的属性值用来指定不同的控件类型
- text:文本框,用户可以在里面输入任何文字
- password:密码框,用户看不见输入的密码
- radio:单选按钮,可以实现多选一 例如:性别:男 女
- checkbox:复选框,可以实现多选
- submit:提交按钮,点击提交按钮后会把表单数据发送到服务器(value可以更改按钮上的文字信息)
- reset:重置按钮,可以还原表单元素初始的默认状态
- button:普通按钮,点击后不会将数据提交(例如短信验证码)
- file:文件域,用来上传文件
-
name 和 value属性(每个表单元素都要有的属性,主要给后台人员使用)
-
name是表单元素名称,例如性别的单选框(复选框)必须设置成相同的name才可以实现多选一
性别:男 <input type="radio", name="sex"> 女 <input type="radio", name="sex">
-
value 规定input元素的值(如下,按钮上面会显示value值)
<input type="submit" value="免费注册">
-
-
checked 和 maxlength属性
- checked:单选按钮和复选框可以设置成checked属性,当页面打开时就可以默认选中这个按钮
- maxlength:规定输入字段中的字符的最大长度
-
<form action="xxx.php" method="get"> <!-- text 文本框 用户可以里面输入任何文字 --> 用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br> <!-- password 密码框 用户看不见输入的密码 --> 密码: <input type="password" name="pwd" > <br> <!-- radio 单选按钮 可以实现多选一 --> <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --> <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 --> 性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> <br> <!-- checkbox 复选框 可以实现多选 --> 爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked"> <br> <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --> <input type="submit" value="免费注册"> <!-- 重置按钮可以还原表单元素初始的默认状态 --> <input type="reset" value="重新填写"> <!-- 普通按钮 button 后期结合js 搭配使用--> <input type="button" value="获取短信验证码"> <br> <!-- 文件域 使用场景 上传文件使用的 --> 上传头像: <input type="file" > </form>
-
<label>标签(input元素定义标注)
用于绑定一个表单元素,当点击
<label for="sex">男</label> <input type="radio" name="sex" id="sex"/> <!--label标签的for属性应当和相关元素的id属性相同>
-
<select>下拉表单元素
<select> <option selected="selected">河北</option> <option>北京</option> ... </select>
- select中至少包含一对<option>
- 在<option>中定义selected=“selected”时,当前项即为默认选中项
-
<textarea>文本域元素
用于定义多行文本输入的控件
<textarea row="3" cols="20"> 默认写入的内容 </textarea>
4. 查阅文档
- 百度:http://www.baidu.com
- W3C:http://www.w3school.com.cn
- MDN:https://developer.mozilla.org/zh-CN/