记:几天巩固学习html+css(长更....)
2022-05-26 17:06:13 858阅读 2评论 0点赞

学习目的

巩固一下会的知识并且更努力的梳理一遍,本文长期更新.....

学习html+css的第一天

因为会一些,所以看的比较快

1.编辑器以及浏览器的一些理解以及下载地址

浏览器如何执行html和css等代码
通过内核 国内一般都是引用内核并套了个外壳,拥有独立内核的浏览器为以下几个

浏览器名 内核 备注
IE trident 已挂
chrome webkit 现已成Blink
sarari webkit mac系统
firefox Gecko 火狐浏览器
Opera presto 现已成Blink
  • 推荐使用chrome,以及编辑器使用vscode,自己已经都是用了这两个,当然,也可以用notepad++
  • vscode下载地址看这里
  • 谷歌浏览器或者其他浏览器就自己看情况了,一般百度搜索第一页前两个官网就是了咸鱼把网址也贴上来,有需要的自己点击跳转吧 谷歌浏览器官方地址

2.html的基础语法

一、术语说明

web开发工程师=前端开发工程师 概念相同

  • web就类似这样,为网站的可视化页面
    https://cdn.juyuantop.cn/7NnMAa20220526161648.png
  • w3c
    • 中文名字为万维网联盟(非营利性组织),作用是:制定web技术领域标准的组织 ,官网地址为:https://www.w3.org/
  • MDN
    • Mozilla development network(开发者社区),作用:通过w3c整合成的一个技术文档网站,有各国语言。如下图,可以在百度等输入 mdn即可查到官方的说明
      https://cdn.juyuantop.cn/7NoSQQ20220526162514.png

二、基本语法

  • html 中最小的单位为
    element(元素、标签)
  • 元素组成部分
    起始标签(begin tag)+元素内容(可选)+元素属性(可选)+结束标签(end tag)
    例子:<p style="color:red;font-size: 24px;">ceshi</p>
    例子:<img src="https://pic.juyuantop.cn/imgs/2022/04/05/624c3e03ae7ed.png" alt="聚源图床">
  • 元素属性
    元素又分为全局属性和局部属性(某个元素特有的属性),常见的全局属性比如有title等
  • 注释————描述你代码的作用
    注释这个要着重注意,以后写各种代码都会需要写上注释,不然就自己都看不懂了

    html的语义化

  • 语义化:每个HTML元素都有具体的含义
    • 标题、段落、超链接、图片等
  • 为什么要语义化呢
    这样会利于seo(搜索引擎优化):每隔一段时间就会来爬蜘蛛
    方便浏览器去理解网页结构

学习html+css的第二天

HTML核心元素用法

vscode的一些小技巧以及文本元素

  • 善用alt+shift+↑↓进行快速的复制粘贴
  • 也可以用变量来写,例如写<h1></h1>到<h6></h6> 可以用变量$来写h$*6{$级标题}然后回车就可以快速获得一到六级的标题了
  • span标签仅仅是用于设置样式使用
  • pre用于源代码中连续的空白字符(空格、换行、制表(tab缩进))也就是预格式化

a元素的作用

  • 超链接,跳转网页 <a href="https://www.juyuantop.cn" >博客</a>注意,在新窗口打开记得在a标签里面加上target="blank" 这样就是新窗口打开了
  • 锚点,跳转到页面指定位置,比如我在页面有个科学新闻版块,我们可以写<a href="#科学新闻"></a>注意,锚点跳转的地方要加上id,例如<h1 id=科学新闻></h>

关于路径(基本代码全是通用的路径写法)

路径分为绝对路径、相对路径
一般来说,站外资源要用绝对资源,站内资源用相对路径

  • 绝对路径写法
    协议名://主机名:端口号/路径
    协议名:http、https、file(ftp)这种
    主机名:域名、IP
    端口号:http(80)https(443)这两个会省略,其他的端口需要去主机商开启或者防火墙放通

  • 相对路径写法
    ./xxx在当前目录
    ../xxx表达在上一级目录

img标签

在html里面,img标签是用src来输入路径的例如<img src="https://pic.juyuantop.cn/imgs/2022/04/05/624c3e03ae7ed.png" alt="聚源图床">
也可以嵌套在a标签用于跳转到相应地方

列表

  • 有序列表
    <ol>前面还有个序列号,数字、英文、拉丁文等等自选的
    例如:https://cdn.juyuantop.cn/7Nz7HH20220527162810.png
  • 无序列表
    <ul>无序号
    例如:https://cdn.juyuantop.cn/7Nv4FF20220527163226.png
  • 定义列表
    <dl>单条与多条的定义与描述
    例如:https://cdn.juyuantop.cn/7N99Bm20220527163638.png

布局

这边的html讲到的布局就是一个
,所以在我看来没有什么好学的了,毕竟有一定基础
例如图片的示范
https://cdn.juyuantop.cn/7NVZzA20220603014438.png
html5的布局就大致这样,然后详细的话就是下表了
名称 定义
header 定义文档或节的页眉
footer 定义文档或节的页脚
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(例如侧栏等)
details 定义额外的细节
summary 定义details元素的标题

