HTML/CSS笔记

思维导图

HTML

网页的基本结构

文档声明，声明当前文档版本

迭代

1. 网页的版本

   HTML4

   XHTML2.0

   HTML5

   ...

2. 文档说明

   文档说明用来告诉浏览器当前的版本

进制

二进制

十进制

八进制

十六进制

字符编码

所有的数据在计算机中储存时都是以二进制形式存储的，文字也不例外。

所以一段文字在存储到内存时，都需要转换为二进制编码

当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

1. 解码

   将二进制码转换为字符的过程称为解码

2. 常见的字符集

   ASCII、ISO88591、GB2312、GBK、UTF-8

   在开发中我们使用的字符集都是UTF-8

3. 字符集(charset)

   我们可以通过meta标签来设置网页的字符集，避免乱码问题

4. 乱码问题

   如果编码和解码所采用的字符集不同就会出现乱码问题

基本结构

html html的根标签(元素)，网页中所有的内容都是要写根元素的里面

head head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页

meta meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题

title title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容

body body是html的子元素，表示网页的主题，网页中所有的课件内容都应该写在body里

实体

  ; 空格

> ; 大于号

< ; 小于号

© ; 版本符号

® ; 商标符号

head标签

meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的

1. charset 指定网页的字符集

2. name 指定的数据的名称

   1. keywords 表示网站的关键字，可以同时指定多个关键字 使用,隔开

   2. description 用于指定网站的描述，网站的描述会显示在搜索引擎搜索的结果中

3. http-equiv=“reftesh” 将页面重定向到其他网站

4. content 指定数据的内容

title标签

title标签的内容会作为搜索结果的超链接上的文字显示

网站的图标

设置网站的图标(标题栏和收藏栏)

网站的图片一般都存储在网站的根目录下，名字一般叫做favicon.ico

body标签

块级元素(block element)

在页面中独占一行的元素称为块元素(block element)

在网页中一般通过块元素来对页面进行布局

1. h1~h6 标题

   h1~h6 一共六级标题，从h1 到 h6 重要性依次递减

   h1 在网页中重要性仅次于title， 一般情况下一个页面只会有一个h1

   一般情况下标题标签只会使用h1h3，h4h6很少使用

   标题标签都是块元素

2. hgroup 标题分组

   hgroup标签用来为标题分组，可以将一组相关的标题同时放入hgroup中

    
   
        
   Welcome to my WWF
        
   For a living planet
    
    
   
        The rest of the content...
    

3. p 段落

   p标签用来表示页面中一个段落

   p标签也是一个块元素

4. blockquote 长引用

5. hr 分割线

行内元素(inline element)

在页面中不会独占一行的元素称为行内元素

1. em 加重

   em标签用于表示语音语调的一个加重

2. strong 强调

   strong表示强调，重要内容！

3. q 短引用

4. br 换行

注意事项

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

块元素基本什么都能放

p元素中不能放任何块元素

文本标签

1. b 加粗

2. i 倾斜

3. br 换行

4. hr 水平线

5. del 删除线

6. sub 下标

7. sup 上标

列表

列表之间可以互相嵌套

1. ol 有序列表

   使用ol标签创建有序列表

   使用li表示列表项

    
   
        
   第一条
        
   第二条
        
   第三条
    

2. ul 无序列表

   使用ul标签创建无序列表

   使用li表示列表项

   
       
   第一条
       
   第二条
       
   第三条
   

3. dl 定义列表

   使用dl标签创建定义列表

   ​
   • dt 定义内容
   • dd 解释说明
   ​

4. list-style:none 去除项目符号

超链接

超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置

1. a 标签

   使用a标签定义超链接，超链接也是一个行内元素，a标签可以嵌套除它自身外的任何元素

   1. href 目标路径

      值可以是一个外部网站的地址，也可以写一个内部页面的地址

   2. target 属性

      ​
      • _self 当前页面打开(默认)
      • _blank 新页面打开
      ​

2. 相对路径

   当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径

   相对路径都会使用.或..开头

   ./ 可以省略不写，如果不写./ 也不写../ 就相当于写了./

   ./ 表示当前文件所在的目录

   ../ 表示当前文件所在目录的上一级目录

3. 回到顶部

   可以将超链接的href属性设置为“#”，这样点击链接以后页面也不会发生跳转，而是转到当前页面的顶部位置

   在开发中可以将# 作为超链接的占位符使用

   回到顶部

