1.1 HTML简介
HTML（HyperText Markup Language：超文本标记语言）是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
可关注公众号
1.2 HTML基本语法
<!Doctype><!-- 声明了文档的类型 --><html><!-- 标签是HTML的根元素 --><head></head><!--这个是告诉浏览器我采用了什么构造展现--><body></body><!--这是展现给用户观看的界面元素--></html><!-- HTML语法 -->
<html lang="en， zh-cn">
<!--lang：属性 en：属性值 这个是告诉搜索引擎爬虫，我们是关于什么内容的，en是说是英文的，zh是说页面是中文的，除了英文是en，其他语言都是汉语拼音即可--><head><meta charset="utf-8"><!--charset编码字符集，utf-8（万国码升级版）unicode万国码（所有国家字符集都包含） gb2312（国家标准简体字符集，包括亚裔所有字符）gbk2312（国家扩展字符集，包括繁体、简体字符以及亚裔字符）--><meta content="测试" name="keywrods"><!--keywods：关键字--><meta content="这是一个测试网站，包含各种测试技术" name="description"><!--description：描述--><title>万维网</title><!--标题，显示在加载页面的上方的标题中--></head> <body><h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6><!--标题标签 特点：1.更改字体的大小，2.每个标题要独占一行，3.加粗字体的大小--><p>name</p><p>password</p><!--段落标签--><strong>加粗展示</strong><em>斜体展示</em><strong><em>将字体加粗及斜体展示</em></strong><!--进行标签嵌套展示--><del stely=“color：#999”>中划线/删除线，用于折扣样式￥500</del><!--stely：风格样式 color：颜色 #999：RGB颜色 ，在企业级开发中禁止使用，因为讲究行为样式结构相分离，这个标签自带属性会造成冲突（html标签过多掺杂css属性，一般选择放弃使用）--><address>地址展示标签，独占一行，斜体，可用其他标签模拟，这个标签基本不使用，地址样式一般都是用CSS层叠样式表来添加属性更改</address><div>本身效果不大，但是将其作为容器效果很好 1.能划分区块/区间，让整个页面更加结构化 2.容器有捆绑操作的作用（将全要样式的属性全部加上，不用多次操作）</div><div stely="width:100px;heigh=100px; background-color:red;"></div><!--width:100px;heigh=100px; background-color:red;宽高各100像素，背景颜色为红色，空格作为英文单词分割符，多个空格只识别一个，要使用多个空格请用代码“ ”--><span>本身效果不大，但是将其作为容器效果很好</span><!--HTML编码展示--><!-- 空格--><!--< < less than：小于号 > > great than：大于号 --><br/><!--回车换行符--><hr/><!--水平线 单个出现的是单标签：meta、br、hr--><ol type="a" reversed="reversed" start="3"><li></li><li></li><li></li></ol><!--有序列表（ order list ） type=""排序展示编号：1、a、A、i、I reversed="reversed"：表示倒序（3、2、1） start="3"：表示从第三位开始排序 此标签基本用不上--><ul type="disc"><li></li><li></li><li></li></ul><!--无序列表（ unorder list ） type="" disc：discircle（实心圆）square：方块 circle：圈、空心圆--><img src="/c:/file/1.png" stely="width:200px;" alt="这是某某信息" title="这是啥啥啥"><!--src source：资源 图片链接地址填写处 1.网上URL引入方式：选择图片——>右键打开新的网页图片——>复制地址栏的链接引入2.本地的绝对路径：当图片与HTML网页不在同一路径下时叫做绝对路径（h:/a/b/log.jpg d:/a/c/rui.html）,不在同一路径下时src应当写全地址src="h:/a/b/log.jpg"3.本地的相对路径：当HTML网页和图片在同一路径下时叫做相对路径（d:/a/c/rui.html d:/a/c/lop.png），在同一路径下时src只需要这样写src=“lop.png”Alt：在网页出错时展示出来的文字信息也就是叫做图片占位符title：图片提示符，把鼠标移到图片上即可看见图片设置css样式（宽高）时只设置一个即可，两个都设置容易出现图片不是等比例的，除非能找准比例--><a href="http://www.baidu.com" sytle="width:100px;height:100px;background-color:red;display:block" target="_blank">百度</a><!-- a标签（a标签单词：anchor --锚点）：超链接，将网址放在href属性中，将链接到此网站 href全称：hyperText reference（超文本引用）a标签可以嵌套各种标签，target="_blank"打开一个新的页面--><div id="demo1"stely="width:100px;height:100px;background-color:green;"></div><div id-"demo2" style="width:100px;height:100px;background-color:red;"></div><a stely="disply:block;position:fxied;bottem:100px;right:100px;border:1px solid black;height:50px;width:200px;background-color:#fcc;" href="#demo1">find demo1</a><a stely="display:block;position:fixed;bottem:100px;right:100px;boredr:1px solid black;height:50px;width:200px;background-color:#ffc;" href="#demo2">find demo2</a><!--锚点的作用定位到想回到的位置，可用作回到顶部功能，也可以用作知识点的整理，点击到此知识点的位置--><a href="tel:13788889999">打电话</a><!-- tel: 打电话属性 mailto：发邮件属性 --><a href="javascript:while(1){alert('你配吗！点了就走不掉了')}">你爱我吗！</a><!-- 协议限定符，慎重点击，此代码为死循环 --><!-- a标签有三个功能：1.超链接2.锚点3.打电话4.协议限定符 --><!--method：表示为表单的提交方式，action：表示指定提交数据的URL，表单项中的数据要提交就必须要为其指定name属性也就是表单input标签需要有name属性的存在get与post的区别：get：1.请求参数会在地址栏中显示提交信息，被封装在请求行中2.请求参数大小会被限制3.不安全post：1.请求参数不会在地址栏中显示提交的信息，而是会被封装在请求体中2.请求参数的大小没有限制3.较为安全--><form method="get/post" action="http://www.baidu.com/123.asp"><p><!--input：表单标签-->Username：<input type="text" name="username" style="color#999" value="请输入用户名" onfocus="if(this.value=='请输入用户名'){this.value=' ';this.style.color='#424242'}" onblur="if(this.value==' '){this.value='请输入用户名';this.style.color='#999'}"><!-- style="color#999"：将字体变为灰色 value="请输入用户名"：文本框的值为'请输入用户名'οnfοcus="if(this.value=='请输入用户名'){this.value=' ';this.style.color='#424242'}"：1.onfocus鼠标聚焦 2.οnfοcus="if(this.value=='请输入用户名'){this.value=' ';：当文本框中是'请输入用户名'时聚焦（点击空白处后又失去焦点） 在聚焦是可输入文本，失去焦点后文本不会消失3.this.style.color='#424242：将字体变回原样οnblur="if(this.value==' '){this.value='请输入用户名';this.style.color='#999'}" ：1. onblur鼠标失去聚焦 2.οnblur="if(this.value==' '){this.value='请输入用户名';：当文本框为空的情况下显示'请输入用户名'3.this.style.color='#999'}：将字体变为灰色--></p><p>password：<input type="password" name="password"></p><input type="submit" value="login"><p>你喜欢的城市<input type="radio" name="star" value="beijing">1.北京<input type="radio" name="star" value="shanghai">2.上海<input type="radio" name="star" value="guangzhou">3.广州</p><!-- input表单框：type="text":表示是文本框 type="password":表示密码框 type="submit':表示提交按钮 value="login":表示修改了里面的值为'login' name="password":表示数据名 type="radio":表示单选框， 将 name="star"统一成‘star’就变成了一个单选框 value="beijing":表示将数据值为beijing，单选框就可以传递数据了--><p><input type="checkbox" name="fruit" value="apple">1.apple<input type="checkbox" name="fruit" value="orange">2.orange<input type="checkbox" name="fruit" value="banana">3.banana<input type="submit"><!-- type="checkbox":表示复选框 --></p><h1>CHOOSE YOUR SEX！！！</h1>Male:<input type="radio" name="sex" value="male" checked="checked">Female:<input type="radio" name="sex" value="female"><!-- male：男性 female：女性 checked="checked"：默认选择一项 --><h1>province</h1><select name="province"><option>guangzhuo</option><option>beijing</option><option>shanghai</option><option>shenzheng</option></select><!-- 下拉菜单选项栏 province：省份 --></form><!-- form：表单标签 method="get/post"：数据发送法方式采用get或者post，二选一即可 action="http://www.baidu.com/123.asp"：数据发送接收方的位置 发送数据需要两个要点：1.数据值2.数据名满足这两个要点才能正确发送数据 var div = document.getElementsByTagName('input')[1];div.value这两句代码是在网页F12中console中提取密码的，一般有MD5加密，查找不到密码--></body>
</html>
搜索引擎竞价排名（百度）SEO搜索引擎优化技术：价格在1-999元之间，每点击一次收取1-999元之间的一个数额（因关键字价格不同)；按转化率收取，但实际是根据物理IP地址来识别。同一个IP在同一时间段内点击同一网站只按一次收费，根据生物行为识别，当误点或其他行为时，在页面停留时间过短或根本没看不收取竞价排名费医院竞价排名最贵（竞价排名起500元）做产品需要三个特点：1.刚需（满足用户的功能兴趣）2.用户体验感（尽量满足用户的懒习惯，操作要便捷，步骤要少）3.用户黏性（产品定位以及使用方法）HTML注释：<!-- 填写注释内容 -->（快捷键ctrl+？）
![[vite] ts写配置根目录别名](https://img-blog.csdnimg.cn/direct/1b5be4d8a2e046d19016f146c396a9b3.png)
