HTML基础篇

Html（hyper text markup language）超文本标记语言 

 

****（出现四个*均为重点）所有文件的后缀并不能改变文件，只是让可以对应的程序识别它。标签之间可以互相嵌套，测试是否独占一行就在结束标签后加文字看是否同行。

 

一.基础标签

1.<html>根标签：一个html文件只有一个html标签。一个树只有一个根，因此只有一个html标签。

2.Head body 结构化标签，head是思想只对自己可见，设置浏览器特性就写在head里。body是皮肤（给用户看的）。

3.编码字符集：在head里面写meta标签的charset（编码字符集）属性，utf-8，国家标准第2312条gb2312只能识别简体字符。后来又出现了gbk（国标扩展）增加了繁体字体。Unicode万国码，utf-8是万国码升级版。

****html中写明的lang="en" 是方便爬虫识别文章是内容是什么语言。

百度抓取：如果想让百度收录要签订关键字协议。①不允许有黄赌毒。②大概是5个关键字之内，跟自己最相关的关键词。

 

7.在百度赚钱的一般都是高转化行业，竞价费用一般都高于700元，如医院，男科等等。竞价费用在1-999元之间。云南某莆田系医院，一年利润1.2亿，给百度1亿。百度税。百度也有防作弊技术，ip段锁定，同一个时间内多次点击只算一次。现在有了百度大脑会通过生物行为是否符合浏览网页行为。小公司可透支费用就200万，科技类外包词条每天触发量大约30万次，每次10元，中间位置大约5块，所以小公司做不起，只能通过seo的方式排名。只要符合爬虫喜好的编码习惯，百度就会抓取。

二、其他标签

  1. 段落标签<p></p>标签：paragraph，段落标签， 独占一行

  2. h=header 标题标签 从h1-h6逐级变小，任意放大缩小字体 加粗展示，一般用在报纸的标刊上，几级段落就用几级字体。独占一行。

  3. 加粗标签<strong></strong>  独占一行
  4. 斜体标签<em></em>
  5. 中划线标签<del></del>
  6. 换行标签<br> 独占一行
  7. 地址标签<address></address>：成端展示，斜体。很少用因为有很多比这个好看的样式，不需要斜体展示。独占一行
  8. 容器<div></div>：1.页面结构化，分块，好维护好编写。2捆绑操作：就像搬书一样，可以直接把柜子搬走。每个柜子放不同功能的东西。分类。独占一行
  9. 容器<span></span>

  10. .title页脚标，导航页卡位置。

  11.  lang属性，告诉爬虫我们的网址是关于什么内容的。英文en，中文zh。

三、重点

　　1.div跟span相同有两点，第一是容器，能将功能分类更清晰的找到它。第二是绑定化操作，就像把小箱子放在大箱子里面一样。Div是独占一行，span不是。

　　2.浏览器在识别空格时，不管多少个都会被识别为一个，因此必须使用编码字符才能让浏览器识别更多的空格，分别是空格，小于，大于。Html编码其实有很多个，但是变成讲究时效性与实用性，不见得记得多就能用得到。只有三个比较常用，一个是 &nbsp；还有就是&lt； &gt；就是less than 跟 great than的缩写，小于符跟大于符。

 

　　3.浏览器也无法识别英文单词的长度，所以需要用空格分割，才能让英文单词不溢出容器。

　　4.换行符不是p标签而是br标签，多个br就是多个换行，p标签只是段落标签，都是独占一行。

 　  5.单标签跟闭合标签的区别，闭合是修饰里面的内容，而单标签是可以独立完成功能。成对出现的标签是修饰里面的内容，把标签的作用作用在里面的内容里。但是有的标签自己就可以完成功能而不修饰内容就是单标签，也叫自闭合标签。

　　6.Hr标签应用场景特别少就是独占一行水平线。

　　7.有序列表----<ol><li></li></ol> order list ol的属性type有五种排序方式，阿拉伯数字，罗马数字，英文字母。1，a，A，i,I。

