小白的HTML+CSS笔记

HTML+CSS笔记

• HTML的全称Hyper Text Markup Language 超文本标记语言

• title：文档标题标签

• 一般默认是这个

• 编码字符集:

GB2312国家编码字符集，包含简体文字，亚裔字符集；GBK是GB2312+繁体的字符集；utf-8是万国码，包含了所有国家的语言

• lang=“en”

  • 告诉搜索引擎爬虫，我们的网站时什么内容的。
    • 中文：zh
    • 德语：de
  • 同时是根元素，一个页面最多一个，并且该元素是所有其他元素的父元素或者祖先元素。
  • HTML5版本中没有强制要求书写该元素。

语义化的目的

• 每一个HTML元素要有具体的含义
• 所有的元素与展示效果无关
• 为了搜索引擎优化
• 为了让浏览器理解网页

各种元素

文本元素

• h元素

  • 表示标题

    • h1-h6：表示1级标题1-6级标题

• p元素

  • 表示段落

    • 独占一行

  • lorem，乱数假文可以自动生成很多英文

• em 斜体标签

  • 把里面的内容加粗展示

• strong

  • 把里面的内容斜体展示

• del

  • 中划线标签

• span元素

  • 没有语义，仅设置样式，行级元素
  • 好处：分块明确 ，让页面更加结块化，捆绑操作

• address

  • 这是地址标签，可以用斜体+成段展示模拟出来

• pre元素

  • 预格式化文本元素

    • 解决空白折叠

  • 空白折叠，在源代码中的连续空白字符，在页面显示时，会被折叠成一个空格

• 空格：文字分隔符

HTML实体字符

• 通常用于在页面中显示一些特殊符号

  • &单词
  • &#数字
  • 小于符号：<
  • 大于符号：>
  • 空格符号： 
  • 版权符号：©
  • &符号：&

a元素

• target属性
  • _selt:当前页面窗口打开，默认值
  • _blank:在新窗口中打开
• 作用
  • 超链接
  • 锚点
  • 发邮件，打电话
  • 协议限定符

图片元素

• img元素

alt属性：当图片资源失效时，将使用该属性的文字替代图片
		<img src="" alt="">

• 和a元素联用

• 和map元素

  • 子元素：area

• 和figure元素

  • 指代、定义，通常用于图片、图片标题、描述包裹起来
  • 子元素：figcaption

多媒体元素

• video视频

  • controls

    • 控制空间的显示

  • autoplay

    • 自动播放

  • muted

    • 静音播放

  • loop

    • 循环播放

• audio音频

列表元素

• 有序列表

  • ol>li
    • type里面可以有数字、A、a，罗马数字I，i
      • 倒序排列：reversed = “reversed”
      • 自定排列初始值：start=""

• 无序列表

  • ul>li
  • 常用于制作菜单，新闻列表

容器元素

• div元素

  • 块级元素，独占一行，没有语义
  • 好处：分块明确，让页面更加结块化，捆绑操作

• 语义化容器元素

  • header元素，用于页头
  • footer元素，常用于页脚
  • acticle元素，用于表示整篇文章
  • section元素，用于文章的章节
  • aside元素，用于表示侧边栏

元素的包含关系

• 标题元素和段落元素不能相互嵌套，并且不能包含容器元素

form表单

• method=“get/post”：发送数据的方式

• action=“” ：发送给谁的地址

• input：表单的组件

  • input type=“text”:输入框

  • input type=“password”:密码框

  • input type="radio name=“xxx"单选框

    • name的值相同实现单选

  • input type=“checkbox” name="xxx"多选框

    • name的值相同实现多选

  • 加上checked="checked"实现默认选择

  • input type=“submit”：提交组件

  • input type=“methhod”

    • 当鼠标聚焦的时候发生什么事情

  • 提交表单需要数据名和数据值

    • 数据名：name=“xxxx”
    • 数据值：数据内容value=“xxxx”
    • select 下拉单选框，例子如下：

          <h1>Choose your city</h1>
          <form action="">
          <select name="city" id="">
                  <option value="wuhan">wuhan</option>
                  <option value="guangzhou">guangzhou</option>
                  <option value="chengdu">chengdu</option>
                  <option value="tianjin">tianjin</option>
              </select>
              <input type="submit">
      </form>
    

主流浏览器及内核

作为前端工程师，平常打交道最多的毫无疑问是浏览器，我们众所周知的主流浏览器有：IE，Firefox，Google，Safari，opera。

