Lavrena's Notes

Appearance

HTML基础梳理 ​

系统学习，查缺补漏

文档：MDN Web Docs (mozilla.org)

视频：尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频

HTML是一个超文本标记语言，遵循了W3C规范

标签(HTML元素) ​

  • 排版标签 （标题h1-h6 段落p）
  • 语义化标签（header/footer/article/section/main/audio/video）有实际含义的标签
  • 块级元素与行内元素 块级元素就像盒子一样会占一整行，行内元素默认水平排列，一行占满才会换行
  • 常用的文本标签 span em i
  • 不常用的文本标签
  • HTML图片标签
  • 相对路径/绝对路径
  • 常见图片格式
  • 超链接
    • 跳转页面
    • 跳转文件
    • 跳转锚点
    • 唤起指定应用
  • 超文本真正含义
  • 列表 ol ul dl
  • 表单 form
  • 框架标签 iframe
  • marquee div input等等

标签的属性 ​

每个标签都有自身的属性 通用的/特有的 HTML结构

表格 ​

  • 基本结构
  • 常用属性
  • 跨行/跨列colspan 跨列 rowspan 跨行
  • 表格的独有属性
  • table-layout 控制表格的列宽
  • 控制单元格之间的间距 border-spacing: 0;
  • 合并相邻的单元格的边框 border-collapse: collapse;
  • 隐藏没有内容的单元格 empty-cells: hide;
  • caption-side: top 控制表格标题的位置

表单 ​

基本结构 ​

html
<form name="" action="">
	
</form>

处理用户输入 ​

MDN文档上22种处理用户输入的方法

html
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset"> 
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

提交与重置 ​

提交：通过表单的action提交到指定位置，<input type=“submit”/> 触发提交

重置：<input type=“reset”> 恢复表单中的默认值，即value中定义的内容

普通按钮 ​

html
<button></button>

文本域和下拉框 ​

textarea cols=列数 rows=行数 select 下拉框

禁用表单控件 ​

在表单元素上增加disabled属性

label ​

点label标签的文字，input会获得焦点。用法：for=“input的ID名字”

html
<label for="abc">
	<input id="abc">
</label>

fieldset和legend ​

用途：对表单信息进行分类

html
<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>
    
    <input type="radio" id="kraken" name="monster" value="K" />
    <label for="kraken">Kraken</label><br />

    <input type="radio" id="sasquatch" name="monster" value="S" />
    <label for="sasquatch">Sasquatch</label><br />

    <input type="radio" id="mothman" name="monster" value="M" />
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

HTML注释 ​

使用<!-- -->注释的部分，不会被浏览器渲染到页面上，但是在开发者工具上可以看到被注释的内容

HTML文档声明 ​

<!DocType html>

字符编码 ​

设置语言 ​

通常在文档的根元素（html）上指定。

<html lang="en"></html> 表示当前元素的文本是用什么语言写的

标准结构 ​

  • HTML字符实体  空格
  • HTML全局属性 id，class，style, dir(文字的方向), title, lang

网页元信息 ​

用途：对网页的SEO进行优化

配置字符编码 ​

html
<meta charset="UTF-8">

针对IE浏览器的兼容性设置 ​

html
<meta http-equiv="X-UA-Compatible" content="IE=edge">

移动端兼容设置 ​

html
<meta name="viewport" content="width=device-width, initial-scale=1.0"