2020-08-18 前端html与css学习笔记总结篇(超详细)_超系统的 html+css 学习笔记-CSDN博客

第一部分 HTML

第一章职业规划和前景

职业方向规划定位：
- web前端开发工程师
- web网站架构师
- 自己创业
- 转岗管理或其他
web前端开发的前景展望：
- 未来IT行业企业需求最多的人才
- 结合最新的html5抢占移动端的市场
- 自己创业做老板
- 随着互联网的普及web开发成为企业的宠儿和核心
web职业发展目标：
- 第一、梳理知识架构
  - 负责内容的HTML
  - 负责外观的css（层叠样式表）
  - 负责行为的js
  - ps切图
- 第二、分解目标（起步阶段、提升阶段、成型阶段）
  - 起步阶段：
    - 基本知识的掌握
    - 常用工具的掌握
    - 沟通技巧的掌握（围绕客户的需求）
    - 良好的开发习惯（加注释、对齐方式）
  - 提升阶段：
    - 熟悉掌握HTML基本标签和属性
    - 熟练掌握css的基本语法和使用
    - 浏览器兼容和w3c标准的掌握
    - 结合html+css+js开始系统项目的开发
  - 成型阶段：
    - 精通DIV+CCS布局
    - 精通css样式表控制html标签
    - 熟悉运用js制作动态网站的效果
    - 能独立开发完成网站

第二章 html基本结构

认识HTML：
- html不是一种编程语言，是一种标志语言
- 标记语言是由一套标识标签组成的
- html使用标签来描述网页
html结构：

        
        
         
         <html>
        
        
        
        
         
             <head></head>
        
        
        
        
         
             <body></body>
        
        
        
        
         
         </html>

不成对出现的标签
<br> <hr> <meta> <img> <input..> <option..> <link>

HTML 基本标签的讲解：
- <html> <head> <body>标签
- <h1>—-<h6>仅仅用于标题文本，不要为了产生粗体文本使用它们
- <p>标签段落标签
- <strong><b>标签
- 都会让文字产生加粗效果
  - <strong>用于强调文本，强度更深，表示重要文本—>用于SEO优化
  - <b>只是视觉加粗效果—>单纯为了产生加粗
- <em> <i>标签
  - em用于强调文本
  - i只是视觉斜体效果
  - <strong>比<em>强调更强
- 特殊符号：
  - &nbsp; —->空格
  - &gt; —>大于号
  - &lt；—>小于号
  - &quot；—>引号
  - &copy;–>版权号

第三章 html基本标签

HTMl基本标签：
- span标签
  - 对被用来组合文档中的行内元素
  - 注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化
- <pre>标签
  - 文字的格式按源码的排版来显示，我们称之为预处理格式
- <a>标签—>他有一个必不可少的属性 href
  - target属性：
  - _self(在原来页面打开)
  - _blank（新窗口打开）
  - _top（打开时忽略所有的框架）
  - _parent（在父窗口中打开）
- 创建锚点和锚链接
  - 锚点也是一种超链接，是页面内进行跳转的超链接
    - 第一步：创建锚点 <a name="锚点名称"></a>
    - 第二步：使用创建好的锚点名称 <a href="#锚点名称">内容</a>
- marquee标签
  - 可以创建一个内容滚动效果

1	<marquee direction="down" loop="4" οnmοuseοver=this.stop() οnmοuseοut=this.start()></marquee>

direction 表示滚动方向，取值有（left,right,up,down,默认left）
loop表示滚动循环的次数，默认为无限循环

1	οnmοuseοver=this.stop() οnmοuseοver=this.start() scrollamout="1"(滚动速度)

表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动

第四章 img图片标签与路径

图片标签与路径：
- 常见图片格式 jpg png gif
- Gif （只支持全透明）
- Jpeg /jpg
- Png 半/全透明都支持
图片标签写法：
- <img src="" alt="" width="" height="" />
图片四要素：
- src="" 图片路径
- alt="" 图片含义
- width="" 图片宽度和图片大小保持一致
- height="" 图片高度和图片大小保持一致
- title=""
路径知识：
- 相对路径、绝对路径：
  - 相对路径：(Relative Path) 相对于该文件的路径；
  - 绝对路径：(Absolute Path) 从磁盘出发的路径；
