HTML/CSS笔记

思维导图

HTML

网页的基本结构

<!DOCTUPE HTML> 文档声明，声明当前文档版本

迭代

1. 网页的版本

   HTML4

   XHTML2.0

   HTML5

   ...

2. 文档说明

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

进制

二进制

十进制

八进制

十六进制

字符编码

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

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

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

1. 解码

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

2. 常见的字符集

   ASCII、ISO88591、GB2312、GBK、UTF-8

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

3. 字符集(charset)

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

    <meta charset="UTF-8">

4. 乱码问题

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

基本结构

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

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

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

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

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

实体

&nbsp ; 空格

&gt ; 大于号

&lt ; 小于号

&copy ; 版本符号

&reg ; 商标符号

head标签

meta标签

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

1. charset 指定网页的字符集

    <meta charset="UTF-8">

2. name 指定的数据的名称

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

       <meta name="keywords" content="1,2,3" >

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

       <meta name="descripition" content="这是一个网页">

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

    <meta http-equiv="refresh" content="3,url=https://www.baidu.com">
    <!-- 页面将在3秒后跳转到百度 -->

4. content 指定数据的内容

title标签

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

网站的图标

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

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

 <link rel="icon" fref="favicon.ico">

body标签

块级元素(block element)

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

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

1. h1~h6 标题

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

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

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

   标题标签都是块元素

2. hgroup 标题分组

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

    <hgroup>
        <h1>Welcome to my WWF</h1>
        <h2>For a living planet</h2>
    </hgroup>
    <P>
        The rest of the content...
    </P>

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表示列表项

    <ol>
        <li>第一条</li>
        <li>第二条</li>
        <li>第三条</li>
    </ol>

2. ul 无序列表

   使用ul标签创建无序列表

   使用li表示列表项

   <ul>
       <li>第一条</li>
       <li>第二条</li>
       <li>第三条</li>
   </ul>

3. dl 定义列表

   使用dl标签创建定义列表

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

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

超链接

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

1. a 标签

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

   1. href 目标路径

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

      <a href="./index.html" target="_blank" ></a>

   2. target 属性

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

2. 相对路径

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

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

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

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

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

3. 回到顶部

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

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

   <a href="#" >回到顶部</a>

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来指定文件路径

   <audio controls>
   对不起，您的浏览器不支持播放音频！请升级浏览器！
   <source src="./source/audio.mp3">
   < src="./source/audio.ogg">
   </audio>
   <!-- 优先使用.mp3文件，如果不支持则使用.ogg文件，都不支持则显示汉字 -->

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

   <audio controls>
   <source src="./source/audio.mp3">
   <source src="./source/audio.ogg">
   <embed src="./source/audio.mp3" type="audio/mp3" width="300px" height="100px">
   </audio>

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. 文本框

   <input type="text" name="username" value="hello">

2. 密码框

   <input type="password" name="password">

3. 单选按钮

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

   checked 默认选中

   name 同组按钮该属性值相同

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

   <input type="radio" name="hell