前端与HTML | 青训营笔记

70 阅读2分钟

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

  • 前端工程师使用WEB技术栈解决多端图形、用户界面交互问题的工程师。
  • 什么是前端?①解决GUI人机交互问题 ②跨终端(PC/移动浏览器、客户端/小程序、VR/AR等) ③WEB技术栈。
  • 前端技术栈
  1. HTML(内容)
  2. CSS(页面样式)
  3. JAVAScript(网页行为) 以上都运行在浏览器,浏览器通过网络协议与服务器端进行通信。
  • 前端要关注功能、美观、无障碍、安全、性能、体验。
  • HTML(HyperText Markup Language)超文本标签。超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。 <img src="photo.jpg" /> scr是属性名,“photo.jpg”是值。img为标签。该代码表示图片路径。

image.png

HTML语法

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

HTML实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>这是一个HTML实例</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>元素定义一个段落

标签

  • 语法<h1>标题内容</h1>
  • 段落标签<p>段落内容</p>
  • 有序列表 <ol><li> </li> <li> </li></ol>
  • 无序列表 <ul><li> </li><li> </li></ul>
  • 属性列表 <dl> <dt> </dt><dd> </dd></dl>
  • 超链接 <a href="链接内容"> 文字描述 </a>