咸鱼之后写代码谨记尽量用html5写,毕竟语义化一点,看起来更方便一点!

学习html+css的第三天

CSS的规则

作用

使网页变得更好看,更有序,更完善,全称为层叠样式表。多条属性同名的话,生效最后声明的那条属性
分为两部分:选择器、

  • 选择器 告诉浏览器要设置样式的html元素 例如:font-size、color等
  • 声明块 用于设置样式
    例子,其中的h1就是元素,后面的{}里面则是声明了样式,我这版就用了color来写了写颜色,效果如图
    https://cdn.juyuantop.cn/7NKwd820220614103057.png

CSS的写法

写法

  • 内部样式表:写在style标签,例如下图。属性与属性之间用分号分开,vscode会自动补全;
    https://cdn.juyuantop.cn/7NveCQ20220614102804.png
  • 内联样式表:写在元素的style里面,如下图
    https://cdn.juyuantop.cn/7NhuQq20220614103504.png
  • 外部样式表:link标签将css引入
    link一般在header,页面的加载同时引入link,如下图为样式
    https://cdn.juyuantop.cn/7NQjTx20220614103704.png
    注意:vscode编辑器可以直接输入link,然后下选link:css就可以直接出现,很智能很好用
    https://cdn.juyuantop.cn/7NPG3220220614110326.png

    注意,比较推荐用外部样式表的方法来写,link这种

    优点有以下

  • 解决页面当中样式重复的问题
  • 代码分离,利于阅读与维护
  • 利于浏览器优化——link标签会被浏览器缓存,提高页面的响应速度

CSS核心-常见的选择器以及使用场景

  • 标签选择器(元素选择器)
    例如:内联内部样式表-如下图
    https://cdn.juyuantop.cn/7ND6vr20220614112958.png
  • 类选择器:页面开发中用的最多的一种选择器
    注意,类选择器是以.为开头,如下图
    https://cdn.juyuantop.cn/7N5hBn20220614114733.png
  • ID选择器:一般配合JavaScript来使用
    注意,ID选择器是以#为开头,如下图
    https://cdn.juyuantop.cn/7NZr8Y20220614114900.png

开发中常用的其他选择器

  • 通配符选择器:* 用于匹配任何东西,例如下图的所有边距效果
    https://cdn.juyuantop.cn/7Ng8jP20220614115415.png
  • 派生选择器:根据文档的dom结构来选择html元素
  • 后代选择器:具体在mdn查看,如下图
    https://cdn.juyuantop.cn/7NnGgD20220614122206.png
  • 子元素选择器:例如span里面还有一层,只会选择第一层
    点我前去mdn查看子选择器的说明
  • 相邻选择器:比如p标签的相邻标签,如下图
    https://cdn.juyuantop.cn/7NVfqU20220614122631.png
    https://cdn.juyuantop.cn/7NyjBM20220614122703.png

通过空格表示他们是后代关系,通过+号表示他们是相邻的关系

字段 含义
border 边框宽度
solid 边框线条虚实
color 颜色
font-family 字体
font-style 字体样式
background-color 背景颜色

更多的请点击下方的链接查看css常用属性—— 聚源素材解析 可以下载百度文库以及csdn哦



特殊选择器以及使用场景

  • 伪类选择器
    例如a标签我们可以使用 1.未选中——link 2.已选中——visited 3.悬浮——hover 4.点击后——active 如下图所示
    https://cdn.juyuantop.cn/7N3Vml20220617175958.png
    PS:注意,hover要放在link以及visited后面。先悬浮后点击,要先有选中未选中才能有悬浮样式,然后才能点击。这涉及到css的特性了

    • 通过dom结构来选择选择器
      如下图,利用div p:first child就可以选择div标签下面第一个p标签就变颜色了。。如果在div下面第一个是a标签,那么p标签的颜色就无法生效。因为涉及到了css的层级关系
      反之,可以用div p:last child可以选择最后一个。其他的还有奇数偶数,nth-child,这个可以去mdn自己查看,咸鱼也要好好记住
      https://cdn.juyuantop.cn/7NAAaY20220617181443.png

伪类选择器的使用场景以及用法

  • 选择一些元素的特殊效果
    例如用link,visited,hover,active这种来给a标签添加伪类选择器
  • 在某些场景选中有关系的元素
  • 例如上面写的first child 、last child 、nth-child这种

学习html+css的第四天

CSS基本概念——盒子模型

  • 什么是盒子模型
    在css里面,所有的html元素都可以看成是一个盒子
    例如下图所示,当然我这边没有把padding,border写进去
    https://cdn.juyuantop.cn/7Ny3sN20220620170151.png

    这里面的一些属性都要去mdn以及其他的网站自己多看看,咸鱼这个一定要记住!!!

  • 盒子一般由以下部分组成

    • 盒子和盒子之间的间隙(margin)
    • 盒子的边框(border)
    • 盒子的内部间隙(padding)
    • 盒子的内容(content)
      ps 还有一个属性要记住,box-sizing:border-box以及box-sizing:centent-box(w3c规定)但是,一般用border-box比较适合一点

