大前端入门笔记

2022-01-25  本文已影响0人  霁逸lei

一.HTML基础相关
1.基本结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
</head>

<body>
</body>
</html>

2.常用标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML</title>
</head>
<body>
<h1>标题标签h1</h1>
<h2>标题标签h2</h2>
<h3>标题标签h3</h3>
<h4>标题标签h4</h4>
<h5>标题标签h5</h5>
<h6>标题标签h6</h6>

<p>段落标签p</p>
<p>这是第二段落</p>

<hr/>
  hr分割线标签<br/>
  br换行标签
  <b>字体加粗</b>
  <strong>字体加粗，加强语义</strong>
  <i>字体倾斜</i>
  <em>字体倾斜，加强语义</em>
  <s>删除线</s>
  <del>删除线，加强语义</del>
  <u>下划线</u>
  <ins>下划线加强语义</ins>
  <q>加双引号</q>
  <sub>下标</sub>
  <sup>上标</sup>
<hr/>

<span>span:</span>
<span>对行内元素进行组合，纵向排列在网页上</span>
<hr/>
<div>div:</div>
<div>被div包裹的内容，以分块的形式横向排列在网页上</div>
<br/>
<b>img图片标签，src显示图片的属性，width、height宽高属性，alt图片无法显示时代替图片显示的文字属性，title鼠标停留在图片上显示的文字属性</b>
<br/>
<img src="icon.png" width="30px" height="30px" alt="加载失败..." title="ICON">
<br/>
<h3>列表</h3>
<h5>描述列表,超链接书签定位</h5>
<ul>
  <a href="#A"><li>Gradle从入门到实战</li></a>
  <a href="#B"><li>Rxjava</li></a>
</ul>
<ul>
  <li style="list-style-type: circle">ul无序列表(可配置列表标识:disc默认圆点,circle空心圆,square方块,none不显示)</li>
  <li style="list-style-type: square">ol有序列表(1默认按数字排序,A/a按字母排序,I/i按罗马字母排序)</li>
  <li>li有序无序列表的项</li>
  <li>dl描述列表</li>
  <li>dt描述列表的项</li>
  <li>dd描述列表的项的内容</li>
</ul>
<h5>有序列表,通过start可设置列表开始位置</h5>
<ol type="A" start="3">
  <li>hello</li>
  <li>world</li>
</ol>
<h5>描述列表</h5>
<dl>
  <dt>RxJava</dt>
  <dd>-Java VM上使用可观测的序列来组成的异步的基于事件的程序库</dd>
</dl>
<h5>a超链接，href链接地址，title鼠标悬停显示的文字，target网页打开方式(_black在新窗口打开,_self在当前窗口打开)，id=“value”定义页面中的书签，href=“#value”链接到书签</h5>
<a href="index.html" title="index.html" target="_blank">index</a>
<ul>
  <li id="A">Gradle从入门到实战</li>
  <ol>
    <li>基础1</li>
    <li>基础2</li>
    <li>基础3</li>
    <li>基础4</li>
    <li>基础5</li>
  </ol>
  <li id="B">RxJava</li>
  <ol>
    <li>基础1</li>
    <li>基础2</li>
    <li>基础3</li>
    <li>基础4</li>
    <li>基础5</li>
  </ol>
</ul>
</body>
</html>

二.CSS基础相关
1.选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 引入css样式 -->
  <link rel="stylesheet" href="test.css">
  <style>

    /*只对h1标签下的class=kai的内容生效*/
    h1.kai {
      font-family: Kai;
    }

    /*class类选择器*/
    .color {
      color: #888888;
    }

    /*id选择器*/
    #cu {
      font-weight: bold;
    }

    /*通配符选择器，全局有效*/
    * {
      font-style: italic;
    }
    /*给某个元素所包含的元素定义样式*/
    div p {
      font-weight: bold;
    }
    ul>li {
      font-weight: bold;
    }
  </style>
</head>
<body>
<h1 class="kai">望庐山瀑布</h1>
<span id="cu">[唐]</span> <span class="color">李白</span>
<div><p>日照香炉生紫烟，遥看瀑布挂前川。</p></div>
<div><p>飞流直下三千尺，疑是银河落九天。</p></div>
<ul>
  <li id="A">Gradle从入门到实战</li>
  <ol>
    <li>基础1</li>
    <li>基础2</li>
    <li>基础3</li>
    <li>基础4</li>
    <li>基础5</li>
  </ol>
  <li id="B">RxJava</li>
  <ol>
    <li>基础1</li>
    <li>基础2</li>
    <li>基础3</li>
    <li>基础4</li>
    <li>基础5</li>
  </ol>
</ul>

<a href="index.html" title="index.html" target="_blank">index</a>
</body>
</html>

2.常用属性

三.javascript相关
1.HTML中引用javascript

<script type="text/javascript" src="jspath"/>
//打印
console.log("");
//弹窗提示
alert("");

2.数据类型

3.闭包也是函数的一种，是一种可以去取其他函数局部变量的一种函数，也可以理解为定义在函数内部的函数

上一篇 下一篇

猜你喜欢

热点阅读