HTML查缺补漏

文章目录

11.6~11.13总结


提示:以下是本篇文章正文内容,下面案例可供参考

一、熟记

1.换行和水平线

html 复制代码
<br>
<hr>

2.文本格式化标签

html 复制代码
<strong>  加粗
<ins>  下划线
<del>  删除线
<em>   倾斜

3.列表

1)无序列表

html 复制代码
<ul>
  <li>第一项</li>   ul标签里面只能包裹li标签
  <li>第二项</li>    li标签里面可以包裹任何内容
  <li>第三项</li>
  ......
</ul>

2)定义列表

html 复制代码
<dl>
  <dt>列表标题</dt>      dl里面只能包含dt和dd
  <dd>列表描述 / 详情</dd>  dt和dd里面可以包含任何内容
   ......
</dl>

<dl>
  <dt>列表标题</dt>
  <dd>列表描述 / 详情</dd>
   ......
</dl>

3)有序列表(略)

4.表格(老忘!!)

表格默认没有边框线,使用border属性可以为表格添加边框线,代码记住这样,简简单单啦~

html 复制代码
<table border="1">
  <tr>
    <th>姓名</th>
    <th>语文</th>
    <th>数学</th>
    <th>总分</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>99</td>
    <td>100</td>
    <td>199</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>98</td>
    <td>100</td>
    <td>198</td>
  </tr>
  <tr>
    <td>总结</td>
    <td>全市第一</td>
    <td>全市第一</td>
    <td>全市第一</td>
  </tr>
</table>

5.表单(我滴乖,这个也记不住!!)

1)input标签

设置type属性值不同,则功能不同。

html 复制代码
<input type="..." >

2)

占位文本:提示信息,文本框和密码框都能用

html 复制代码
<input type="..." placeholder="提示信息">

3)单选框

html 复制代码
<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女

4)上传文件

html 复制代码
<input type = "file" multiple>

5) 下拉菜单

html 复制代码
<select>
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
  <option selected>武汉</option>
</select>

selected 属性实现默认选中功能

6)label标签

用label标签绑定文字和表单控件的关系,增大表单空间的点击范围。

支持 label 标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

写法一:

html 复制代码
<input type="radio" id="man">   两个man一样
<label for="man">男</label>

写法二:

html 复制代码
<label><input type="radio"> 女</label>

7)button按钮

action 发送数据的地址

html 复制代码
<!-- form 表单区域 -->
<!-- action="" 发送数据的地址 -->
<form action="">
  用户名:<input type="text">
  <br><br>
  密码:<input type="password">
  <br><br>

  <!-- 如果省略 type 属性,功能是 提交 -->
  <button type="submit">提交</button>
  <button type="reset">重置</button>
  <button type="button">普通按钮</button>
</form>

6.无语义的布局标签

html 复制代码
div :独占一行
span:不换行

<div>div 标签,独占一行</div>
<span>span 标签,不换行</span>

7.字符实体(专业名字就是专业!)

html 复制代码
&nbsp   //空格

总结

还是有记住一点的~

相关推荐
Alice-YUE1 天前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript
是上好佳佳佳呀1 天前
【前端(十一)】JavaScript 语法基础笔记(多语言对比)
前端·javascript·笔记
CDN3601 天前
排查实录:网站偶发502/504错误?360CDN回源超时配置与日志分析技巧
前端·数据库
之歆1 天前
Day07_CSS盒子模型 · 样式继承 · 用户代理样式
前端·css
DanCheOo1 天前
AI 应用的安全架构:Prompt 注入、数据泄露、权限边界
前端·人工智能·prompt·安全架构
We་ct1 天前
深度剖析浏览器跨域问题
开发语言·前端·浏览器·跨域·cors·同源·浏览器跨域
weixin_427771611 天前
前端调试隐藏元素
前端
爱上好庆祝1 天前
学习js的第五天
前端·css·学习·html·css3·js
C澒1 天前
IntelliPro 产研协作平台:基于 AI Agent 的低代码智能化配置方案设计与实现
前端·低代码·ai编程
一袋米扛几楼981 天前
【Git】规范化协作:详解 GitHub 工作流中的 Issue、Branch 与 Pull Request 最佳实践
前端·git·github·issue