表单标签
目标:能够使用表单相关标签和属性,实现网页中表单类网业结构搭建
- input系列标签
- button按钮标签
- select下拉菜单标签
- textarea文本域标签
- label标签
input 标签
input标签可以通过type值属性的不同、展示不同的效果
昵称;<input type="text" placeholder="请输入你的昵称"><br>
<!-- 单选框 radio -->
性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br>
爱好;
<input type="checkbox" checked>敲代码
<input type="checkbox" checked>学习
<input type="checkbox" >生活<br>
<input type="file" multiple>多文件选择
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
代码全图
<body>
<form >
昵称;<input type="text" placeholder="请输入你的昵称"><br>
密码:<input type="password" placeholder="请输入你的密码"><br>
<!-- 单选框 radio -->
性别:<input type="radio" name="sex" checked>男
<input type="radio" name="sex">女<br>
爱好;
<input type="checkbox" checked>敲代码
<input type="checkbox" checked>学习
<input type="checkbox" >生活<br>
<input type="file" multiple>
<br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>
效果图:
生日:<input type="date">
效果图:
button按钮标签
<form action="">
昵称;<input type="text" placeholder="请输入你的昵称"><br>
<button type="submit">buttont提交按钮</button>
<button type="reset">buttont重置按钮</button>
<button type="button">buttont普通按钮</button>
</form>
效果图:
所在城市:<select>
<option>王俊凯</option>
<option>王源</option>
<option selected>易烊千玺</option>
</select>
效果图:
<!-- 文本域 可输入多行文本,多用于网业评论区域等 -->
<textarea name="" id="" cols="60" rows="10"></textarea>
<!-- 第一种方法 -->
<input type="checkbox" checked id="one"><label for="one">敲代码</label>
<!-- 第二种方法 -->
<label >
<input type="checkbox" checked>搞学习
</label>
点汉字就可选中对勾
语义化标签
目标:能够认识开发中常用的 没有语义布局标签( div、span )和 有语义的布局标签
<div>我是努力学习的人</div>
<div>我是努力学习的人</div>
<div>我是努力学习的人</div>
<span>我是人</span>
<span>我是人</span>
<span>我是人</span>
效果图:
常见有语义的布局标签有哪些?
• header:网页头部
• nav:网页导航
• footer:网页底部
• aside:网页侧边栏
• section:网页区块
• article:网页文章
字符实体
目标:能通过 字符实体 在网页中显示特殊符号
学习路径:
- HTML中的空格合并现象
场景:如果在html代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格 - 常见字符实体
<!-- html空格合并现象 -->
我是好人 不,你不是
<!-- HTML会解析标签 大于号、小于号-->
p标签长这样: <p></p>
效果图: