HTML基础知识

HTML基础知识的思维导图总结，包括结构HTML页面元素和内容、表现CSS网页元素的外观和位置等页面样式(如：颜色、大小)、行为JS网页模型的定义与领面交互等内容。

HTML

• web标准
  • 结构 HTML 页面元素和内容
  • 表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小）
  • 行为 JS 网页模型的定义与页面交互
• HTML基础知识
  • HTML（Hyper Text Markup Language）
    • HTML（Hyper Text Markup Language）
  • HTML页面固定结构
    • HTML标签：网页的整体
    • head标签：网页的头部
    • body标签：网页的身体（主题HTML代码书写的地方）
    • title标签：网页的标题
  • VScode
    • 创建html主体：！+tab/enter
    • 在浏览器中查看：
      • 右键→open in default/other browser
      • alt+B/shift+alt+B
      • 注释：ctrl + /（不能在语句后，要换行）
  • 标签构成
    • 这是段落 (双标签)
    • (单标签)
  • 标签的属性
    • `<img src=" " alt=" ">`（图片单标签）
    • 属性名=“属性值”
  • 标签关系
    • 嵌套关系/并列关系
• 标签学习
  • 排版标签
    • 标签标题
      • <h1>标题一</h1>
      • h1-h6(放body里)
      • VS中同时多处光标闪烁：Ctrl+D
    • 段落标签
      • <p>段落</p>
      • VScode中自动换行：菜单栏→查看→自动换行
    • 换行'<br>'
    • 水平分割线'<hr>'
  • 文本格式化标签
    • 基本效果
      • b：加粗
      • u：下划线
      • i：倾斜
      • s：删除线
    • 重要性语句
      • strong：加粗
      • ins：下划线
      • em：倾斜
      • del：删除线
  • 媒体标签
    • 图片标签（单标签
      • 代码`<img src=” ” alt=” ”>`
      • 属性：src（目标图片路径；快捷键：./）
      • 属性：alt（替换文本；图片加载失败显示）
      • 属性：title（鼠标悬停显示提示文本）
      • 属性：width/height（只写一个图片不会变形）
    • 路径
      • 绝对路径：目录下的绝对位置，可直接到达目标位置
        • 盘符开头：D:\day01\images\1.jpg
        • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
      • 相对路径：从当前文件开始出发找目标文件的过程
        • 同级目录（快捷键：./）
        • 下级目录（快捷键：./）
        • 上级目录（快捷键：../）
    • 音频标签
      • 插入音频文件：VScode快捷键：./m...（模糊搜索）
      • 代码：`<audio src="./music.mp3" controls>文字</audio>`
      • 属性
        • src：音频路径
        • controls：显示播放的控件
        • autoplay：自动播放（部分浏览器不支持）
        • loop：循环播放
    • 视频标签
      • 插入视频文件：VScode快捷键：./m...（模糊搜索）
      • 代码：`<video src="./video.mp4" controls></video>`
      • 属性
        • src：视频路径
        • controls：显示播放的控件
        • autoplay：自动播放（谷歌浏览器需配合muted实现静音播放）
        • loop：循环播放
  • 链接标签
    • a标签/超链接/锚链接：点击之后，从一个页面跳转到另一个页面
    • 代码：`<a href=”./目标网页.html” target=”_blank”>超链接</a>`
    • 属性
      • href：点击之后跳转去哪一个网页（目标网页的路径）
      • target：目标网页的打开形式
        • target=“_self” (默认值，覆盖原网页)
        • target=“_blank” (新窗口，保留原网页)_
  • 列表标签
    • 无序列表
      • ul：表示无序列表整体，用于包裹li标签
      • li：表示无序列表的每一项，用于包含每一行的内容
      • ul标签只能包含li标签；li标签可以包含任意内容
    • 有序列表
      • ol：表示有序列表整体，用于包裹li标签
      • li：表示有序列表的每一项，用于包含每一行的内容
      • ol标签只能包含li标签；li标签可以包含任意内容
    • 自定义列表
      • dl：表示自定义列表整体，用于包裹dt/dd标签
      • dt：表示自定义列表标题
      • dd：表示自定义列表针对主题的每一项内容
      • dl标签只能包含dt/dd标签；dt/dd标签可以包含任意内容
  • 表格标签
    • 表格基本标签
      • table：表格整体，用于包裹多个tr
      • tr：表格每行，用于包裹td
      • td：表格单元格，可用于包裹内容
      • 标签的嵌套关系：table > tr > td
    • 表格基本属性（推荐CSS设置）
      • border=“数字”：边框宽度
      • width=“数字”：表格宽度
      • height=“数字”：表格高度
    • 表格标题和表头单元格标签
      • 在表格中表示整体大标题和一列小标题
      • caption：表格大标题（表格整体的大标题，默认在整体顶部居中位置显示）
      • th：表格单元格（表示一列小标题，通常用于表格第一行，文字加粗并居中）
      • 注意
        • caption标签书写在table标签内部
        • th标签书写在tr标签内部（用于替换td标签）
        • table > caption + tr > th
    • 表格的结构标签
      • thead：表格头部
      • tbody：表格主体
      • tfoot：表格底部
      • table > thead > tr > td
    • 合并单元格（属性值）
      • rowspan=“合并单元格的个数”：跨行合并/垂直合并
      • colspan=“合并单元格的个数”：跨列合并/水平合并
  • 表单标签
    • input标签
      • 基本介绍：input可以通过type属性值的不同，展示不同效果
      • text：文本框（单行文本）
        • placeholder：占位符，提示用户输入文本内容（常用属性）
        • 例子：`<input type="text" placeholder="请输入昵称">`
      • password：密码框
        • placeholder：占位符，提示用户输入文本内容（常用属性）
        • 例子：`<input type="password" placeholder="请输入密码">`
      • radio：单选框
        • name：分组；有相同name属性值的单选框为一组，一组同时只能有一个被选中
        • checked：默认选中
        • 例子：`<input type="radio" name="marry" checked> 单身`
      • checkbox:复选框
        • checked：默认选中
        • 例子：`<input type="checkbox" name="like"> 妩媚`
      • file:文件选择
        • multiple：多文件选择
        • 例子：
      • submit：提交按钮
        • 点击之后提交数据给后端服务器
        • 配合form标签使用：用form标签把表单标签一起包裹起来
        • 例子：`<input type="submit" value="免费注册">`
      • reset：重置按钮
        • 点击之后恢复表单默认值
        • 配合form标签使用：用form标签把表单标签一起包裹起来
        • 例子：`<input type="reset">`
      • botton：普通按钮
        • 默认无功能，配合JS添加功能
        • 配合form标签使用：用form标签把表单标签一起包裹起来
    • botton按钮标签（双标签）
      • submit：提交按钮
        • 点击之后提交数据给后端服务器
      • reset：重置按钮
        • 点击之后恢复表单默认值
      • botton：普通按钮
        • 默认无功能，配合JS添加功能
    • select下拉菜单标签
      • 在网页中提供多个选择项的下拉菜单表单控件
      • select标签：下拉菜单的整体
      • option标签：下拉菜单的每一项
      • 例子：`<select name="year"> <option value="">请选择年</option> <option value="">1990年</option></select>`
    • textarea：文本域标签（多行文本）
      • rows：规定了文本域内可见行数
      • cols：规定了文本域内可见宽度
      • 右下角可以拖拽改变大小；实际开发时针对于样式效果推荐用CSS设置
    • label标签
      • 绑定内容与表单标签关系
      • 方法一：`<input type="checkbox" id="one">``<label for="one">代码</label>`
      • 方法二：`<label><input type="checkbox">熬夜</label>`
  • 语义化标签
    • div/span：没有语义的布局标签
      • 实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
      • div标签：一行只显示一个（独占一行）
      • span标签：一行可以显示多个
    • 有语义的布局标签
      • header：网页头部
      • nav：网页导航
      • footer：网页底部
      • aside：网页侧边栏
      • section：网页区块
      • article：网页文章
  • 字符实体
    • 空格合并：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
    • 常见字符实体
      • &nbsp； 空格
      • &lt； 小于号
      • &gt； 大于号
      • &amp； 和号&
      • &quot； 引号
      • &apos； 撇号（IE不支持）
      • &cent； 分（钱）
      • &pound； 镑
      • &yen； 元
      • &euro； 欧元
      • &sect； 小节
      • &copy； 版权