。另外一个属性叫reversed就是倒序。Start属性是从第几个开始排(写阿拉伯数字就可以)。

　　

 

 　　8.无序列表<ul><li><li></ul> unorderlist只有一个属性可以更改type，默认值是disc（实心圆），一个是square（实心方块），一个是空心圈（clrcle）。父子结构非常好，最常见的是有某个功能它有很多功能子项组成，每一个功能子项的功能基本相同。例如类目，导航栏。Ul就是柜子，li就是抽屉。有一系列功能正好用到了ul li的这种父子结构。有一个功能这个功能由很多功能子项来组成，每一个功能子项的功能跟样式基本相同，内容有一些小差异，这种就很符合ul li的父子结构。

 

　　9.Img标签引用图片标签，单标签，src属性（source资源），<img src=””>。Alt属性，图片占位符，以后编程图片全都是资源方提供的，例如猫眼电影提供了电影的图片，猫眼把文件资源打包发给后端工程师，工程师拆分做成url地址，前端再使用。如果地址写错了，就需要用alt占位符，无法展示图片（容错功能），这种情况就需要有一个图片解释，就要用到图片占位符。Title属性是图片提示功能，可以在显示图片的时候鼠标移动图片上显示介绍。引入方式有三种：

  1. 网上的url
  2. 本地的绝对路径
  3. 本地的相对路径

　　当html文件跟图片文件在同一个文件夹内时，存在相对关系，这时只写图片文件名就可以。但是如果在父子级文件夹，如html在D:/A/B,图片在D:/A/B/C那么需要把路径地址填写完整。

　　10.a标签=锚标签（anchor） herf属性（hypertext reference超文本引用）  <a herf=””></a>超链接标签，凡是能跳转的都是a标签的作用。可以加背景。Target=目标属性 可以控制在哪个页面打开。锚点的作用一开始就是设定地址然后转到那个位置去。Style属性中的display是显示功能，如果不设置就不会显示在a标签中设计的宽高。Target属性是目标的意思，可以控制是否新标签页打开,_blank就会新标签也打开，默认是本页。Anchor最开始就是锚点的意思，可以在div中标明id，然后在a标签href中写#id名即可以使用置顶、查找的功能。

 

 　　

　　A标签四个功能：1.链接功能2.锚点跳转功能3.电话功能4.协议限定符：可以执行javascript的代码。书签功能也需要使用。

（也可以发邮件）

 

    1. 　　<a href=”www.baidu.com” ></a>
    2. 　　<a href=”” id=”#demo1”></a>
    3. 　　<a href=”tel:13888888888”></a>
    4. 　　<a href=”mailto:515878957@qq.com”>给我发邮件</a>

　　11.form表单标签<form></form>       <form method(发送数据的方式)=get action=”(数据发送给谁)”></form>   作用发送数据，可以发送给后端。发送需要发送方式，需要用到method，action是地址。Input是form的组件。发送数据时最重要的是要同时具有数据名，跟数据值，才能发送成功。input中要使用name属性定义数据名。提交成功后地址栏会显示一个？后面跟着提交的数据。

　　<form method=”get” action=””>

　　<input type=”text”>

　　<input type=”password”>

　　</form>

 

　　****编代码主要是语义化（可读性），可维护性就变高了。是什么标签就用在哪里。方便别人理解修改。

　　　　大公司可以看到用户的使用记录，2g网络非常不安全，可以抓包，安全协议低。

　　　　安全工程师价格很高。

　　12.Input标签：输入标签 type属性，可以选择

  1. Text：需要定义名name，value是灰色提示框。
  2. Password：需要定义名name
  3. Submit：可以使用value改变提交框的值。
  4. Radio单选框：同时需要给单选设定相同的名跟不同的值，单选框<input type=”radio” name=”范围”> name是选项的范围，如果所有选项都是一个name，就是单选，提交的时候必须有名有值，还需要提交value，所以可以把选项内容写进去。

　　13.提示文字input的value属性在text属性的情况下 ，value就是在框内显示的文字，写代码时一定要区分单引号跟双引号。

　　

 　　14.网安局提供的md5加密，不可逆，小公司可能都没有加密。3g4g是比2g更安全的网络，2g很容易会被抓包，搜集银行卡叫下料，半年之后登陆你的银行卡，然后再找到用户的身份证信息，做出复印件然后被盗刷。

　　 15.编程就是搭积木，梳理流程用工具实现。

 

posted @ 2019-07-06 18:35  杨sang  阅读(110)  评论(0)    收藏  举报