04-HTML

HTML

html转义字符（实体）

语法：&开头，;结尾，中间是#开头的16进制数字或直接是助记符，自定义图标字体也是使用这种方式写的

html转义字符查询

全局属性

• class：类选择器查找标志
• id：id选择器查找标志，一般在一个网页中id值是唯一的
• title（鼠标悬停显示title中的内容）
• name：在表单中代表key的值，在a、iframe、from中均表示名称
• style：内敛css样式
• js的事件属性：on前缀，要注意的是该属性值是触发事件执行的代码而不是一个函数，所以不能使用函数名，而是执行函数的语句

文字段落标签

• <h1></h1>~<h6></h6>：标题
• <p></p>：段落
• <pre></pre>：预格式化段落
• <br>：换行
• <i></i>和<em></em>：斜体
• <b></b>和<strong></strong>：加粗
• <sub></sub>：下标
• <sup></sup>：上标
• <blockquote></blockquote>：长引用，像ul、ol一样会有一定外边距
• <q></q>：短引用，自动加双引号

图像和超链接

锚点可以使用标签的id属性，也可以使用a标签的name属性，id属性的优先级高于a标签的name属性

• <a></a>：连接
  • href：必须，跳转、发送邮件和下载文件
    • URL：跳转，可以是站内连接（相对URL路径），可以是站外连接（绝对URL路径），也可以是锚点连接（井号后跟锚点，若只有井号则标识空锚点连接跳转到页面顶部），甚至还可以使用URL和锚点的组合实现跨页锚点
    • mailto:邮箱地址：发送邮箱，前提是有邮箱软件
    • tel:电话：拨打电话，前提是浏览器连接多个设备
    • 资源文件路径：其实和跳转是一样的，若是html文件也是将其下载之后展示，不是html文件下载下来不展示而已
  • target：连接的目标窗口
    • _self：默认，当前窗口打开
    • _blank：新窗口打开
• <img>：图像
  • src：必须，图片的URL地址，也可以是base64字符串``
  • alt：图片失效时替换的文字
• <iframe></iframe>：内敛框架，引入其他网页
  • src：其他页面URL地址

div和span标签

• <div></div>：声明块级元素区域
• <span></span>：声明行内元素区域

列表标签

• <ul></ul>：声明无序列表
• <ol></ol>：声明有序列表
• <li></li>：声明列表项
• <dl></dl>：声明定义列表
• <dt></dt>：声明定义列表项（标题，一个）
• <dd></dd>：对定义列表项的描述，（描述，多个）

表格

table标签属于特殊的块元素，宽度由内容撑开，独占一行是因为浏览器为他扩充了外边距，也就是说表格中外边距的扩充优先级高于宽度

标准的表格必须包含一个tbody标签，若有thead和tfoot，最好的将表格结构按照顺序摆放

若不按顺序插入浏览器解析也会将其按顺序摆放thead在最上方，tfoot在最下方

若有多个thead和tfoot则浏览器只会在意第一个出现的thead和tfoot

• <table></table>：声明表格
  • cellspacing：表格中单元格之间空隙
  • cellspacing：表格中单元格内容留白
  • rules：表格中内侧边框，即单元格边框显示规则
    • none：没有线条
    • groups：组与组之间有线条，即不同表格结构之间
    • rows：每行之间有线条
    • cols：每列之间有线条
    • all：行列都有线条
• <caption></caption>：表格标题
• <tr></tr>：声明行，必须在table中
• <td></td>：声明单元格，必须在tr中
  • colspan：跨列合并
  • rowspan：跨行合并
• <th></th>：声明表头单元格，必须在tr中
  • colspan：跨列合并
  • rowspan：跨行合并
• <thead></thead>：声明表头结构，应该包含th单元格
• <tbody></tbody>：声明表体结构
• <tfoot></tfoot>：声明表脚注结构

表单

这些表单控件都有的属性

• form：表示关联的表单域
• readonly：表示该表单不允许修改，只读模式
• disabled：禁用
• name：表单控件的名字，提交服务器的键，只有设置了name的表单控件才能提交服务器

• <form></form>：声明表单域

  • action：表单提交URL地址
  • method：表单提交方式
  • name：表单名
  • enctype ：数据编码，在GET请求时无效
    • application/x-www-form-urlencoded：默认格式
    • text/plain：文本格式
    • multipart/form-data：混合表单数据格式，用于文件上传

• <input>：表单输入

  • type：表单的类型
    • text：文字域
    • password：密码域
    • checkbox：复选域
    • radio：单选域
    • hidden：隐藏域
    • file：文件域
    • image：图像提交按钮，要指定src图片URL
    • button：普通按钮
    • submit：提交按钮
    • reset：重置按钮
  • name：提交服务器的键
  • value：初始值，也是提交服务的值
  • maxlength：输入的最大字符限制
  • checked：选中状态

• <select></select>：菜单列表，设置name属性

  • size：显示选项的条目，默认是一个

• <option></option>：菜单列表项，设置value属性

  • selected：默认选中

• <optgroup></optgroup>：菜单列表项目分组

  • label：组描述

• <textarea></textarea>：文本域输入，内容不在是value中，而是标签包裹的是内容