前端与移动开发-----HTML（二）

最新推荐文章于 2024-04-04 08:11:13 发布

東三城

最新推荐文章于 2024-04-04 08:11:13 发布

阅读量263

点赞数

分类专栏：前端与移动开发学习笔记 HTML学习笔记文章标签： html5

本文链接：https://blog.csdn.net/qq_40440961/article/details/109039142

版权

前端与移动开发学习笔记同时被 2 个专栏收录

75 篇文章 5 订阅

订阅专栏

HTML学习笔记

3 篇文章 0 订阅

订阅专栏

（接上一篇）

表格(用于显示，展示数据)

<table>
   <tr>     
   		<td>单元格内容</td>     ... 重复 td → 单元格
   </tr>   ... 重复 tr → 行 
 </table>

三个基本的表格标签如下：

其他表格的常用属性如下：
表格常用属性
表格案例：

代码：

<body>
    <table align="center" border="1" width="500" height="300" cellpadding="5" cellspacing="0">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <TR>
            <TD>1</TD>
            <td>鬼吹灯</td>
            <td><img src="./images/down.jpg" alt=""></td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com" target="_blank">百度</a>
            </td>
        </TR>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="./images/down.jpg" alt=""></td>
            <td>124</td>
            <td>675432</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com">百度</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com">百度</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>23</td>
            <td>75645</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com">百度</a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="./images/down.jpg" alt=""></td>
            <td>121</td>
            <td>7676</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com">百度</a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>57236</td>
            <td>634726</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com">百度</a>
            </td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="./images/up.jpg" alt=""></td>
            <td>234</td>
            <td>7686</td>
            <td><a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="http://www.baidu.com">百度</a>
            </td>
        </tr> 
    </table>
</body>

合并单元格
合并单元格的两种方式：
1.跨行合并（ rowspan ），把多个行的单元格合并 → 纵向合并；
2. 跨列合并（ colspan ），把多个列的单元格合并 → 横向合并。
合并单元格的步骤：
1.明确合并方式（跨行 / 跨列）；
2.找到目标单元格 td 增加合并单元格属性
–跨行 rowspan=“x” （纵向）；跨列 colspan=“y” （横向）–
3.删除多余的单元格。
实例：建立一个 3 * 3 的表格，代码素材如下：

<table border="1" width="300" height="180" cellspacing="0">
   <tr>
        <td></td>
         <td></td>
         <td></td>
    </tr>
    <tr>     
    	<td></td>     
    	<td></td>     
    	<td></td>   
    </tr>   
    <tr>     
    	<td></td>     
    	<td></td>     
    	<td></td>   
    </tr> 
 </table>

将第 1 行的第 2 个和第 3 个单元格合并，参考代码如下：

<tr>   
	<td></td>   
	<td colspan="2">
	</td> 
</tr>

将第 1 列的第 2 个和第 3 个单元格合并，参考代码如下：

<tr>   
	<td rowspan="2"></td>   
	<td></td>   
	<td></td> 
</tr> 
<tr>   
	<td></td>   
	<td></td> 
</tr>

列表（用来布局）

三种列表：无序列表，有序列表，自定义列表
无序列表
无序列表的的基本语法如下：

<ul>   
<li>列表项内容</li>   
<li>列表项内容</li>   
<li>列表项内容</li>   
... 
</ul>

** li可以存放任何元素**

有序列表
有序列表的的基本语法如下：

<ol>   
	<li>列表项内容</li>   
	<li>列表项内容</li>   
	<li>列表项内容</li>   
	... 
</ol>

1.有序列表和无序列表区别：
答：有序列表 ol 会在列表项前面自动增加数字排序，并且排序依次递增
2.有序列表除了序号之外，与无序列表的使用及注意事项区别：
答：有序列表的的基本语法与无序列表基本一致，只需要把 ul 替换成 ol 即可；有序列表除了序号之外，与无序列表的使用及注意事项没有区别。

自定义列表（解释说明）
自定义列表的基本语法：

<dl>   
	<dt>名词1</dt>   
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	<dd>名词1解释3</dd>   
 	<dt>名词2</dt>   
  	<dd>名词2解释1</dd>
  	<dd>名词2解释2</dd>  
</dl>

自定义列表的内容是写在标签中：
dt 存放关键词的内容；dd 存放前面 dt 关键词对应的列表项内容。
实例：
无序列表

<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dd>相关下载</dd>
    </dl>
