对HTML基础部分的学习今天也到达了尾声，内容有很多哦，耐心观看
列表
无序列表
无序列表需要用到 ul 标签 在标签内部是 li 标签 代码如下
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
<li>哈密瓜</li>
<li>火龙果</li>
</ul>
效果如上图
有序列表
<ol>
<li>张三：100</li>
<li>李四：99</li>
<li>王五：60</li>
</ol>有序列表和无序列表的差距就是 外部关键字 有序的为 ol 其余部分一样
效果如下
自定义列表
自定义列表德不同之处就有很多了
<dl>
<dt>帮助中心</dt> <!--这时还不对其需要css-->
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>首先就是外部标签不同
dt 就相当于列表的表头
dd 和上面的 li 原理就一样了
效果如下
此时的表头很别扭，没办法谁让咱不会css呢，放心在等几天咱就会了别急！
表格
<table border="1">
<caption><h3>优秀学生信息</h3></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<!-- 2是合并俩个单元格 -->
<td>张三</td>
<td>2021083412</td>
<td>214</td>
</tr>
<tr>
<!-- <td>高三</td> 被删除用来合并 -->
<td>李四</td>
<td>2021083311</td>
<td>211</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
<!-- <td>你们都很优秀</td> -->
<!-- <td>你们都很优秀</td> -->
</tr>
</table>表格的整个表的标签是 ：table
表格的行标签是： tr
表格的属性信息：th
表格的每一个格的标签的 ：td
caption：此标签的作用是 表格的表头（提示此表格记录的数据作用）
其中想要进行表格的合并 有两种方式
border：这个属性是表格的 线 数字代表线的宽度
first ：跨行和并（竖着的格合并）属性名是：rowspan=”数字“ 这里面的数字的意思是合并几个格
second：跨列合并（横着的格合并）属性名是：colspan=”数字“数字依旧是合并的格数
注意！合并格子时一定要遵守上图的步骤哟
上述代码效果如下
此外为了增加表格代码的可读性和浏览器运行的效率，还有三个标签
这三个标签对生成的表格无影响！
代码中的应用如下
<table border="1"> <!--这个是整个表格-->
<caption><strong>大力成绩单</strong></caption>
<thead>
<tr> <!--这个是表格的一行-->
<!-- <td>姓名</td> 这个是格子 -->
<!-- <td>成绩</td> -->
<!-- <td>评语</td> -->
<!-- 现在这样没有格子 （线条）想要有线条需要加属性-->
<th>姓名</th> <!--表头 加粗和居中-->
<th>能力</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>存在感低</td>
<td>不存在的人</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总结</th>
<!-- <td>nb</td> --> <!--如果不删除，合并不会成功！-->
<td colspan="2">情报king,联系队友靠四哥</td>
</tr>
</tfoot>
</table>表单
文本框
文本框:<input type="text" placeholder="请输入用户名">
<!-- <input type="text"> 不换行--> placeholder作用是在文本框中提示输入的东西哦
框框里的就是它的杰作啦
不加placeholder 框框里就是空白一片
密码框
输入的数字是隐藏起来的
密码框:<input type="password" placeholder="请输入密码">效果如下
单选框
<!-- 单选框:<input type="radio"> -->
<!-- 想要实现真正的单选需要 加属性name！ -->
性别:<input type="radio" name="sex" id="nan" checked><label for="nan">男 </label>
<!-- 男为第一种方法 -->
<!-- 女为第二种方法 直接用lable将input标签圈起来即可-->
<!-- 作用是点击文字也可以选中 增加用户的体验 -->
<label> <input type="radio" name="sex">女</label>单选框想要实现真正的单选就必须要加入 name属性标签
label：这个标签的作用是让使用者点击文字依然可以选中
checked：此属性是添加默认
其中label标签有两种用法
first 如上代码 男性的代码段
second 如上代码女性的代码段（我更推荐用第二种，操作简单葱爆）（新手的建议）
上述代码效果如下
多选框
喜欢的类型: <label><input type="checkbox">性感</label>
<label><input type="checkbox">御姐</label>
<label><input type="checkbox" checked>可爱</label>
<label><input type="checkbox">妖娆</label>多选框也可以配合 checked 属性使用 增加默认
效果如下
（设置了默认）
多选
上传文件
上传文件：<input type="file" multiple> multiple：属性作用是可以多选文件上传，不加只能上传一个
效果如下
按钮
<!-- 想要submit 和reset 功能可以实现 需要一个表单域标签 form -->
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
<!-- button也可以作为标签 -->
<button>nomal</button>
<button type="submit">提交</button>
<button type="reset">重置按钮</button>
<!-- 属性 xxx="xxx" -->
<!-- value属性就是改变按钮的文字 -->按钮有两种写法
需要注意的是button作为标签的时候记得加入属性 type
value属性的作用就是改变按钮上的字
效果如下
下拉菜单
<select>
<!-- 默认选中第一个 -->
<option>内蒙古</option>
<option>新疆</option>
<option>宁夏</option>
<option>广西</option>
<option selected>西藏</option>
<!-- 想要改变默认需要加入selected 属性 -->
</select>效果
下拉菜单的默认选项一般是第一个
但是 也可以通过 selected 属性更改
textarer文本域
<textarea cols="60" rows="10"></textarea>
<!-- cols宽度 rows可见行数，但是并不常用，以后用css调！！有拖拽功能 将来要用css禁用 -->效果如下
可以通过右下角来控制大小
表单默认选中的小总结
实体字符
<!-- 网页中只有一个空格，这时候就需要实体字符啦 -->
无敌 寂寞
<!-- 基本只需要记住空格即可 -->很少用基本只需要记住空格即可
语义化标签
<!-- 这俩无语意 -->
<div>这是div标签</div>
<!-- 和普通文字一样，但是它独占一行 -->
<div>这是div标签</div>
<span>这是span标签</span>
<!-- 和普通文字一样，但是他不独占一行 -->
<span>这是span标签</span>
<!-- css中使用的频率非常的高 -->
这些都是做手机端网页需要用到的，目前了解即可
今日实战
表格
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1">
<caption><h3>优秀学生信息</h3></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<!-- 2是合并俩个单元格 -->
<td>张三</td>
<td>2021083412</td>
<td>214</td>
</tr>
<tr>
<!-- <td>高三</td> 被删除用来合并 -->
<td>李四</td>
<td>2021083311</td>
<td>211</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
<!-- <td>你们都很优秀</td> -->
<!-- <td>你们都很优秀</td> -->
</tr>
</table>
</body>
</html>效果如下
表单
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="">
<!-- form必须写，因为要保证写的代码德功能可以用 -->
昵称:<input type="text" placeholder="请输入姓名">
<br>
<br>
性别:
<label><input type="radio" name="sex" checked>男</label>
<label><input type="radio" name="sex">女</label>
<br>
<br>
<select>
<option>北京</option>
<option selected>上海</option>
<option>内蒙古</option>
</select>
<br>
<br>
婚姻状况: <label><input type="radio" name="marry" checked>已婚</label>
<label><input type="radio" name="marry">未婚</label>
<label><input type="radio" name="marry">保密</label>
<br>
<br>
喜欢的类型: <label><input type="checkbox">性感</label>
<label><input type="checkbox">御姐</label>
<label><input type="checkbox" checked>可爱</label>
<label><input type="checkbox">妖娆</label>
<br>
<br>
个人介绍: <br><textarea name="" id="" cols="50" rows="10"></textarea>
<br>
<br>
<h3>我承诺</h3>
<ul>
<li>18岁,单身</li>
<li>18岁,单身</li>
<li>18岁,单身</li>
</ul>
<br>
<br>
<input type="checkbox">我同意所有条款
<br>
<br>
<!-- <button submit>免费注册</button> -->
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
</html>效果如下
今天的内容很多需要消化
真的好累！！！好多
今日打开完成
HTML基础部分就到这里啦
明天开始css基础学习
明天见
扫一扫
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