CSS的常用属性

  • 常用属性

    • 盒子的位置和大小

    • 尺寸
      尺寸有宽度、高度、边界,具体看下面
      宽度 width:可以用单位表示px 也可以用百分比表示 20%(百分比是父元素的宽度来计算) 也可以用auto
      高度 height:同宽度
      边界 margin padding 可以简写(上面的margin:20px 10px 20px 10px 上右下左) 也可以只选择一边:上下 左右这样

    • 位置
      浮动 float
      定位 position
      盒子超出部门 overflow overflow还分为三个属性,一个是裁剪(hidden),一个是滚动(scroll),还有一个是根据元素属性自动判断是否需要滚动条(auto)
      overflow:hidden的示例如下
      https://cdn.juyuantop.cn/7NNOPs20220622161617.png
      overflow:scroll的示例如下
      https://cdn.juyuantop.cn/7NVbEu20220622161747.png
      ps:滚动的话,在ios系统下会隐藏- -在Windows系统下会显示出滚动条
      ps:其他的咸鱼记得去mdn自己看看

    • 外观、风格
      background:背景颜色(background-color) || 背景图像 || 背景有没有重复 || 背景要不要固定 || 背景的位置
      其他的可以看看各大官网具体的元素。
      文字属性(font):

      • 字体大小:font-size
      • 字体是否加粗:font-weight
      • 字体是否是斜体:font-style
      • 字体是什么字体:font-family

学习html+css的第五天

CSS的重要特性之层叠

css的选择器和层叠特性

css的全称是Cascading style sheets(k死给定 丝带哦 sheet),层叠样式表

  • 层叠是一个基本的特征
    • 一个css属性被多次声明的时候,会根据优先级或者声明顺序来计算采用哪个样式
  • 优先级/权重是怎么计算的呢
    • id选择器>类选择器>标签选择器 id>class>tag
      权重的比例如下
    • 标签选择器(tag)=1
    • 类选择器(class)=10
    • id选择器(id)=100
    • 通配符选择器和表示关系的选择器,对优先级/权重没有影响
      例外
    • !important(在选择器后面加一个这个,那么他的优先级最高)
    • 不过一般不推荐用这个
      • 不利于代码维护
      • 建议不要在自己的局部代码(公用代码)里使用
      • 可以在引入外部css、覆盖他本身代码时候,就可以用这个

Css的特性之继承

css中常见的可继承属性以及什么是继承

  • 什么是继承
    • 当前的元素,你不设置某些属性的时候,展现出来的样子(样式)————会继承父元素的一些属性
    • css中,每个属性都可以选择是否声明继承
  • 默认设置继承的属性
    • 颜色、文字、字体间距行高、对齐方式、列表的样式

学习html+css的第六天

利用html制作表格

什么是表

由一行或者多行的单元格数据组成的就是表

怎么在html中写表

我们用table表示表格
用tr表示行
用th表示表头
用td表示表数据
效果如下图
https://cdn.juyuantop.cn/7N9kSw20220627174316.png

常用的一些属性

属性 含义
border 边框(粗细)
cellspacing 单元格外间距
cellpadding 单元格内间距
colspan 合并列(excel那样)
rowspan 合并行(excel那样)

如下图
https://cdn.juyuantop.cn/7Nr7L420220627175343.png

利用html写一个表格吧

如下图,利用学的html写一个表格
https://cdn.juyuantop.cn/7N4DS620220627235459.png

  • 思路
    首先,把这个表格拆分为标题(居中)
    表头(thead)
    表内数据(tbody)
    表尾(这里没有...我也就不加了)

开搞,具体代码内容看下图
https://cdn.juyuantop.cn/7NYRdg20220627235739.png
https://cdn.juyuantop.cn/7NoU4O20220627235758.png
这边因为如果全是用border,那么就会出现边框重叠。不好看,所以我用了border-left和border-top用于给th,td增加上边框和左边框。又在table加了右边框和下边框实现了无重叠的边框。
同时给th增加了背景颜色以及字体白色,出现的效果如下图
https://cdn.juyuantop.cn/7NREQJ20220628000006.png

html的表单元素

html表单很多时候的作用就是提交一些信息给后端,叫做 前后端联调
常见的属性有

  • input (输入框)
  • label (提高交互)
  • select (下拉框)
  • textarea (文本域)
  • button (按钮)
  • form (通信传参)
    具体看下图的代码以及演示
    https://cdn.juyuantop.cn/7NXCXp20220630141623.png

未完待续,在看了

未完待续------明日继续学习!

评论 ( 2)

取消
    1. 头像
      1 Lv.1
      板凳
       回复
    1. 头像
      测试 Lv.1
      沙发
      要记得更新
       回复