一个月从0转战前端 - 1 - Html

站长

2023年09月06日 14:04 · 阅读数 21

学习四部曲： 1.HTML是结构骨架。 2.CSS是装饰。 3.JS是交互、逻辑。 4.vue前端常用框架。

只梳理个人认为常用的可以快速上手写项目的知识。不含介绍历史、弃用、废话

工具

webstorm (idea的web版)；用惯了AS/idea界面一样，直接可以上手 常规：vscode 必装插件：Chinese、auto remake tag、open in browser(右键预览)、live service、easy less

HTML基础

<html>：语言<html lang="en"> en或zh-CN
<head>：定义网站的介绍、编码方式、搜索关键词等（不会出现在页面上）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="Author" content="">
    <meta name="Keywords" content="厉害很厉害" />
    <meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
    <title>Document</title>
</head>

<body> ：主体（会出现在页面上）
排版： 1.<h1> <h6>标题； 2.<p>段落，align="left center right" 对齐方式，（文本标签，只能放文本、图片、表单） 3.<hr />分割线，<hr color="red" align="left" size="5" width="500"/> 4.<div>和<span>“容器=viewGroup”，div换行、大容器、容器级，span不换行、小容器、文本级。 5.<center>居中标签
字体与超链接 1.转义符：空格 、小于<、大于>、符号&``&、双引号"、单引号' 2.<i>icon 3.<b>加粗 4.超链接: <a href="http://www.baidu.com" target="_blank">百度</a> ；跳到某一个id上。 href="xx.html#id" href:目标url、target="_blank"新页面、"_self"原页面(默认)、title悬停文本
图片<img> ： 1.src地址、width height：宽高、title悬停文本、alt无法展示默认文字、align：bottom（默认）、center、top、left、right对齐方式
列表 1.无序列表<ul>，无序列表中的每一项是<li>（ul：unordered list、li：list item） 2.有序列表<ol>，里面的每一项是<li> 3.定义列表<dl>,<dt>标题，<dd>列表项
表格<table>、行<tr>、项<td>
表单<form> action=“login.php”:指定表单处理程序，method="get/post" 1.输入框<input type="text" /> type：text、password、radio、checkbox、checked、hidden、button、submit、reset、image、file size="50"最多输入50个 readonly只读 2.下拉列表标签<select> 是否多选，默认单选multiple="multiple" 展示的条数size="3" 3.选项：<option> 预选中：selected 4.<label>将文字和选项一起监听点击事件 <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
H5表单<form> 新增 <label >email: <input type="email" name="email" required></label> email邮箱输入、color颜色选择器、url、tel、number、range进度条、time、data等等 1.提示hint：placeholder 2.正则限制输入：pattern 3.必填：required 4.获得焦点autofocus 5.事件：oninvalid()验证失败提示事件

下拉列表：

<input type="text" list ="mydata"/>
定义mydata数据：
<datalist id="myData">  
    <option>本科</option>
    <option>研究生</option>
    <option>不明</option>
</datalist>

多媒体 1.音乐播放：<audio src="有何不可 - 许嵩.mp3" controls></audio> controls 控制条（没有看不到进度条）、loop循环播放、preload预加载、autoplay自动播放 2.视频播放：<video>同上 3.滚动字幕：<marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">我了</marquee> direction：方向；behavior：slide（只移动一次）、scroll（循环，默认值）、alternate（来回循环）

HTML5

H5 = Html升级版 + CSS升级版 + JS API升级版

H5中新增的语义标签：<section> 区块、<article> 文章、<header> 、 <footer>、 <nav> 导航、 <aside> 侧边栏、<figure> 表示媒介内容分组、<time> 日期

DOM操作

获取元素（约等于findViewById）（“class”里定义id） var selector = document.querySelector("selector") 点击事件： selector.onclick = function(){ }
自定义属性（必须以data开头）

<div class="box" title="盒子" data-my-name="zidingyi">div</div>
<script>
    var box = document.querySelector('.box');
    //自定义的属性 需要通过 dateset[]方式来获取
    console.log(box.dataset["myName"]);    //打印结果：zidingyi

    //设置自定义属性的值
    box.dataset["content"] = "aaaa";

</script>

拖拽(用到的时候再看吧)

draggable="true" 拖拽监听：ondragstart - ondragend

定位

获取定位时，浏览器会自动选择位置的最优解。（GPS/WIFI/IP/手机信号基站）

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息 successCallback/errorCallback:成功失败回调。 options:经纬度、position.coords.latitude纬度、longitude经度

一个月从0转战前端 - 1 - Html

数据存储

window.sessionStorage 存在内存中 5M 所以页面关闭就没有了 window.localStorage 存在本地 20M 存在硬盘或者浏览器的内存中（清除得手动删除）

二者都只能存储key-value的字符串 setItem(key, value);、getItem(key);、removeItem(key);、clear();、key(n);

网络状态监听

offline、online

window.addEventListener('online', function () {
        alert('网络连接建立！');
    });

应用缓存

cache manifest缓存清单 不常用，缺点较明显，只适合简单的单地址页面、数据请求量不高。