Web入门 | 青训营笔记

Jokerlkc
121 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

Web入门

  • mdn web docs

    • 01 Web入门

      • 您的网站会是什么样子？

        • 设计网站外观时需要考虑哪三个问题？

          • 网站的主题是什么？（什么事物）
          • 基于所选主题要展示哪些信息？（什么标题）
          • 网站采用什么样的外观？（什么样式）

        • 设计网站外观时为什么需要画草图？

          • 可以大致勾勒出所希望的网站样子
          • 是一个好习惯
          • 从大到小，大局观

      • 处理文件

        • 网站应该保存在何处？

          • 所有相关文件应该放在一个单独文件夹中
          • 可以映射出服务器端站点文件结构

        • 为什么文件命名要求小写并且没有空格？

          • 许多计算器和网络服务器区分大小写
          • 浏览器、网络服务器和编程语言对空格的处理不一致
          • 为了避免不必要的麻烦，使用小写字母和短横线

        • index.html 文件 是什么？

          • 存放主页（首页）内容

        • images 文件夹 是什么？

          • 存放网站上使用的所有图片

        • styles 文件夹 是什么？

          • 存放用于设置样式的CSS代码

        • scripts 文件夹 是什么？

          • 存放用于向网站添加交互功能的JavaScript代码

      • 文件路径

        • 应用文件时要注意什么？

          • 应使用相对路径
          • 使用正斜杠应用 /

      • HTML 基础

        • HTML 是什么？

          • 超文本标记语言 Hypertext Markup Language
          • 由一系列的 元素（elements） 组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。
          • image.png

        • HTML 元素中包含什么？

          • 开始标签（必要） ：<标签>
          • 结束标签（必要）： </标签>
          • 内容： 文本
          • 元素：开始标签、结束标签与内容相结合
          • 属性：自定义属性和其值

        • HTML 嵌套元素是什么？（缺少例子）

          • 元素中还有元素
          • 需要有始有终（要有完整的开始和标签）

        • HTML 中 <!DOCTYPE html> 有什么用？

          • 用来链接一些 HTML 编写守则（如自动查错）
          • 在当今作用有限，仅用于保证文档正常读取

        • HTML 中 <head> 元素有什么用？

          • 该元素的内容对用户不可见
          • 存放配置文件如js、css等
          • 面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。

        • HTML 的标题是什么元素（页面标题和级别标题）？

          • <title></title> ：设置页面的标题，也作为收藏网页的描述文字，同时是搜索引擎的标题
          • <h1></h1> ：一级标题
          • <h2></h2> ：二级标题
          • <h3></h3> ：三级标题

        • HTML <p> 元素有什么作用？

          • 用于指定常规的文本内容段落

        • HTML 列表元素有哪些？

          • <ul></ul> ：无序列表
          • <ol></ol> ：有序列表
          • <li></li> ：列表项
          • image​

        • HTML 的表格标签有哪些？

          • <dl></dl> 表格列表
          • <dt></dt> 列表标题
          • <dd></dd> 列表内容
          • image

        • HTML 链接元素是什么？

          • <a> ：包含文本
          • href 属性：指定地址
          • <a href="这里是网址"> 这里是网址描述文本 </a> 在当前页面打开
          • <a href="这里是网址" target="_blank">这里是网址描述文本</a> 在新标签页打开

        • HTML 要使文本内容斜体用什么标签？

          • <em><em>

        • HTML 要使文本内容加粗用什么标签？

          • <strong><strong>

        • HTML 是一个什么样的结构？

          • 树形结构
          • image

        • HTML <meta> 的常用属性有哪些？

          • <meta charset="UTF-8"> 设置文档的编码形式
          • <meta name="description" content="这里是网站简要说明文字"> 设置网站的简要说明文字
          • <meta name="keywords" content="这里是网站的关键字"> 设置网站的关键字

        • HTML 如何设置网站Logo？

          • <link rel="icon" href="这里是Logo图片的相对路径">

        • HTML 中的块状元素是哪个？

          • div

        • HTML 中的行内元素是哪个？

          • span

        • HTML 中的多媒体元素有哪些？

          • <img><img> 图片
          • <audio><audio> 视频播放空间（进度条和播放暂停）
          • <video><video> 视频
          • image

        • HTML 中的输入<input>元素有哪些常用属性？

          • <input> 普通文本框
          • <input placeholder="文本框内默认文本"> 设置默认文本 placeholder
          • type="输入文本格式" 设置输入格式 属性值有：range、date、number等
          • min=" " max=" "  设置输入的最小和最大限制
          • <textarea></textaea>  输入多行的文本框
          • image

        • HTML 中如果要输入多行用什么元素？

          • <textarea></textaea>  输入多行的文本框

        • HTML 中让用户选择文件的控件怎么写？

          • <input type="file">
          • <input type="submit">

      • CSS 基础

        • CSS 选择器有哪些？

          • image​
          • class 类选择器、简单选择器，可以有多个同时生效 用 .
          • id 属性选择器 用 #
          • 伪类选择器
          • 后代选择器

      • JavaScript基础

      • 发布您的网站

      • Web 如何运作

avatar
文章
阅读
粉丝