前端基础概述-HTML|青训营笔记

HenryBBBB
118 阅读2分钟

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

什么是前端

  • 解决人机交互问题

  • 运行于PC\移动端浏览器、小程序

  • 是展示给用户浏览的页面

前端该注重的方面

  • 满足用户所必须的功能需要

  • 界面美观

  • 能否对所有用户群体可用

  • 保证数据安全

  • 用户使用体验是否良好

  • 能兼容不同类型设备

开发环境

浏览器：

lllq-1658662968550.jpeg

编辑器:

image.png

核心技术

image.png

  • HTML：负责页面内容和结构，可以集成CSS和JavaScript
  • CSS：能够更直接的修改页面样式，使页面更美观
  • JavaSpript：定义页面的行为模式，使用户能对页面进行操作

HTML (HyperText Markup Language 超文本标记语言)

什么是HTML

  • HTML是一种用于描述网页的标记语言，能运行在浏览器上被浏览器解析并展示到页面上。
  • HTML文档包含标签和文本内容
  • HTML使用标签描述网页，也叫做web页面

超文本含义：

  • 能够加入图片、视频、音频等内容
  • 能通过超链接形式跳转到其他文件或页面

基本结构

DOM树 
graph TD
文档 --> html标签
html标签 --> head
html标签 --> body
head --> 标题标签:title
head --> 元信息标签:meta
body --> 主要内容

简单的案例演示

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

  • <!DOCTYPE html>表示html的版本，方便浏览器识别

  • <html></html>是整个页面代码的根元素

  • <head></head>包含标题，编码格式的主要信息

  • <body></body>包含文档的所有内容

HTML标签的特点

  • 标签与属性不区分 大小写
  • HTML标签通常成对出现，前面是开始标签，后面是结束标签，如 <a></a>
  • <body> 标签的内容才会在页面中显示

HTML标签

基本标签

  • <title> 定义标题
  • <h1> - <h6> 一级标题 - 六级标题
  • <p> 定义一个段落
  • <br> 定义换行
  • <hr> 定义一条水平线

特殊标签

  • <img> 定义图像
  • <audio> 定义音频文件
  • <video> 定义视频文件
  • <a> 定义一个连接
  • <link> 定义外部资源

功能标签

  • <form> 定义一个可输入的表单
  • <input> 定义输入控件
  • <button> 定义按钮
  • <ul> 定义一个无序列表
  • <ol> 定义一个有序列表
  • <table> 定义一个表格
  • <menu> 定义菜单列表
  • <select> 定义一个下拉列表
  • <option> 定义选择中的选项
avatar
文章
阅读
粉丝