HTML&CSS笔记(1)

语义化

• 标签一

 标签：页面上的所有内容

 
段落文本
文章段落标签      //段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。

 标题文本 (x为1-6)网页添加标题      //
是最高的等级。一般h1标签被用在网站名称上

 需要强调的文本（粗体）、需要强调的文本（斜体）

 文本 为了设置文本单独样式

 引用文本 会自动加双引号引用

 引用文本  一般用于较长文本
 //html代码中输入**空格**、**回车**都是没有作用的

 
   (写在段落后 )   分行显示文本

     （写在需要空格的文字后）

 
  加一条分割的横线 ，同
 是一个空标签  只有开始标签 无结束标签。

 
联系地址信息
  (也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份)  --显示为斜体

 代码语言   插入显示代码语言时，适用于一行代码  多行可用

  
语言代码段
   插入显示代码段 （会预格式化文本、被包围在 pre 元素中的文本通常会保留空格和换行符）
===网页中预显示格式时都可以使用它
 
 
 
 
 
  
标签二
 
 
 
 
ul-li标签:   信息列表（每项li前都自带一个圆点）

 
[信息]
 
[信息]
 
......

 
 
ol-li：有序列表标签 (每项
前都自带一个序号，序号默认从1开始)

 
[信息]
 
[信息]
 
......

 
 
…
 划分出独立模块、逻辑部分（相当于一个容器）
参考代码：
 
        
热门课程排行榜
 
        

              
前端开发面试心法 
              
零基础学习html
              
javascript全攻略
        

 
         
最新课程排行
         
 
              
版本管理工具介绍—Git篇 
 
              
Canvas绘图详解
              
QQ5.0侧滑菜单
         

 
 
…
   (给div命名，使逻辑更加清晰) ==为这一个独立的逻辑部分
设置一个名称，用id属性来为
提供唯一的名称


表格：
table、tbody、tr、th、td
1、…：整个表格以标记开始、标记结束。
2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、…：表格的一行，所以有几对tr 表格就有几行。
4、…：表格的一个单元格，一行中包含几对..
，说明一行中就有几列。
5、…：表格的头部的一个单元格，**表格表头。**
6、表格中列的个数，取决于一行中数据单元格的个数。
(没有表格线/表头，也就是th标签中的文本默认为**粗体**并且**居中**显示)

     (摘要：摘要的内容是不会在浏览器中显示出来，增加表格的可读性(语义化))
    （描述表格内容，标题的显示位置：表格上方）
示例如下
****标题文本
 
               … 
         
        …

         
标题文本
         
 
               
…
 
               
…

超链接：
链接显示的  
实现超链接语法 
title属性：鼠标滑过链接文字时会显示这个属性的文本内容
标签在默认情况下，链接的网页是在当前浏览器窗口中打开
click here!  在新的浏览器窗口打开链接

标签还有一个作用是可以链接Email地址使用mailto能让访问者便捷向网站管理者发送
电子邮件。如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数
每一个都以“&”分隔。
 发送  (浏览器自动调用默认客户端邮件程序，并在收货人中自动填上地址)
cc=填写抄送地址  bcc=密件抄送地址  subject= 添加邮件主题 body= 添加邮件内容
如：发送
 发送  （分好隔开多个收货人地址，群发）


图片：

1、src：标识图像的位置（加载图片；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件


 
 
#表单标签、与用户交互







#单选、复选框

1、   当 type="radio" 时，控件为单选框
      当 type="checkbox" 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked="checked" 时，该选项被默认选中
⚠️：同一组的单选按钮，name 取值一定要一致

#下拉列表选择框 eg:
  
      看书
      旅游
      运动
      购物
    
1、value是向服务器提交的值
2、选项  选项为显示的可选择的值
3、设置selected ="selected"属性，表示该选择项默认被选中


#下拉列表框多选
在 select标签中设置multiple="multiple"属性，如下：
...

#提交按钮（确定、提交数据）、重置按钮（使输入框等恢复初始状态）
 

1、type为submit时，按钮才有提交作用、为reset时，才有重置作用
2、value：按钮上显示的文字

#label标签
label标签不会向用户呈现任何特殊效果，在 label 标签内点击文本，就会触发此控件。就是说，
当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选
中和该label标签相关连的表单控件上）。
慢跑
  （标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。）如：（注意label中for和控件上id的值）
  女
  
  

  输入你的邮箱地址
  

 
 
CSS
 
 
认识CSS
 
 
1、CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等
 
 
//如下即设置段落p内的样式
p{
   font-size:12px;/*设置文字字号*/
   color:red;/*设置文字颜色*/
   font-weight:bold;/*设置字体加粗*/
}

 
 
2、把
中的三个短语设置颜色：
 把这三个短语用括起来，在写如以下代码：
 
 
span{
   color:red;
}
 
 
3、CSS代码语法
 css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示
 
 
 
  
 
   
 
     
   
 
  
 
  

    52fde5c30001b0fe03030117.jpg.png 
  
 
 
 
 
 
 
选择符：选择器、指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
 声明：在{}中，属性和值之间冒号隔开，多条声明分好隔开
 如：
 
 
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}
 
 
4
 
 
 
 
 
  
 
   
 
     
   
 
  
 
  

    屏幕快照 2016-11-18 下午9.02.51.png 
  
 
 
 
 
