前端与HTML | 青训营笔记

玖笙
70 阅读2分钟

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

前端

什么是前端

简言之——前端工程师是使用web技术栈解决多端下面的图形交互的工程师

  • 解决GUI人机交互问题
  • 跨终端
    • pc/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • web技术栈

前端技术栈

  • 前端技术主要分为三层：HTML（定义内容）、CSS（定义页面的样式）、JavaScript（定义用户点击后页面出现的行为）
  • 前端主要运行在浏览器上，需要通过网络协议与服务器进行交互

前端应该关注的方面

  • 功能：是否满足用户需求
  • 美观：适看
  • 安全：数据安全
  • 无障碍：是否实用与一些其他用户
  • 性能：用户体验是否好
  • 兼容：可运行一些平台上

前端边界

image.png

开发环境

image.png

HTML

什么是HTML

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HyperText ：标记图片、标题、连接 、表格
  • Markup Language：标记语言

HTML标签

  • ！doctype——决定html的渲染模式
  • html标签——所有的内容卸载里面
  • head表亲——存放页面元数据（不需要呈现给用户的内容）
  • body标签——用于存放页面内容
  • h1~h6标签——用来调节标题 image.png
  • 有序列表——<ol> </ol>
  • 无徐列表——<ul></ul>
  • 定义列表——<dl>
  • 链接——<a href="www.baidu.com">百度</a>
  • 输入代码：
<html>
    <head>
        <meta charset="UTF-8">
        <title>输入</title>
    </head>
    <body>
        <p><input placeholder="请输入用户名"></p>  <!-- 输入框 -->
        <p><input type="range"></p><!--范围滑动 -->
        <P><input type="number" min="1" max="10"></P><!-- 范围选择 -->
        <P><input type="date" min="2020-08-09"></P><!-- 日期选择 -->
        <P><textarea>hey</textarea></P><!-- 输入框依据输入内容而变化大小 -->
    </body>
</html>

输入效果

image.png

  • 选框代码
<html>
    <head>
        <meta charset="UTF-8">
        <title>选择</title>
    </head>
    <body>
        <!-- 复选框，一次性可以选择多个 -->
        <P>
            <label><input type="checkbox"/>苹果</label>
            <label><input type="checkbox" checked/>梨</label>
        </P>
         <!-- 单选框，一次只能选择一个 -->
         <P>
            <label><input type="radio" name="sport"/>足球</label>
            <label><input type="radio" name="sport"/>篮球</label>
        </P>
         <!-- 下拉选择框 -->
         <P>
            <select>
                <option>
                    水果
                </option>
                <option>
                    蔬菜
                </option>
                <option>
                    全选
                </option>
            </select>
        </P>
         <!-- 自由输入，有提示 -->
         <input list="countries"/>
         <datalist id="countries">
            <option>Greece</option>
            <option>us</option>
            <option>China</option>
         </datalist>

        
    </body>
</html>

选框实现效果

image.png

  • 引用代码
        <p>天才并不是自生自长在深林荒野里的怪物，室友可以使天才生长的

DOM树——html标签的解析

image.png

HTML语法

  • 标签属性不区分大小写，推荐小写
  • 空标签可以不闭合，比如input、meta（）
  • 属性值推荐使用双引号包裹
  • 某些属性值可以省略，比如required、readonly
avatar
文章
阅读
粉丝