前端与HTML｜青训营

用户2498662493669
53 阅读3分钟

前端与HTML｜青训营

前端工作的定义

  • 解决GUI人机交互问题
  • 跨终端服务
  • Web技术栈

前端技术栈拆解与分析

前端技术栈

  • HTML（内容）：用于创建网页的标准标记语言，HTML使用标记标签来描述网页
  • CSS（样式）：用来为网页创建样式表，通过样式表可以对网页进行装饰
  • JavaScript（行为）：用于控制网页的行为、响应用户操作

前端应该关注哪些方面

  • 图形界面下人机交互的问题。
  • 以及所设计内容的功能、美观、无障碍、安全、性能、兼容等
  • 前端不只局限于网页，还可以结合其他工具实现不同功能

HTML作用解析

HTML定义

  • HTML 指的是超文本标记语言：HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

HTML实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1> 
<p>我的第一个段落。</p>
</body>
</html>

解析

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如<meta charset="utf-8">定义网页编码格式为 utf-8
  • <title>元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

HTML 标签

  • HTML 标记标签通常被称为 HTML 标签 (HTML tag)
  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如<b>和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

HTML语法

  • 标签和属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required、readonly

HTML标记

列表

  • 无序列表：使用<ul>标签来创建无序列表，使用<li>表示列表项
  • 有序列表：使用<ol>标签来创建有序列表，使用<li>表示列表项
  • 定义列表：使用<dl>标签来创建有序列表，使用<dt>来表示定义的内容，使用<dd>来对内容进行解释说明

超链接

  • 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置
  • 使用<a>标签来定义超链接
    • 属性：
      • href 指定跳转的目标路径
        • 值可以是一个外部网站的地址
        • 也可以写一个内部页面的地址
      • target 用来指定超链接打开的位置
        • _self 默认值 在当前页面中打开超链接
        • _blank 在一个新的页面中打开超链接

多媒体

  • 使用<img>标签来引入外部图片，<img>标签是一个单标签
    • src属性 指定的是外部图片的路径
    • alt属性 图片的描述，默认情况下不会显示，但是有些浏览器会在图片无法加载时显示 搜索引擎会根据alt中的内容来识别图片
    • width 图片的宽度（单位是像素）
    • height 图片的高度
  • <audio> 用来向页面中引入一个外部的音频文件
    • controls 是否允许用户控制，不需要给值
  • <video> 标签用来向网页中引入外部视频文件

输入

  • <input>
  • <textarea> 用户输入长文字
  • <checkbox> 多选
  • <radio> 可以用name属性相同限制单选
  • <select> 下拉菜单
  • <input list="conturies"> 辅助用户输入

文本标签

  • <blockquote> 外部引用，cite属性代表来源
  • <cite> 短引用，书名、章节等
  • <q> 引用之前提到过的内容
  • <code> 代码
  • <em> 用于表示语音语调的加重
  • <strong> 用于表示内容重要，加粗

HTML的语义化

  • 规范元素、属性、属性值的含义
  • 便于团队维护
  • 提升无障碍性
  • 代码可读性
  • 搜索引擎优化
avatar
文章
阅读
粉丝