H5学习笔记day2

标签学习

链接标签

链接标签- - a
特点： 1.不独占一行 2.设置宽高不生效
属性：
1.href - 链接引用地址
作用：
（1）填入网络或本地文件链接，在页面渲染后点击可以跳转到链接的页面
（2）简易的下载，在href属性中填入zip等相应格式的文件可以在页面下载到该文件
（3）空链接，属性填入 “#”后在页面点击可以使页面回到顶部
（4）锚点定位，href属性与id值一 一对应 href=“#id值”，点击a标签后就可以跳转到对应id值元素的位置
2.target - 网页跳转方式
属性值：
（1）_self 当前页面发生跳转(默认)
（2） _blank 新开页面发生跳转

补充知识：
路径：可分为绝对路径和相对路径
1.绝对路径
网络地址： https://
磁盘地址: C:\day01\img\2.webp
2.相对路径
./ 当前文件所在的文件夹
. ./ 当前文件所在文件夹的上一级文件夹
/ 放在后面表示进入当前文件夹，放在首位表示根目录

图像标签

图像标签 - - img
特点：1.不独占一行 2.可以设置宽高
属性：
1.src–(会发起网络请求) 图片资源请求加载
2.alt–图片加载失败后我们的页面渲染的内容（是对用户的提示）
3.title–鼠标悬停时的提示信息
4.withd height–（宽高属性）只改变宽高中的一个属性时图片会等比例放大缩小

特殊字符

表单标签

表单标签 - - form
属性：1. action 该属性规定当提交表单时，向何处发送表单数据。（是必需的属性）
（注：当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。）
2.method 写定表单提交数据时使用的方法
（属性值：Get/Post：验证方式的安全性，前者可以在网络地址栏看到提取的信息后者会隐藏这些信息）

表单控件标签 - - input
属性：1.type - - 输入框的类型控制属性，属性值不同输入框类型不同
（属性值：
type=“submit” 时为提交按钮框，点击后可以提交相应表单内的数据
type=“text” 时为文本输入框，可以在框内输入文本
type=“password” 时为密码输入框，输入文本会在页面进行隐藏处理
type=“button” 时为按钮表单控件，可以点击
type=“file” 时可以选择文件放入表单中提交
type=“image” src=“图片地址” 时为图片按钮当写在我们的表单标签内的时候，图像标签和提交按钮标签相等的作用
type=“reset” 时为重置按钮，点击后将输入表单内的数据清空，放在form标签外是没有效果的
type=“radio” 时为单选框，选项值是写在标签后的（button是在标签内的value属性写入值的）
type=“checkbox” 时为多选框，可以选择多项

注：多选和单选框想要点击选项值选择到选项需要用label标签将选项值包裹，还要将label的for属性与选项的name属性绑定
）
2. name - - 为文本框做标识
（作用：
1.唯一标识文本框，传输数据时传送的时 name赋予的值 = 数据内容
2.单选框和多选框的选项绑定，单选框绑定相同name值后只能选择一个选项
）

表单控件标签 - - select（拉选框）

<select name="" id="">
            <option value="1" selected>1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <!-- selected--默认选中 -->
        </select>

表单控件标签 - - textarea（文本域）
特点：是一个可以在网页页面内改变的文本框
属性：1.cols设置文本框的初始列数
2. rows 设置文本框的初始行数
3. style="resize:none"使文本框不可改变

<textarea name="" id="" cols="30" rows="10" style="resize:none"></textarea>

表单控件标签 - - iframe（网页中嵌套网页）

 <!-- 网页中嵌套网页（前提是这个网页允许嵌套） -->
    <iframe src="嵌套的网页地址" frameborder="0"></iframe>

SEO优化

SEO，即Search Engine Optimization， 搜索引擎优化，是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。
合理的title、description、keywords
搜索对着三项的权重逐个减小，title值强调终点即可；description把页面内容高度概括，不可过分堆砌关键字；keywords例举出重要关键字。

1.title 就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到(搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要)，title一般不超过80个字符，而且词语间要用英文"-“隔开,因为计算机只对英文的敏感性较高，对汉语的敏感性不高。
用法:（1） 首页title写法，一般是"网站名称-主关键字词或一句含有主关键字的描述”。一般网站名称放在后面，因为搜索引擎给予标题最前面的词比后面高。比如:“冰箱_变频冰箱-海尔官网”
（2）文章页title写法，一般有3种：“文章标题-网站名称”、“内容标题-栏目名称-网站名称”、“内容标题-网站名称”。其中，“内容标题-栏目名称-网站名称”的写法最规范，它能给用户很好的提示，让用户知道他在访问哪篇文章，并且是在哪个网站的哪个栏目下。
2.description （内容摘要）是对于一个网页的简要内容概况。description一般不超过150个字符，描述内容要和页面内容相关。
3.keywords（关键字）主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配，才有利于排名。keywords一般不超过3个，每个关键字不宜过长，而且词语间要用英文”,“隔开。尽量将重要的关键字靠前放，因为靠后的关键字排名较差，除非你占有很高的权重。
作用：（1）首页keywords写法，一般是"网站名称,主要栏目名,主要关键字”

问题1Q:在前端技术层面如何让网页的搜索排名在浏览器中更靠前，获得更多流量？
seo优化：
我的理解：浏览器的排名是根据网页中关键词的匹配程度，出现的位置、频次，链接质量等——计算出各网页的相关度及排名等级，然后根据关联度高低，按顺序将这些网页链接返回给用户，如果做好了seo优化，有一个合理的标题及描述、稳定的栏目及导航，便于爬虫的抓取，通过内容过滤，就可以很轻松的被收录，提高网站的排名。