c的第一篇博客：开启前端之旅。-CSDN博客

本文链接：https://blog.csdn.net/yuexinqianhepc/article/details/119714083

8.9学习记录

首先是一个大前端的介绍，现在前后端分离的比较明显了，然后我们学习的内容按顺序有html5（结构）、css3（美化）、Javascript（动画）、 jquery、bootstrap、antv、echarts、highcharts(主要应该是前两个吧)、es6、typescript、vue（vue全家桶：vue + vuerouter + vuex + elementui + axios【ajax】 + ...）、react（react全家桶：react + reactrouter + redux + antdesign + axios + ...）、reactnative（混合式app）后面可能有nodejs、express、egg、nuxt.js、vuepress。

html5：

html5是超文本标记语言，解释型标签语言。我们用的工具是vscode，讲了讲B/S架构，b浏览器(html、css、js) s服务器。（相关面试题在最下面）

        超文本指超级文本（字符，超链接，图片，音频，视频等）

        标记是用标签进行标记（只能用html标签，不能用自定义标签)，

                <h1>标题1</h1>
                <p>段落</p>

         语言：
                c、java   编译型语言，
                        Hello.c-->gcc-->Hello.o-->运行-->linux
                        Hello.java-->javac-->Hello.class-->运行--> jvm -->linux/win
                html、js、css 解释型语言
                        hello.html-->浏览器-->linux/win
                执行效率：c > java > js

        html结构

        继承xml
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
        head中的内容无法显示到浏览器视口中
        charset   设定编码格式
        viewport 适配移动端
        title 网页标题，显示在选项卡中

        html标签

        html标签不需要区分大小写

                单标签
                eg:可插入一个简单的换行符。
<br/>
双标签
eg：head，body，1号标题
<head>
</head>
<body>
    <h1></h1>
</body>
元素（标签+内容）
    <div class="text">text</div>
    
    <div id="text"></div>
    
    <a href="" class="text"></a>
    
    <a href="" id="text"></a>
    
                属性（位于开始标签中）

                4个核心属性（通用，绝大多数标签都具有的属性）
                        id      唯一标识
                        class   分类，可以重复
                        title   悬浮提示
                        style   添加css规则的

                自有属性
<img src="" alt=""></img>
<a href="https://www.baidu.com" target="_blank">百度一下，你就知道</a>
注：超链接加一个target=“_blank”（目标）打开一个新标签来打开目标地址，如果不设置，当前页面跳转到目标网页（即href）

注释 

                小技巧：注释键盘快捷方式：按住CTRL 按一下K按一下C，注释不会被浏览器解释，注释是用来描述代码含义。
                              重开一行 CTRL+R
                              一个空格      （在html中你连续输入多个空格，会被浏览器解析成1个，可以用这个方法输入多个空格。）
                              文件夹快速改名 F2

        块标签（块元素）

                特点：
                    1) 独占一行空间（100%）
                    2) 高度默认为0，高度由内容决定
                    3) 可以指定宽、高
                    4) 用来搭建页面框架
                元素：
                    h4：div、body、p、ul>li、ol>li、dl>dt、dd、h1~h6
                    h5：header、footer、nav、section、article、aside、address... 语义化标签
<style>
    /* 重置样式 */
    body {
      margin: 0;
    }
    p {
      margin: 0;
    }
    ul,dl,ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    dl > dd {
      margin: 0;
    }
    ul.menu > li {
      line-height: 2em;
      background-color: #ccc;
      border-bottom: 1px solid #fff;
    }
  </style>
</head>
<body>
  <div>this is first div</div>
  <div>this is second div</div>
  <div>this is third div</div>
  <p>段落1</p>
  <p>段落2</p>

  <ul class="menu">
    <li>html</li>
    <li>css</li>
    <li>js</li>
  </ul>

  <ol>
    <li>vue</li>
    <li>react</li>
    <li>angular</li>
  </ol>

  <dl>
    <dt>学生管理</dt>
    <dd>学生档案</dd>
    <dd>学生请假</dd>
    <dd>学生就业</dd>
    <dd>学生考试</dd>
    <dt>教师管理</dt>
    <dd>教师考勤</dd>
    <dd>教师薪资</dd>
  </dl>

  <h1>标题1</h1>
  <h2>标题2</h2>
  <h3>标题3</h3>
          行内标签（行内元素）

               特点：
                    1) 行内与其他行内元素共享一行空间
                    2) 宽高都由内容决定
                    3) 无法指定宽、高
                    4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。
                   元素：
                   span、a、img
                   装饰类型标签：strong b em i sub sup ...

     功能标签：
      a
        超级链接
        href=""     跳转
          url 跳转到一个外网地址中
          相对路径：相对于当前代码所在文件的路径
            .   当前目录下
            .. 当前目录下的上一级目录
          绝对路径：相对于基准点
            linux操作系统中
              / 操作系统根目录也就是 /

            /var/www/html apache2部署目录
              index.html / 代表apache的根部署目录即 /var/www/html
          锚点
            1. 定义锚点 <div id="top">顶部</div>
            2. 跳转     <a href="#top">跳转顶部</a>
          其他
        target=""   目标
          _self   默认值，当前页面
          _blank 新页面
<div id="top">顶部</div>
  
  <a href="http://www.baidu.com" target="_blank">百度一下</a>
  
  <a href="/Users/lichunyu/Desktop/2021/tyut/1-html/day02/2-a.html">2-a</a>
  <a href="#bottom">跳转到底部</a>
  <a href="mailto://licy@briup.com">发邮件给我</a>
  

  <div style="height: 30000px;"></div>
  <div id="bottom"> 
    hello bottom   
    <a href="#top">回到顶部</a>
  </div>
      img
        src   图片地址
          1. 网络资源
          2. 相对路径
          3. 绝对路径
          4. base64格式值
        alt   图片找不到时候的文本替换
  <img src="http://www2017.tyut.edu.cn/__local/4/57/05/C2333E535CDE48B1EF3AB81089F_C050E04E_308D2.jpg" alt="">

  <img src="../day01/images/cat.jpg" width="500px" alt="">

  <img WIDTH="500px" src="file:///E:/zhibogenlian/html+css/day01/images/dog.jpg" alt="">

        面试题：
        1. 访问百度/淘宝，浏览器-页面渲染出来中间经历了什么？
                相当于进行域名访问，有HTTP协议，pc浏览器对相应服务器进行一个请求，访问相应的地址在服务器里的映射，外网ip+相应的端口+文件位置，服务器也给pc一个回应，把相应文件传输过去，浏览器对该文件进行一个解释执行过程，解析过程需要一些图片文件，或者css文件还会对后台进行交互，多次交互之后才算页面渲染完成。

        2. html5 与html4区别？
        标准不同，一个是html4标准，一个是html5标准。
                DOCTYPE声明不同，
                <meta charset="UTF-8"> 是h5新增的方法，单独用之前h4也行，但是不能混用。
        h5新增标签（比如section）
        h5新增api（即接口）