- <img src="" …… align="" /> align属性–设置图片与后面文字的位置关系
  值–top、bottom、middle、absmiddle、left、right
在静态页面中：
- /开头表示根目录；
- ./表示当前目录；（斜画线前面一个点）
- ../上级目录；（斜画线前面两个点）
- 直接用文件名不带/也表示同一目录
- 这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。

第五章三种列表的讲解

三种列表的知识讲解：
- <ul>无序列表
  - 无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识

1. 有序列表
  - 有序列表也是一列项目，只是列表项目使用的是数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li>标签。

        
        
         
         <ol>
        
        
        
        
         
            <li>内容一</li>
        
        
        
        
         
            <li>内容二</li>
        
        
        
        
         
            <li>内容三</li>
        
        
        
        
         
         </ol>

列表符号
- 无序列表-列表符号:
  - type="circle" 空心圆 type=“disc” 实心圆默认值 type="square" 方块符
- 有序列表-列表符号
  - type="A" A B C D
  - type="a" a b c d
  - type="1" 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii
- 列表嵌套
- 无序列表-嵌套

        
        
         
         <ul>
        
        
        
        
         
          <li>柚子
        
        
        
        
         
           <ul>
        
        
        
        
         
            <li>沙田柚</li>
        
        
        
        
         
            <li>蜜柚</li>
        
        
        
        
         
           </ul>
        
        
        
        
         
          </li>
        
        
        
        
         
          <li>荔枝</li>
        
        
        
        
         
          <li>苹果</li></ul>

有序列表-嵌套

        
        
         
         <ol>
        
        
        
        
         
          <li>茶
        
        
        
        
         
           <ul>
        
        
        
        
         
            <li>红茶</li>
        
        
        
        
         
            <li>绿茶</li>
        
        
        
        
         
           </ul>
        
        
        
        
         
          </li>
        
        
        
        
         
          <li>果汁</li>
        
        
        
        
         
          <li>牛奶</li></ol>

定义列表
- 定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 <dl> 标签开始。每个定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。

        
        
         
         <dl>  
        
        
        
        
         
              <dt>pc网页制作</dt>  
        
        
        
        
         
              <dd>学习DIV+CSS JS JQ 项目实战</dd>  
        
        
        
        
         
              <dt>手机网页制作</dt>  
        
        
        
        
         
              <dd>手机网页制作实战</dd>
        
        
        
        
         
         </dl>

dd是对dt的解释
- < dl>< /dl>用来创建一个普通的列表,
- < dt>< /dt>用来创建列表中的上层项目，
- < dd>< /dd>用来创建列表中最下层项目，
- < dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

        
        
         
         <dl>
        
        
        
        
         
             <dt>中国城市</dt>
        
        
        
        
         
             <dd>北京 </dd>
        
        
        
        
         
             <dd>上海 </dd>
        
        
        
        
         
             <dd>广州 </dd>
        
        
        
        
         
             <dt>美国城市</dt>
        
        
        
        
         
             <dd>华盛顿 </dd>
        
        
        
        
         
             <dd>芝加哥 </dd>
        
        
        
        
         
             <dd>纽约 </dd>
        
        
        
        
         
         </dl>

dl是definition list的缩写
dt是definition title的缩写
dd是definition description的缩写

list-style属性具有三个属性分量：
list-style-position ：设置列表项图标的位置，位于文本内或者文本外
list-style-type：设置列表项图标的类型
list-style-image：使用图像设置列表项图标

第六章表单元素(上)

表单标签:

<form>表单标签

<form>表单是一个包含表单元素的区域，包括起来的都是表单的内容

              
              
               
               <form>
              
              
              
              
               
                <input type="text"/>
              
              
              
              
               
               </form>

HTML标签 - Action和确认按钮：
- 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

        
        
         
         <form action="html.do" method="get">    
        
        
        
        
         
                 username:  <input type="text" name="user" />   
        
        
        
        
         
                 <input type="submit" value="提  交" />
        
        
        
        
         
         </form>

