前端：HTML-CSDN博客

本文链接：https://blog.csdn.net/Poggie/article/details/126728384

1. HTML

标签名	定义	说明
	HTML标签	页面中最大的标签—根标签
	文档头部	其中必须要设置的是title
	文档标题	页面拥有的标题
	文档主体	基本包含文档所有内容

标签分类	相关内容
标题标签	不同级别的不同大小
段落标签
换行标签
文本格式化标签
盒子标签	一行一个/多个
图像标签	相对/绝对路径
超链接标签	内部/外部/空/下载/网页元素链接，锚点链接
注释标签	页面不显示，帮助理解代码
特殊字符	空格，> < ￥ …
表格标签	展示数据，对齐，边框，宽度，空白…推荐css写
表格结构标签
表单标签	交互收集信息，label标签，input，select，textarea
列表标签	布局内容，有/无序/自定义列表

 标题标签
  <h1>一级</h1>
 
 段落标签
  <p>这个是的。</p>
 
 换行标签
  <br/> 
  <br>
 
 文本格式化标签
  <strong>加粗</strong>   
  <em>斜体</em>   
  <del>删除线</del>  
  <ins>下划线</ins>
 
 盒子标签
  <div>一行一个</div> //大盒      
  <span></span>//一行多个布局，小盒
 
 图像标签
  <img src='路径'   alt='图片不显示时的替换文本   title='鼠标移入的提示文本'       
       width='图像宽度'   height='图像高度---只需修改一个就会等比例拉伸和缩放'    
       border='图片边框'/>  
 
 超链接标签
 <a href="链接目标的url地址"  target="页面打开方式,_self为默认值，
      _blank为在新窗口中打开方式">  文本或图像 </a>
 <a href="#">首页</a>  
   <a href=".zip或.exe">下载文件</a> 
 <a href="跳转的网址"><img src="图片"/></a> 
   <a href="#名字">跳转到页面的某个位置</a> 
     <h1 id="名字">目标位置</h1>
 
 注释标签&特殊字符
   <!--注释标签-->  
   &lt; 段落 &gt;
 
 表格标签
 <table id="表">
     <tr id="行-table row">
        <td id="单元格-table data">
        </td>
     </tr>
 </table>
 <table id="表">
     <tr id="行-table row">
        <th id="表头单元格-table head，会居中加粗">
        </th>
     </tr>
 </table>
 <table>
     <thead id="thead中必须有tr标签">
         <tr>
             <th></th>
         </tr>
     <thead/>  
     <tbody>
         <td colspan='2'></td>
         <td rowspan='2'></td>
     <tbody/>
 </table>
 
 列表标签
 <!--无序列表，样式可由css设置-->
  <ul id="ul中只能有li标签">
      <li id='等同于一个容器，可以放任何元素'></li>
      <li></li>
      ...
  </ul>
 
 <!--有序列表-->
  <ol id="ol中只能有li标签">
      <li id='等同于一个容器，可以放任何元素'></li>
      <li></li>
      ...
  </ol>
 
 <!--自定义列表-->
  <dl id="dl中只能有dt，dd标签">
      <dt id='等同于一个容器，可以放任何元素'>名词</dt>
      <dd id='等同于一个容器，可以放任何元素'>名称解释1</dd>
      <dd>名称解释2</dd>
        ...
  </dl>
 
 表单标签--input
 <form action='url' method='get/post' name='form1' maxlength="10">
     用户名：<input type="text" name="username" value='please input：'><br>
     密码：<input type="password" name='pwd'><br>
     性别：男<input type="radio" name='sex' value='male' checked="checked">
          女<input type="radio"  name='sex' value='famale'> <br>
     爱好：吃饭<input type="checkbox"  name='hobby'> 
          睡觉<input type="checkbox" name='hobby' checked="checked">
          打豆豆<input type="checkbox" name='hobby'> <br>
     上传头像：<input type="file" value='提交'> <br>
        <input type="submit" value='提交'> <br>
        <input type="reset" value='重置'> <br>
        <input type="button" value='获取短信验证码'> <br>
     
     label标签
     <label id="tele">联系方式</label>
     <input type='text' id='tele' value='请输入联系方式：'> <br>
 </form>
 
 表单标签--select,textarea
 <form action='url' method='get/post' name='form1' maxlength="10">
     <select>
         <option>--请选择--</option>
         <option></option>
         ...
     </select>
     
     <textarea rows="3" cols="20">
         请输入内容：
     </textarea>
 </form>