4. 跳转指定位置

   可以跳转到页面的指定位置，只需将href属性设置#目标元素ID值

   id属性（唯一不重复）

   ​

   • 每一个标签都可以添加一个id属性
   • id属性就是元素的唯一标识，同一个页面汇总不能出现重复的id属性

   ​

5. 占位符

   在开发中可以将#作为超链接的占位符使用

   也可以使用javascript:;来作为href的属性，此时点击这个超链接什么都不会发生

图片标签

图片标签用于向当前页面引入一个外部图片

1. img标签

   使用img标签来引入外部标签，img标签是个自结束标签

   img元素属于替换元素(基于块元素和行内元素之间，具有两种元素的特点)

   src 图片路径

   alt 图片描述

   图片默认情况下不会显示，有些浏览器会在图片无法加载时显示

   搜索引擎会根据alt中的内容来识别图片

   width/height

   一般情况在PC端，不建议修改图片的大小，需要多大的图片就裁多大

   但是在移动端，经常需要对图片进行缩放（大图缩小）

2. 图片格式

   jpeg(jpg)

   支持的颜色比较丰富，不支持透明效果，不支持动图

   一般用来显示照片

   gif

   支持的颜色比较少，支持简单透明，支持动图

   颜色单一的图片，动图

   png

   支持的颜色丰富，支持复杂透明，支持动图

   颜色丰富，负责透明图片(专为网页而生)

   webp

   这种格式是谷歌新推出的专门用来表示网页中图片的一种格式

   它具备其他图片格式所有的优点，而且文件还特别的小

   缺点：兼容性不好

   base64

   将图片使用base64编码，可以直接将图片转换为字符，通过字符的形式引入图片

   一般都是需要和网页一起加载的图片才会使用base64

内联框架(iframe)

用于向当前页面中引入其他页面

内联框架的内容不会被搜索引擎检索

1. src 指向引入网页的路径

2. frameborder 内联框架的边框

   0 无边框

   1 有边框

3. width/height

音视频播放

1. 音频标签(audio)

   向页面中引入一个外部的音频文件

   音视频文件引入时，默认情况下不允许用户自己控制播放停止

   src 指定路径

   controls 用户控制 不需要值，填入即允许控制

   autoplay 自动播放

   如果设置了autoplay，则音乐在打开页面时会自动播放

   但是目前来说大部分浏览器都不会自动对音乐进行播放

   loop 循环播放

   source 标签

   除了使用src来指定外部文件外，还可以通过source来指定文件路径

   embed 标签(老版本/不好用)

2. 视频标签(video)

表格

表格

1. tr 行

2. td 单元格

   colspan 横向合并

   rowspan 纵向合并

长表格

1. thead 头部

2. tbody 主体

3. tfoot 底部

4. 可以在thead、tbody、tfoot后面加上tr、td来完成表格的行列创建

   thead、tbody、tfoot三者位置变化不会对表格有影响

5. th 表头(头部的单元格)

表格的样式

1. border-spacing 边框距离

2. border-collapse: collapse; 边框合并

3. 选择

   奇数行 nth-child(odd/2n+1)

   偶数行 nth-child(even/2n)

   .tb1:nth-child(odd){
   background-color: #bfa;
   }

4. tr不是table的子元素

   如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，

   并且将tr全都放到tbody中

   tr不是table的子元素！！！

5. vertical-align 垂直对齐

   默认情况下td是垂直居中的，可以通过vertical-align来修改

   top

   bottom

   middle

表单 form

表单属性

1. action 提交服务器地址

2. method 提交数据的方式

   get

   post

   1. get一般从服务器获取数据，post一般向服务器传送数据

   2. get是把参数数据队列加到提交表单的action属性所指的URL中，在URL中可以看到。post是通过HTTP post机制，用户看不到这个过程。

   3. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认不受限制。

   4. get安全性较低，post安全性较高。但是get执行效率比post方法好

表单控件

数据要提交到数据库，必须为元素指定name属性

1. 文本框

2. 密码框

3. 单选按钮

   像这样的按钮，必须要指定一个value属性，value属性最终会作为用户填写的值传送给服务器

   checked 默认选中

   name 同组按钮该属性值相同

   value 作为返回值发送给服务器