• IE的内核为trident
• Firefox内核为Gecko
• Google与Safari的内核是webkit
• 新版的谷歌内核自研blink
• Opera内核为presto

CSS引入

• 页面中css的引入方式主要有：

  • 在head标签内用style标签引入
  • 在标签内使用style 行内样式
  • 在head标签内使用link标签，用href指向css文件

选择器

• 常用选择器有：

  • id选择器 id=""
  • class选择器 class=""
  • 标签选择器 div
  • 通配符选择器 *{}
  • 属性选择器 [id=""]{}
  • 伪类选择器 a:hover{}
  • 伪元素::before ::after

各选择器的权重以及优先级

• !important>行间样式>id>class| 属性选择器>标签选择器>通配符

标题1	权重
!important	正无穷
行间样式	1000
ID	100
class/属性选择器/伪类选择器	10
标签选择器/伪元素选择器	1
通配符	0

行级元素，块级元素，行级块元素

• 常见行级元素：span, strong, em, a, del
  • 特点是：不独占一行，不可以css改变宽高
• 常见块级元素：div, p, ul, li, ol, form
  • 特点是：独占一行，css可以改变宽高
• 行级块元素：img
  • 内容决定大小，不独占一行，可以改变宽高

盒子模型

• 抽象盒子由4部分组成：内容（content），内边距（padding），边框（border），外边距（margin）。

• 盒子模型分为两种：IE盒子模型，标准盒子模型。

  • IE盒子模型：box-sizing:content-box;他的宽高为border+padding+content。
  • 标准盒子模型：box-sizing:border-box；他的宽高就是content的宽高。

css知识(细节知识)

1. font-size设置字体大小（设置的是字体的高）
2. font-style:italic 斜体
3. color颜色 rgb光学三原色 每个原色00到ff代表饱和度
4. 单行文本垂直居中，标准做法是line-height=height
5. 首行缩进用text-indent:2em 首行缩进2单位

• px：像素 相对单位（像素px是相对于显示器屏幕分辨率而言的，而且在特定设备上总是一个近似值）
• em：相对单位（相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。特点：继承父元素字体大小）
• rem：相对单位（与em类似，但是特别是相对于根元素）

7. a标签去除下划线 text-decoration:none

• 绝对定位absolute：脱离原来位置进行定位，相对于最近的有定位的父级进行定位，如果没有，就相对于文档进行定位，脱离了标准文档流
• 相对定位：保留原来位置进行定位，相对于自己原来的位置进行定位
• 固定定位fixed：以不变应万变

css画三角形可以使用border：

   <div class="div"></div>
    <div class="box"></div>
     .div {
        width: 0px;
        height: 0px;
        border: 100px solid #f40;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }
      .box {
        width: 0px;
        height: 0px;
        border-left: 100px solid #f40;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
      }

• 效果：
  

BFC

1. 全称：block format context（块级格式化上下文）。是一个独立不干扰外界也不受外界干扰的盒子。
2. 创建bfc的常用方式有：
   • position：absolute;
   • display:inline-block;
   • float:left/right;
   • overflow:hidden;
3. BFC布局规则：
   1.内部的Box会在垂直方向，一个接一个地放置。
   2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
   3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
   4.BFC的区域不会与float box重叠。
   5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
   6.计算BFC的高度时，浮动元素也参与计算

浮动

浮动元素产生了浮动流，会有以下效果：

• 产生了浮动流的元素，块级元素看不到
• 产生了bfc的元素和文本类属性元素（带有inline属性），以及文本都可以看到浮动元素
• 浮动清除可以用伪元素::after{content:"",display:block;clear:both}

知识拓展：position:absolute和浮动在内部把元素转换成了inline-block行内块元素，可以设置宽高了。

<div class="div1"></div>
<div class="div2"></div>
 .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }
      .div2 {
        width: 200px;
        height: 200px;
        background-color: green;
      }

• 效果
  

<div class="div1"></div>123
 .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }

• 效果
  

3. 文本类属性元素（img标签）

<div class="div1"></div>
    <img
      src="http://t8.baidu.com/it/u=3571592872,3353494284&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1587989144&t=66c390a0a7ee36119717f6669127d126"
      alt=""
    />

• 效果

4. 出发BFC

 .div1 {
        width: 100px;
        height: 100px;
        background-color: black;
        float: left;
      }
      .div2 {
        overflow: hidden;
        width: 200px;
        height: 200px;
        background-color: red;
      }

• 效果
  

总结

• 微信：fu1998
• 由于本人能力有限，如有错误，请及时指正！