【前端基础--1】
为后面爬虫打基础
使用Visual Studio Code（VS Code）
https://code.visualstudio.com/#alt-downloads
网页基础
创建一个html网页
新建一个文件 文件名后缀.html
书写网页模板
- html:5 + 回车键（或者Tab键）
- 英文感叹号! + 回车键
注释
Ctrl+？
运行前记得先保存。（或者设置自动保存）
标签
由<>包裹的关键字称作标签，内部也有属性值。
单标签：只有一个开头的标签
双标签：有开头有结束 区分：（/结束符）
<!DOCTYPE html>
<!-- 规定这个网页是什么文档类型 -->
<html lang="en"><!-- html：网页根标签开始 lang(属性)：表示网页字体语言en：英文网页zh-cn：中文网页'-->
<head><!-- head：网页头标签 给浏览器看的内容 --><meta charset="UTF-8"><!-- meta：辅助网页标签charset：字符编码格式utf-8：万国码/通用码防止网页乱码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- name：描述属性viewport：初始化浏览器操作content：内容属性width：宽度初始化浏览器的宽度device-width：设备宽度initial-scale=1.0：初始化浏览器窗口缩放比例1.0：表示100%/适配当前设备宽度/--><title>Document</title><!-- title：标题标签 -->
</head>
<body>
<!-- body：网页身体标签 给用户展示的区域 -->
</body>
</html>
<!-- 网页根标签结束 -->常用标签
1.div标签
2.h系列标签（h1~h6）
3.p文本段落标签
4.span包裹文字标签 可以在一行显示
<body><!-- div标签/盒子标签 --><div>盒子标签</div><!-- 标题标签 --><!-- 一级标题标签尽量只在这个网页出现一次 --><h1>一级标题</h1><!-- 二级或其他级标签都可以出现多次 --><h2>二级标题</h2><h6>六级标题</h6><!-- p文本标签 --><p>文本段落标签 单行显示</p><!-- span包裹文字标签 --><span style="color: pink;">span我啊，是可以在一行显示出来的</span><!-- p标签里面不可嵌套其他块级标签 如div h1-h6等 --><p>嵌套<span>lala</span></p>
</body>5.a超链接标签
<!-- 超链接（可以放在p标签里面） href：超链接跳转的地址/图片等 -->
<a href="网站链接">点击这里的文字会跳转到该链接的网站</a><!-- href 可以放网络路径也可以放本地路径相对路径访问方式：./文件名.html (同一文件夹下)../ ：(找上一级文件的内容)绝对路径访问方式：从什么盘开始一直到文件后缀名结束（最好不要用绝对路径的访问方式，每一个人电脑的盘内容不一样）-->6.<br>换行标签
<h1 id="top">顶部文字</h1><br><br><br><!-- 添加锚点 --><a href="#top">点击回到顶部</a><!-- a标签的target属性:指定打开位置 --><a href="网站链接" target="_self">点击这里在当前页面中打开</a><a href="网站链接" target="_blank">点击新开标签页,可以开多个</a><a href="网站链接" target="_new">点击这里在当前页面中打开，只能开一个（但是有的网站会强制新开多个）</a>7.img图片标签
<!-- img用来放网页中展示的图片 -->
<img src="在这里放图片地址" alt="这里写图片描述/提示" title="当鼠标移到这里就会提示相应文字" width="修改图片宽度" height="修改图片高度"><!-- 如果只修改图片的高/宽，图片就会按照比例相应缩放 -->8.列表标签
有序/无序/自定义列表
<!-- ol有序列表（默认数字序号，可通过type属性更改（type='a',字母排序)（type='I',罗马数字排序） --><ol><li>第一条(1.)</li><li>第二条(2.)</li></ol><!-- ol标签规范：子标签必须是li标签 --><!-- ul无序列表（子标签也必须是li标签） --><ul type="circle"><li>内容前面</li><li>是圆点点</li></ul><!-- 可通过type属性更改，disc:实心黑点，circle：空心圆点，squ：实心方块，none：不显示 --><!-- dl自定义列表，dt：自定义列表题目，dd：列表项目 --><dl><dt>第一大点</dt><dd>第一大点的第一小点</dd><dd>第一大点的第二小点</dd><dt>第二大点</dt></dl><!-- 列表之间可以多个嵌套 --><ul><ol><li>123</li><li>自定义<dl><dt></dt></dl></li></ol></ul>9.<b>加粗标签 （视觉上加粗）
<strong>加粗标签 （突出重要性标签，更容易被搜索引擎找到）
10.<i>文本倾斜标签 （视觉上倾斜）
<em>文本倾斜标签 （突出重要性标签，更容易被搜索引擎找到）
11.<u>文本下划线标签 （视觉上加了下划线）
<ins>文本下划线标签 （突出重要性标签，更容易被搜索引擎找到）
12.<s>删除线标签 （视觉上加了删除线）
<del>删除线标签 （突出重要性标签，更容易被搜索引擎找到）
13.语义化标签:为了更好的规范而存在(以w3c为规范)
特殊符号标签
< 小于号<
> 大于号>
¥ 人民币符号￥
空格符
© 版权符
css基础样式
css 层叠样式表 修饰网页内容 文字大小 颜色 排版 高宽等
行内样式
写法：直接写在标签属性中
<标签名 style="css代码">
优点：书写简单
缺点：不利于维护，不能重复利用，结构和样式分离
内部样式
写法：直接写在html的文档里 通过style标签
style标签通常会放在head标签中的title下方
优点：部分结构和样式分离，比较利于维护
缺点：没有真正的结构样式分离
外部样式
- 先单独创建一个文件 并且文件后缀名.css
- 再通过<link rel="stylesheet" href="./文件名.css">导入
优点：结构和样式进行分离，可以重复利用
缺点：书写较麻烦
初级选择器
1.标签名选择器 标签名{}
/* 标签名选择器 */p{color: pink;}/* 选择器{属性：属性值；属性2：属性值2；} */2.id选择器 #id名{} 使用：<标签名 id='id名'> (命名是唯一的)
/* id选择器 */#bos{color: red;}3.类名选择器 .类名{} 使用：<标签名 class='类名'>
/* 类名选择器 */.text{color: blue;}也可以这样多调用
<div class="text text2"></div>4.后代选择器
#wap .ip{font-size: 20px;}父代用id='id名'调用，子代用class='类名'来调用
<div id="wap"><p class="ip"></p></div>5.通配符 所有的内容都会变色
*qq{color: purple;}6.子级选择器
/* 选择到wrap类名的子级-->p标签 */.wrap>p{color: pink;}7.相邻兄弟选择器 与div标签相邻的p标签颜色改变，但中间如果还有标签则不会改变。
/* 相邻兄弟选择器 */div+p{color: blue;}8.同级兄弟选择器 即便p标签与div标签没有相邻，颜色也可以改变。
/* 同级兄弟选择器 */div~p{color: skyblue;}9.并列/合并选择器 都改变颜色了
/* 并列/合并选择器 */div, span, p{color: darkblue;}10.交集选择器 找到p标签中有text类名的标签
/* 交集选择器 */p.text{color: aqua;}