2022前端青训营笔记-第一讲

TheTKeys
73 阅读2分钟

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

2022前端青训营笔记-第一讲

什么是前端？

  • 解决GUI人机交互问题

  • 跨终端

    • PC/移动浏览器
    • 客户端/小程序
    • VR/AR等

  • Web技术栈

前端工程师：使用web技术栈解决多端图形用户界面交互的工程师

前端有哪些技术？

HTML：页面结构以及内容

CSS：设置页面样式

JavaScript：定义网页的行为

浏览器端与服务器端通过网络协议进行通信

前端应该关注哪些方面？

  • 功能
  • 美观
  • 无障碍
  • 安全
  • 性能
  • 兼容性
  • 用户体验

前端已不单是页面上的开发

node.js开发服务器端应用、electron开发客户端应用等等。

HTML是什么？

HyperText Markup Language（超文本标记语言）

标签

(1)根标签: html

<html></html>

(2)head标签

<head></head>

<meta charset="">
字符编码集:
utf-8
gb2312(不含繁体字)
gbk(扩展，含繁体字)
unicode
.......
​
<meta content="" name="keywords">
<meta charset="" name="description">

网页标签名title

<title></title>

(3)body标签

(4)div和span:这两个标签充当容器作用，没有实质效果

<div></div>
<span></span>

(4)ul li:无序列表 (unorder list)

<ul type="square">  <!-- disc. square, circle -->
    水果
    <li>西瓜</li>
    <li>香蕉</li>
    <li>橙子</li>
    <li>苹果</li>
</ul>

(5)img标签:展示图片

<img src="" alt="图片加载失败时展示的文字">
<!-- src: 1.网上url
2.本地相对路径: 与html文件路径相同时，直接写文件名即可
3.本地绝对路径: 与html文件路径不同时要写完整路径名 -->

(6)a标签(anchor ):超文本引用、锚点

<a href="http://www.baidu.com" target="blank">点击跳转到百度连接</a>
target="blank" 代表在新标签页中打开
​
<a href="#test">点击找到test的位置</a>
​
<a href="tel:157****1878">点击给某人打电话（移动端）</a>
​
<a href="mailto:2324******@qq.com">点击给某人发邮件</a>

(7)form标签:form表单,向后台传递数据

<form method="方法: get/post" action="传递地址">
    <input type="text(文本输入框)/
                 password(密码输入框)/
                 submit(提交按钮)/
                 radio(单选框, 需要属性name相同)/
                 checkbox(复选框)">
    
    <select name="number">
        <option>one</option>
        <option>two</option>
        <option>three</option>
    </select>
</form>

(8)input标签

<input>
<!-- 文本输入框 -->

使用演示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
​
    <link rel="stylesheet" type="text/css" href="index1.css">
​
</head>
<body>
    <script type="text/javascript" src="index1.js"></script>
    Hello World!!! 你好世界！！！
    www
​
    <p>this is paragraph!!!</p>
    <p>this is paragraph!!!</p>
    <p>this is paragraph!!!</p>
​
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
​
    <strong>加粗</strong>
    <em>斜体</em>
    <strong>
        <em>加粗斜体</em>
    </strong>
​
    <del>划线</del>
​
    <address>地址标签(实际就是斜体成段展示)</address>
​
    <div class="testA">锚测试</div>
    <div id="selector">div和span</div>
    <span>两个很重要的两个容器</span>
    <p></p>
​
    <!-- html编码 -->
    a&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b
    <br><br><hr>
    &lt;&gt;
​
    <ol type="A" start="6" reversed="reversed"> <!-- 五个值: 1, a, A, i, I -->
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
    </ol>
​
    <ul type="square">  <!-- disc. square, circle -->
        水果
        <li>西瓜</li>
        <li>香蕉</li>
        <li>橙子</li>
        <li>苹果</li>
    </ul>
​
    <img src="" alt="alt: 图片加载失败时展示的文字(图片占位符)" title="title: 鼠标移到图片上时所展示的文字(图片提示符)" style="width: 100px;">
​
    <a href="http://www.baidu.com" target="blank" title="222">点击跳转到百度连接<img src=""style="width: 100px;"></a>
    <a href="#selector" onfocus="this.style.color='green'">点击找到selector的位置</a>
​
    <form method="get" action="">
        <p>
            username:<input type="text" name="username" value="请输入用户名" style="color: #aaa" onfocus="if (this.value == '请输入用户名') {this.value = ''; this.style.color='black'}" onblur="if (
            this.value == '') {this.value = '请输入用户名'; this.style.color='#aaa'}">
        </p>
        <p>
            password:<input type="password" name="password">
        </p>
        <input type="submit" value="提交">
​
        测试一<input type="radio" name="test" value="test1">
        测试二<input type="radio" name="test" value="test2" checked="true">
        测试三<input type="radio" name="test" value="test3">
        <br>
        测试一<input type="checkbox" name="test" value="test1">
        测试二<input type="checkbox" name="test" value="test2">
        测试三<input type="checkbox" name="test" value="test3">
​
        <select name="number">
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </select>
    </form>
​
    <div></div>
    <div class="ttt">wwwwwwwwwwwww</div>
​
    <div class="five">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
        <div class="circle5"></div>
    </div>>
​
    <ul class="nav">
        <li class="list-item">
            <a href="#">天猫</a>
        </li>
        <li class="list-item">
            <a href="#">聚划算</a>
        </li>
        <li class="list-item">
            <a href="#">天猫超市</a>
        </li>
    </ul>
​
    <div class="reverse-test" style="transition: 1s linear;">
        <div class="test11" style="background-color: red;transition: 1s linear;">1</div>
        <div class="test22" style="background-color: green;">2</div>
        <div class="test33" style="background-color: blue;">3</div>
    </div>
    <button onclick="change()">交换</button>
    <button onclick="change2()">交换2</button>
    <script type="text/javascript">
        function change() {     
            var test = document.getElementsByClassName("reverse-test")[0];
            var head = test.firstElementChild;
            head.style="width: 20px;background-color: red;transition: 1s linear;";
        }
        function change2() {    
            var test = document.getElementsByClassName("reverse-test")[0];
            var head = test.firstElementChild;
            head.style="background-color: red;transition: 1s linear;";
        }
    </script>
</body>
</html>

Snipaste_2022-07-24_18-50-54.png

HTML语法

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

语义化是什么？

  • HTML中的元素、属性以及属性值都拥有某些含义
  • 开发者应该遵循语义编写HTML

语义化的好处

  • 代码可读性好
  • 可维护性强
  • 搜索引擎优化
  • 提升无障碍性
avatar
文章
阅读
粉丝