</body>

列表总结

表单

表单的组成：在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
表单域：包含表单元素的区域
在 HTML 标签中， form 标签用于定义表单域，以实现用户信息的收集和传递。

<form action=“url地址” method=“提交方式” name=“表单域名称"> 
   各种表单元素控件 
 </form>

表单标签：
1，input输入表单元素

<input type="属性值"  />

input 标签 type 的常用属性值：

实例：
文本框和密码框

<form>   
	<h4>用户信息</h4>   
	用户名：<input type="text" /><br />   
	密&emsp;码：<input type="password" /><br /> 
</form>

特殊符号是一个全角的中文空格，在界面布局时有时候非常有用
提交和重置按钮

<input type="submit" />&emsp;<input type="reset" />

单选按钮和复选框

姓&emsp;名：小帅 <input type="radio" /> 小美 <input type="radio" /><br /> 
爱&emsp;好：吃饭 <input type="checkbox" /> 睡觉 <input type="checkbox" /> 打豆豆 <input type="checkbox" /><br />

name 和 value 属性
1，将多个单选按钮设置相同的 name 属性，能够实现用户单选
2，同一组单选按钮或复选框， name 属性的值应该一致
3，value 属性可以记录用户在控件中输入的值或者选择结果
给已有控件增加 name 属性，要保证每一组的 name 值一致：

用户名：<input type="text" name="username" /><br /> 
密&emsp;码：<input type="password" name="pwd" /><br /> 
姓&emsp;名：小帅 <input type="radio" name="gender" /> 小美 <input type="radio" name="gender" /><br /> 
爱&emsp;好：吃饭 <input type="checkbox" name="hobby" /> 睡觉 <input type="checkbox" name="hobby" /> 打豆豆 <input type="checkbox" name="hobby" /><br /> 
期&emsp;望：月薪过万 <input type="radio" name="money" /> 8千也行 <input type="radio" name="money" /> 给钱就行 <input type="radio" name="money" /><br />

给每个输入项增加 value 属性，再次浏览页面，观察页面执行效果：

用户名：<input type="text" name="username" /><br /> 密&emsp;码：<input type="password" name="pwd" /><br /> 
姓&emsp;名： 小帅 <input type="radio" name="gender" value="male" /> 小美 <input type="radio" name="gender" value="female" /><br /> 
爱&emsp;好： 吃饭 <input type="checkbox" name="hobby" value="eat" /> 睡觉 <input type="checkbox" name="hobby" value="sleep" /> 打豆豆 <input type="checkbox" name="hobby" value="likeDouDou" /><br /> 
期&emsp;望： 月薪过万 <input type="radio" name="money" value="10000" /> 8千也行 <input type="radio" name="money" value="8000" /> 给钱就行 <input type="radio" name="money" value="free" /><br />

checked 和 maxlength 属性
checked 属性的应用场景：
答：如果用户要修改之前保存过的信息， checked 属性可以选中用户之前的选择，例如：修改个人信息；用 checked 属性可以帮助用户默认同意用户协议。
maxlength 属性的应用场景：
答：某写输入项有长度限制时，可以使用 maxlength 属性。
label 标签
label 标签的作用：label 可以和表单中的元素绑定，增加点击范围，提高用户体验。

 <label for="text" >用户名：</label><input type="text"  name="用户名" id="text"> <br>
 <label for="mm">密　码：</label><input type="password" name="密码" id="mm"><br>

2，select下拉表单元素
下拉列表的基本语法：

<select>   
	<option>选项 1</option>   
	<option>选项 2</option>   
	<option>选项 3</option>   
	... 
</select>

实例：
增加籍贯的下拉列表

籍&emsp;贯：<select name="home">   
<option>安徽</option>   
<option>北京</option>   
<option selected>火星</option> 
</select ><br />

3， textarea 文本域元素
文本域的应用场景：如果需要输入大量文字并且需要换行时，可以使用文本域。
文本域的基本语法：

<textarea></textarea>

（完）明天更新综合案例。
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

東三城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
前端与移动开发-----HTML（二）

（接上一篇）今天学习了HTML表格，列表，表单。表格(用于显示，展示数据)<table> <tr> <td>单元格内容</td> ... 重复 td → 单元格 </tr> ... 重复 tr → 行 </table>三个基本的表格标签如下：其他表格的常用属性如下：表格案例：代码：在这里插入代码片...
复制链接

扫一扫