HTML标签 - 隐藏域隐藏标签：
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器

        
        
         
         <form>        
        
        
        
        
         
              <input type="hidden" name="hid" value="value">
        
        
        
        
         
         </form>

<input>标签的掌握
- 常用type类型：
  - <input type="" name="" value="" />
  - type="text" 单行文本输入框
  - type="password" 密码（maxlength=""）
  - type="radio" 单项选择（checked="checked"）
  - type="checkbox" 多项选择
  - type="button" 按钮
  - type="submit" 提交 type="image"图片提交
  - type="file" 上传文件
  - type="reset"重置
  - type="hidden" 隐藏

关于表单中的设置默认值：

          
          
           
           <input type="text" name="" value="今天心情不错" />
          
          
          
          
           
           <input type="radio" name="" value="" checked="checked">
          
          
          
          
           
           <input type="checkbox" name="" value="" checked="checked">

        
        
         
         <select name="" >
        
        
        
        
         
          <option  value=""></option>
        
        
        
        
         
          <option  value="" selected="selected"></option>
        
        
        
        
         
         <select>

textarea没有默认值

<label>标签的使用

<label></label>
- label 元素不会向用户呈现任何特殊效果。
- 不过，它为鼠标用户改进了可用性。
- 如果您在 label 元素内点击文本，就会触发此控件。
- 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的for 属性应当与相关元素的 id属性相同。

例子：（重要—注册表单–用户体验–必做）

            
            
             
             <p>单向选择</p>
            
            
            
            
             
             <label for="male">男：</label><input type="radio" name="sex" id="male"/>
            
            
            
            
             
             <label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章表单和表格(下)

表单和表格标签：
- <textarea>文本域标签
- <textarea>标签：
- <textarea></textarea>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols
注意：
- rows表示这个文本域有多少行
- cols表示这个文本域有多少列
除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）

<select>标签的掌握

注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name属性

            
            
             
             <form>      
            
            
            
            
             
                 <select name=""  id="">
            
            
            
            
             
                      <option value="1">1月</option>  
            
            
            
            
             
                       <option value="2">2月</option>      
            
            
            
            
             
             </select>
            
            
            
            
             
             </form>

常用到的属性：disabled=“disabled” name="sel" size="2"

<table>表格标签

<table>表格标签：<table>是表格标签，可以用它定义一个表格。

          
          
           
           <table border="1">
          
          
          
          
           
               <tr>
          
          
          
          
           
               <td>姓名</td>
          
          
          
          
           
               <td>性别</td>
          
          
          
          
           
               </tr>
          
          
          
          
           
           </table>

注意：<table>的border属性不能少

<tr> <td>标签的使用
- <tr>行标签：
  - <tr>可以定义表格中的一行，一个<tr></tr>表示一行。

        
        
         
         <table border="1">
        
        
        
        
         
         <tr>
        
        
        
        
         
          <td>姓名</td>
        
        
        
        
         
          <td>性别</td>
        
        
        
        
         
         </tr>
        
        
        
        
        
        
         
         <tr>
        
        
        
        
         
          <td>姓名</td>
        
        
        
        
         
          <td>性别</td>
        
        
        
        
         
         </tr>
        
        
        
        
         
         </table>

<td>单元格标签:

<td>可以定义表格中的一个单元格，<td></td>表示一个单元格。

            
            
             
             <table border="1">
            
            
            
            
             
             <tr>
            
            
            
            
             
             <td >姓名</td>
            
            
            
            
             
             <td>性别</td>
            
            
            
            
             
             <td>爱好</td>
            
            
            
            
             
             </tr>
            
            
            
            
             
             </table>

border-collapse 属性设置是否将表格边框折叠为单一边框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并

第一部分总结：

非可视化标签：head meta style scrpit...
可视化标签：img div span a ul li…
只有可视化标签，才能用css改变它
单标签：meta link base img input br hr
双标签：html head body div a p span ..ul li ol dl ….
常用可视化标签
- div
  - 一般用它来布局
