【前端基础--1】

为后面爬虫打基础

使用Visual Studio Code(VS Code)

https://code.visualstudio.com/#alt-downloads


网页基础

创建一个html网页

新建一个文件 文件名后缀.html

书写网页模板

  1. html:5 + 回车键(或者Tab键)
  2. 英文感叹号! + 回车键

注释

Ctrl+?

运行前记得先保存。(或者设置自动保存)

标签

由<>包裹的关键字称作标签,内部也有属性值。

**单标签:**只有一个开头的标签

**双标签:**有开头有结束 区分:(/结束符)

html 复制代码
<!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包裹文字标签 可以在一行显示

html 复制代码
<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超链接标签

html 复制代码
<!-- 超链接(可以放在p标签里面)  href:超链接跳转的地址/图片等 -->
<a href="网站链接">点击这里的文字会跳转到该链接的网站</a>
    <!-- href 可以放网络路径也可以放本地路径
        相对路径访问方式:./文件名.html  (同一文件夹下)
                        ../ :(找上一级文件的内容)
        绝对路径访问方式:从什么盘开始一直到文件后缀名结束
        (最好不要用绝对路径的访问方式,每一个人电脑的盘内容不一样)
     -->

6.<br>换行标签

html 复制代码
<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图片标签

html 复制代码
<!-- img用来放网页中展示的图片 -->
<img src="在这里放图片地址" alt="这里写图片描述/提示" title="当鼠标移到这里就会提示相应文字" width="修改图片宽度" height="修改图片高度">
    <!-- 如果只修改图片的高/宽,图片就会按照比例相应缩放 -->

**8.**列表标签

有序/无序/自定义列表

html 复制代码
    <!-- 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为规范)


特殊符号标签

&lt; 小于号<

&gt; 大于号>

&yen; 人民币符号¥

&nbsp; 空格符

&copy; 版权符


css基础样式

css 层叠样式表 修饰网页内容 文字大小 颜色 排版 高宽等

行内样式

写法:直接写在标签属性中

<标签名 style="css代码">

优点:书写简单

缺点:不利于维护,不能重复利用,结构和样式分离

内部样式

写法:直接写在html的文档里 通过style标签

style标签通常会放在head标签中的title下方

优点:部分结构和样式分离,比较利于维护

缺点:没有真正的结构样式分离

外部样式

  1. 先单独创建一个文件 并且文件后缀名.css
  2. 再通过<link rel="stylesheet" href="./文件名.css">导入

优点:结构和样式进行分离,可以重复利用

缺点:书写较麻烦

初级选择器

1.标签名选择器 标签名{}

css 复制代码
        /* 标签名选择器 */
        p{
            color: pink;
        }
        /* 选择器{属性:属性值;属性2:属性值2;} */

2.id选择器 #id名{} 使用:<标签名 id='id名'> (命名是唯一的)

css 复制代码
        /* id选择器 */
        #bos{
            color: red;
        }

3.类名选择器 .类名{} 使用:<标签名 class='类名'>

css 复制代码
        /* 类名选择器 */
        .text{
            color: blue;
        }

也可以这样多调用

html 复制代码
<div class="text text2"></div>

4.后代选择器

css 复制代码
        #wap .ip{
            font-size: 20px;
        }

父代用id='id名'调用,子代用class='类名'来调用

html 复制代码
<div id="wap"><p class="ip"></p></div>

5.通配符所有的内容都会变色

css 复制代码
        *qq{
            color: purple;
        }

6.子级选择器

css 复制代码
        /* 选择到wrap类名的子级-->p标签 */
        .wrap>p{
            color: pink;
        }

7.相邻兄弟选择器与div标签相邻的p标签颜色改变,但中间如果还有标签则不会改变。

css 复制代码
        /* 相邻兄弟选择器 */
        div+p{
            color: blue;
        }

8.同级兄弟选择器即便p标签与div标签没有相邻,颜色也可以改变。

css 复制代码
        /* 同级兄弟选择器 */
        div~p{
            color: skyblue;
        }

9.并列/合并选择器都改变颜色了

css 复制代码
        /* 并列/合并选择器 */
        div, span, p{
            color: darkblue;
        }

10.交集选择器找到p标签中有text类名的标签

css 复制代码
        /* 交集选择器 */
        p.text{
            color: aqua;
        }
相关推荐
李鸿耀18 分钟前
仅用几行 CSS,实现优雅的渐变边框效果
前端
码事漫谈38 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER1 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo2 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室4 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站