5、CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种
 
 
 
  
内联式：
 
 
 
 
css样式表就是把css代码直接写在现有的HTML开始标签中,如
 
 
这里文字是红色。
 
 
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开，如：
 
 
这里文字是红色。
 
 
嵌入式css样式，
 
 
就是可以把css样式代码写在标签之间。如下面代码实现把三个标签中的文字设置为红色：
 
 

 
 
嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间,如上
 
 
 
  
 外部式css样式
 
 
 
 
(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在代码的前面，所以离设置元素较远，即它们的优先级遵循就近原则。
 2️⃣、上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
 
 
选择器
 
 
每一条css样式声明（定义）由两部分组成，形式如下：
 
 
选择器{                            body{
       样式;                            font-size:12px  
      }                                }
 
 
{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
 
 
 
  
 
   
 
    
 
      
    
 
   
 
   

     屏幕快照 2016-11-19 下午2.24.11.png 
   
 
  
 
 
 
 
类选择器
 
 
语法：
 
 
 
  
.类选器名称{css样式代码;} (英文圆点开头、类选择器名称可以任意命名)
 
 
 
 
使用方法：
 
 
 
  
1️⃣使用合适的标签把要修饰的内容标记起来，如：
 胆小如鼠
 2️⃣使用class="类选择器名称"为标签设置一个类，如：
 胆小如鼠
 3️⃣设置类选器css样式，如：
 .stress{color:red;}
 
 
 
 
ID选择器
 
 
ID选择器都类似于类选择符,区别：
 1️⃣、为标签设置id = "ID名称"，而不是class = "类名称"。
 2️⃣、ID选择符前面是井号（#），而不是英文圆点（.）。
 如：
 
 
简单的问学

#halo{
    font-size:20px;
    color:green;
}
 
 
类和ID选择器的区别：
 
 
 
  
相同点：可以用于任何元素
 
 
 
 
 
  
不同点：
 1️⃣ID选择器只能在文档中使用一次。与类选择器不用，在一个HTML文档中，ID选择器只能使用一次，而且仅一次，而类选择器可以使用很多次。
 2️⃣可以使用类选择器 词列表方法为一个元素同时设置多个样式，只可用类选择器方法实现，ID选择器不行（不能使用ID 词列表）
 如：
 
 
 
 
.stress{    
      color:red;
 }
.bigsize{   
      font-size:25px;
}
到了三年级下学期时，我们班上了一节公开课...
 
 
子选择器
 
 
即大于符号(>),用于选择指定标签元素的第一代子元素。如:
 
 
 
  
.food>li{border:1px solid red;}
 
 
 
 
//如此处是为 
..
标签中的*第一代子元素*..里的内容设置灰色边框

.first>span{
    border:2px solid gray;
}

三年级时，我还是一个胆小如鼠的小女孩，上课从来不敢回答老师提出的问题
 
 
包含（后代）选择器
 
 
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素,如：
 
 
 
 
 
 
.first span{color:red;} //即设置first类下所有span元素的字体为红色，也可继续加新标签赋值，如直接
在后面写上 {color:blue }, 同时给下面
标签中需要设置蔚蓝色字体的文字加上标签

三年级时，我还是一个胆小如鼠的小女孩

 
 
与子选择器区别：子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
 
 
通用选择器
 
 
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
 
 
* {color:red;}
 
 
伪类选择符
 
 
允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体大小颜色:
 
 
a:hover{
    color:red;
    font-size:22px
}
 
 
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红变大
 
 
 
  
关于伪选择符：
 目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
 
 
 
 
分类选择符
 
 
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下：
 
 
h1,span{color:red;}
 
 
它相当于下面两行代码：
 
 
h1{color:red;}
span{color:red;}
 
 
CSS特性
 
 
继承性
 
 
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
 
 
p{color:red;}

三年级时，我还是一个胆小如鼠的小女孩。
 
 
注意有一些css样式是不具有继承性的。如border:1px solid red;
 
 
p{border:1px solid red;}

三年级时，我还是一个胆小如鼠的小女孩。
 
 
上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
 
 
特殊性
 
 
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式? 看一下面的代码：
 
 
p{color:red;}
.first{color:green;}
三年级时，我还是一个胆小如鼠的小女孩。
 
 
green是正确的颜色,因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
 
 
权值的规则：
 
 
 
  
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
 
 
 
 
p{color:red;} **/*权值为1*/**
p span{color:green;} **/*权值为1+1=2*/**
.warning{color:white;} **/*权值为10*/**p 
span.warning{color:purple;} **/*权值为1+1+10=12*/**
#footer .note p{color:yellow;} **/*权值为100+10+1=111*/**
 
 
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
 
 
层叠
 
 
如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？
 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
 
 
p{color:red;}
p{color:green;}
三年级时，我还是一个胆小如鼠的小女孩。
 
 
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
 所以前面的css样式优先级就不难理解了：
 
 
 
  
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。(此处嵌入式跟外部式依据具体位置而定)
 
 
 
 
重要性
 
 
做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用!important来解决。
 如下代码：
 
 
p{color:red**!important**;}
p{color:green;}
三年级时，我还是一个胆小如鼠的小女孩。
 
 
这时 p 段落中的文本会显示的red红色。
 注意：!important要写在分号的前面
 
 
 
  
注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。