- a 超链接标签
  - href*属性：设置跳转的网页地址
  - target属性：设置跳转的目标
  - 结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签
- img
  - src*属性用来设置图片的url数据
  - alt提供给搜索引擎搜索的
  - width
  - height
  - 结论：显示图片
- ul li
  - 列表
  - 结论：只要将来设计页面中有固定样式的列表，就用ul和li
- table caption tr td (th)
  - 慢慢已经被淘汰了被ul li代替
  - 如果是合并竖排的就是合并行（rowspan）
  - 如果是合并横排的就是合并列（colspan）

HTML部分导图总结

HTML5标签集合

第二部分 CSS

第八章 css基础知识

css基础知识：
- css样式表的定义
- css：（Cascading Style Sheets）层叠样式表；
分类及位置：内部样式-head区域style标签里面
- 外部样式-link调用
- 内联样式-标签元素里面
css内的注释：/*注释内容*/
css样式表的语法
- CSS规则由两个主要的部分构成：要添加样式的盒子名或者标签名、和要添加的样式。
- 盒子名或者标签名{属性:值;}
- CSS中几种颜色的表示方法
  - 用颜色名表示
    - 有17个预先确定的颜色，它们是
      - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
        　　olive, orange, purple, red, silver, teal, white, and yellow
  - 用十六进制的颜色值表示(红、绿、蓝)
    - #FF0000或者#F00
  - 用rgb(r,g,b)函数表示
    - 如：rgb(255,255,0)
  - 用hsl(Hue,Saturation,Lightness)函数表示（色调、饱和度、亮度)
    - 如：hsl(120,100%,100%),色调0代表红色，120代表绿色，240代表
      蓝色
  - 用rgba(r,g,b,a)函数表示
    - 其中a表示的是改颜色的透明度，取值范围是0~1，其中0代表完全透明
  - 用hsla(Hue,Saturation,Lightness,alpha)函数表示
    - 色调、饱和度、亮度、透明度
  - 例子

        
          
         
         <div style="position:absolute;top:0px">
        
        
        
        	
         
         <div style="background-color:gray;">background-color:gray
         
         </div>
        
        
        
        	
         
         <div style="background-color:#F00;">background-color:#F00
         
         </div>
        
        
        
        	
         
         <div style="background-color:#ffff00;">background-color:#ffff00
         
         </div>
        
        
        
        	
         
         <div style="background-color:rgb(255,0,255);">background-color:rgb(255,0,255)
         
         </div>
        
        
        
        	
         
         <div style="background-color:hsl(120,80%,50%);">background-color:hsl(120,80%,50%)
         
         </div>
        
        
        
        	
         
         <div style="background-color:rgba(255,0,255,0.5);">background-color:rgba(255,0,255,0.5)
         
         </div>
        
        
        
        	
         
         <div style="background-color:hsla(120,80%,50%,0.5);">background-color:hsla(120,80%,50%,0.5)
         
         </div>
        
        
        
        
         
         </div>

内部样式表
- 当单个页面需要设置样式时，就应该使用内部样式表。
- 使用 <style></style>标签在文档<head></head>里面定义内部样式表

        
        
         
         <head>
        
        
        
        
         
          <style type="text/css" >
        
        
        
        
         
           p{color:red;}
        
        
        
        
         
          </style>
        
        
        
        
         
         </head>

从外部引入到样式分为两种：（注意写在head标签里面）
当样式需要应用于很多页面时，就需要用到外部样式表，首先需要创建一个css文件，然后引用到我们的页面中。
Link样式表式： <link rel=”stylesheet” type=”text/css” href=”my.css”(href表示路径)>
Html式： <style type="text/css">@import url("css.css");></style>

内联样式表（优先级高）
- 写在标签里面的样式
- 如：<p style="color:red;"></p>
表示给p标签里面的文字颜色设置为红色
区别：外链样式与导入样式
- link标签是属于xhtml范畴，而@import则是css2.1中特有的。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
- 加载的顺序的区别，link加载的css时，是一种并行(没有尝试是否是这样)加载CSS方式，而@impor则在整个页面加载完成后才加载。
- 兼容性的区别，因@import``CSS2.1才特有的，所以对于不兼容CSS2.1的浏览器来说，无效。
- 在样式控制上(比如动态改变网页的布局时,使用javascript操作DOM)的区别，此时@import就无能为力了。