路径
- 目录文件夹
- 根目录–目录文件夹的第一层目录
- 相对路径–相对于当前文件
  
  相对路径分类符号说明
  同一级路径 <.img src=‘a.png’/>
  下一级路径 / <.img src=‘images/a.png’/>
  上一级路径 …/ <.img src=‘…/a.png’/>
- 绝对路径
  
  绝对路径分类图片位置
  盘符电脑中
  网络地址图片地址
特殊字符(无空格)

描述字符代码描述字符代码
空格符 & nbsp; < & lt;
> & gt; & & amp;
￥ & yen; 版权 & copy;
注册商标 & reg; 摄氏度 & deg;
正负号 & plusmn; * & times;
除号 & divide; 平方 & sup2;
立方 & sup3;

相对路径分类	符号	说明
同一级路径		<.img src=‘a.png’/>
下一级路径	/	<.img src=‘images/a.png’/>
上一级路径	…/	<.img src=‘…/a.png’/>

绝对路径分类	图片位置
盘符	电脑中
网络地址	图片地址

描述	字符代码	描述	字符代码
空格符	& nbsp;	<	& lt;
>	& gt;	&	& amp;
￥	& yen;	版权	& copy;
注册商标	& reg;	摄氏度	& deg;
正负号	& plusmn;	*	& times;
除号	& divide;	平方	& sup2;
立方	& sup3;

表格–Table标签

属性名	属性值	描述
align	left，center，right	表格相对周围元素的对齐方式
border	1或""	规定表格单元是否拥有边框，默认为“”，表示没有边框
cellpadding	像素值	单元边沿与其内容之间的空白，默认1px
cellspacing	像素值	单元格之间的空白，默认2px
width	像素值/百分比	表格的宽度

合并单元格
- 合并方式代码目标单元格
  跨行合并 rowspan=“合并单元格个数” 最上侧
  跨列合并 colspan=“合并单元格个数” 最左侧
- 合并步骤
  - 确定 rowspan – colspan
  - 找到目标单元格，确定合并个数，写入代码
  - 删除被合并的单元格

列表

列表类型标签使用场景
无序 ul li 菜单，布局
有序 ol li
自定义 dl dt dd 小标题+相关解释

合并方式	代码	目标单元格
跨行合并	rowspan=“合并单元格个数”	最上侧
跨列合并	colspan=“合并单元格个数”	最左侧

列表类型	标签	使用场景
无序	ul li	菜单，布局
有序	ol li
自定义	dl dt dd	小标题+相关解释

表单

表单域

会将其范围内的表单元素提交给服务器

属性	属性值	作用
action	url地址	指定接收并处理表单数据的服务器程序的url地址
method	get/post	设置表单数据的
name	名称	指定表单名称，区分同一页面的多个表单域

表单控件

input 输入表单元素

type属性	描述
button	定义可点击按钮（多数情况下，用于通过JS启动脚本）
checkbox	定义复选框
file	定义输入字段和“浏览按钮”，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的点击按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮会把表单数据发送到服务器
text	定义单行的输入按钮，用户可在其中输入文本，默认宽度为20个字符

其他属性	属性值	描述
name	用户自定义	定义input名称(主要是后台人员使用)
value	用户自定义	规则input元素的值(主要是后台人员使用)
checked	checked	规定此input元素首次加载时应被选中
maxlength	正整数	规定输入字段的字符最大长度

label标签

标签–label	作用
input元素定义标注/签	绑定一个表单元素，当点击标签内文本时，浏览器自动将焦点（光标）转到或者选择对应的表单元素上，增加用户体验