样式的优先级补充
- 相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：
  - 内联样式表（标签内部） > 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式
层叠优先级是:
- 浏览器缺省< 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:类选择器 < 类派生选择器<ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器，所以完整的层叠优先级是:
- 浏览器缺省 <外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器< 外部样式表ID选择器< 外部样式表ID派生选择器< 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式…共12个优先级
另外，如果同一个元素在没有其他样式的作用影响下，其Class定义了多个并以空格分开，其优先级顺序为：
- 一个元素同时应用多个class，后定义的优先（即近者优先），加上!important者最优先！

第九章 css选择器(上)

css选择器：
- class类选择器可以重复利用
- id选择器唯一
标签选择器
- 什么是选择器：css选择器就是要改变样式的对象
选择器{属性:值;属性:值;}
标签选择器：页面中所有的标签都是一个选择器 p{color:red;}
ID选择器
- 选择id命名的元素以 # 开头 #p1{color:#0f0;}
类选择器
- class选择器，选择clas命名的元素以.开头 .first{color:#00f;}
css代码写完后上线前要经过压缩处理
本地和服务器分两个css版本（备份）
压缩后注释都清除，空间体积减少
群组选择器
- 选择多个元素,以逗号隔开 #main,.first,span,a,h1{color:red;}
包含选择器
- 选择某元素的后代元素，也称后代选择器，父类与子类间以空格隔开p
  - span{color:red;}
属性选择器
- 选择包含某一属性的元素
- a[title]{color:red;} 选择包含title的a标签
- a[title][href]{color:red;} 选择包含title和href的a标签
> + 选择器子类选择器：只选择子元素（只选择儿子）（相当于包含元素）
- p > span{color:red;}
相邻兄弟选择器：只选择后面的相邻兄弟元素
- p + span{color:red;}

第十章 css选择器(下)

<a>伪类选择器
- a:link {color:#FF0000;} / 未访问的链接 / （只用于a标签）
- a:visited {color:#00FF00;} / 已访问的链接 / （只用于a标签）
- a:hover {color:#FF00FF;}/* 鼠标移动到链接上
- */（可和其他标签结合一起用）
- a:active {color:#0000FF;} / 选定的链接 /
- 注意
  - 伪类选择器的排序很重要，a:link a:visited a:hover a:active，记作lvha
输入伪类选择器（针对表单）
- input:focus{color:red;} / 键盘输入焦点 /
其他伪类选择器
- p:first-child{color:red;} /* 第一个p */
- :before 在元素之前添加内容。
- :after 在元素之后添加内容。
css优先规则
- 内联样式表-> ID 选择器—> Class 类选择器->标签选择器

第十一章背景属性

背景属性：
- 背景的添加：
- 背景颜色的添加:
  - background:red;
  - backgronnd-color:red;
- 背景图片的添加：
  - background:url(“images/1.jpg”);
  - backgronnd-image:url(“images/1.jpg”);
- 背景的平铺
- 什么是平铺？平铺就是图片是否重复出现
  - 不平铺：background-repeat:no-repeat;
  - 水平方向平铺：background-repeat:repeat-x;
  - 垂直方向平铺：background-repeat:repeat-y;
  - 完全平铺：默认为完全平铺
- 背景图片的定位
  - 背景图片的定位就是可以设置显示背景图片的位置，通过属性background-position来实现
  - background-position的取值可为英文单词或者数值和百分值。
  - background-positon的英文单词取值
  - top left
  - top center
  - top right
  - center left
  - center center
  - center right
  - bottom left
  - bottom center
  - ottom right
- background-positon的数值取值
  - background-position:x y;
- positon的百分值取值
  - background-position:x% y%;
- 背景图片的大小
  - 背景图片的大小可以通过属性background-size来设置background-size的取值可为数值和百分值。
- background-size的数值取值
  - background-size:x y;