A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

伊卡

初级黑马

  • 黑马币:25

  • 帖子:6

  • 精华:0

© 伊卡 初级黑马   /  2019-6-9 23:27  /  763 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

一、网页是由什么构成?
1.网页有图片、链接、文字等元素组成;
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
二、常见浏览器
1.IE浏览器
2.chrome浏览器
3.safari浏览器
4.firefox浏览器
5.opera浏览器
6.Edge浏览器
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
三、浏览器内核包括两部分:渲染引擎和js引擎:
1.IE浏览器    ——Trident
2.firefox浏览器 ——Gecko
3.Safari浏览器 ——webkit
4.chrome浏览器 ——chromium/blink
5.opera浏览器 ——blink

android手机使用率最高是webkit内核
ios/win手机使用自身带的浏览器,safari内核/
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
四、WEB标准
1.展示统一内容
2.web标准三层---- 结构(html)用于对网页元素进行整理和分类、表现(css)用于设置网页元素的版式,颜色,文字等外观样式、行为(js)是指网页模型的定义及交互的编写
3.web标准的好处
   1>让web的发展前景更广阔
   2>内容能更容易识别
   3>更容易被搜索引擎搜索
   4>降低网站流量费用
   5>使网站更易于维护
   6>提高页面浏览速度
——————————————————————————————————————————————————————————————————————————————————————————————————————————
五、认识HTML---(超文本标记语言)
1.html的概念------html是超文本标记(标签)语言
2.html标签分类----- 常规元素(双标签)、空元素(单标签)
3.html标签关系----- 主要针对于双标签的相互关系分为两种:1.嵌套关系 2.并列关系
4.html标签语义化-----所有的html标签都是用<>表示
——————————————————————————————————————————————————————————————————————————————————————————————————————————
六、HTML骨架标签
1.<html>     html标签(根标签)       
   <head>    文档的头部
   <titel></title>  文档的标题
   <body></body>  文档的主体
   </head>
   </html>
2.html标签分类
  2.1.常规元素(双标签)     <标签名></标签名>
  2.2.空元素(单标签)   <标签名 />
3.html标签关系 (针对于双标签)
  3.1.嵌套关系 (子元素缩进一列)父子级关系
  3.2.并列关系 兄弟关系

!DOCTYPE(语言的版本号) html   ------表示html5的版本
lang='en'(英文)  -----指定html 语言种类    lang='zh-CN' (中文)
meta charter='UTF-8' -----字符集/    gb2312(简体中文)/big5(中文繁体)/gbk(中文简体/繁体)/UTF-8(包含世界各国语言)

4.html标签的语义化    ------遵循原则:先确定语义的html,再选合适的css。
目的:根据标签的语义,在合适的地方给一个最为合理的标签,让结构更清晰。
优点:
    1.方便代码的阅读和维护  
    2.同时让浏览器或是网络爬虫可以更好的解析,从而更好分析其中的内容
    3.使用语义化标签会具有更好地搜索引擎优化
七、常用标签
1.排版标签
    1.1、标题标签<h1></h1>
    1.2、段落标签<p></p>
    1.3、水平线标签<hr />  (单标签)
    1.4、换行标签<br />  (单标签)
    1.5、div和span标签 <div></div><span></span>    盒子标签     
       1.5.1   div  -----一行只能有一个div标签
       1.5.2   span  ------一行可以有多个span标签
2.文本格式化标签
    2.1、<b></b><strong></strong>  --b标签只是加粗,strong标签可以加粗还有强调的意思,语义更强烈(XHTML推荐strong)
    2.2、<i></i><em></em>   --斜体  (XHTML推荐em)
    2.3、<s></s><del></del>  --加删除线  (XHTML推荐del)
    2.4、<u></u><ins></ins>  --加下划线  (XHTML推荐ins)
3.标签属性
<标签名 属性="属性值"></标签名>
4.图像标签img
<img src="图像URL" />
属性                                属性值                                                          描述
src                                  URL                                                           图像的路径
alt                                  文本                                                           图像不能显示时的替换文本
title                                文本                                                           鼠标悬停时显示的内容
width                             像素(XHTML不支持%页面百分比)               设置图像的宽度
height                            像素(XHTML不支持%页面百分比)               设置图像的高度
border                               数字                                                           设置图像边框的宽度      
————————————————————————————————————————————————————————————————                    
5.链接标签  <a></a>
属性                                作用
href                            用于指定链接目标的url地址(必须属性)   
target                         用于指定链接页面的打开方式,其取值有self和_blank两种,其中self为默认值,_blank为新窗口
   5.1外部链接 需要添加http://
   5.2内部链接 直接链接内部页面名称即可 比如<a href="index.html">首页</a>
   5.3如果当时没有确定链接目标时,通常将链接标签的href属性值定义为"#"(href="#"),表示该链接暂时为一个空链接
   5.4不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接
6.注释标签    <!--注释语句-->    快捷键ctrl + /或者ctrl+shift+/
作用:说明代码的含义,更好的管理代码的可读性,程式是不会对注释的代码进行解析;
7.路径
   7.1绝对路径   ---网络地址http://www.baidu.com
   7.2相对路径   ---当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同
————————————————————————————————————————————————————————————————————————————————————————
14.锚点定位
作用:实现页面内部的跳转
   14.1使用相应的id名标注跳转目标的位置。
   14.2使用<a href="#id名">链接文本</a>创建链接文本。
15.base标签
    15.1 语法:<base target="_blank" />
     base标签可以设置整体链接的打开状态
     base标签写到<head></head>之间
     把所有的链接都默认添加target="_blank"
16.预格式化文本pre标签
     16.1<pre>标签可定义预格式化的文本-------被包围在<pre>标签元素中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。
17.特殊字符
     17.1是以运算符&开头,以分号运算符;结尾
     17.2它们不是标签,而是符号
     17.3HTML中不能使用小于号"<"和大于号">"特殊字符,浏览器会将它们作为标签解析,若要正确显示在HTML源代码中使用字符实体
      (<a href="#">more &gt;&gt</a>)
——————————————————————————————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————————————————————————————
八、表格table
1.表格作用:常见显示、展示表格式数据
   1.1.存在即是合理的。  表格的现在还是较为常用的一种标签,但不是用来布局。
   1.2.因为它可以让数据显示的非常的规整,可读性非常好。
   1.3.特别是后台展示数据的时候表格运用是否熟练就显得很重要**,一个清爽简约的表格能够把繁杂的数据表现得很有条理,虽然 div 布局也可以做到,但是总没有表格来得方便。
2.创建表格
创建表格的基本语法:
<table>
  <tr>
    <td>单元格内的文字</td>
  </tr>
</table>
2.1.table用于定义一个表格标签。
2.2.tr标签 用于定义表格中的行,必须嵌套在 table标签中。
2.3.td 用于定义表格中的单元格,必须嵌套在<tr></tr>标签中。
2.4.字母 td 指表格数据(table data),即数据单元格的内容,现在我们明白,表格最合适的地方就是用来存储数据的。
总结     - 表格的主要目的是用来显示特殊数据的
            - 一个完整的表格有表格标签(table),行标签(tr),单元格标签(td)组成,没有列的标签
            - <tr></tr>中只能嵌套<td></td> 类的单元格
            - <td></td>标签,他就像一个容器,可以容纳所有的元素
3.表格属性
属性名                                  含义                                                           常用属性值
border                           设置表格边框                                                       像素值                                       
cellspacing                     设置单元格与单元格边框之间的空白间距               像素值(默认2像素)                                                         
cellpadding                    设置单元格内容与单元格边框之间的空白间距        像素值(默认1像素)                                                                                    
width                              设置表格宽度                                                      像素值                                
height                             设置表格高度                                                      像素值                                       
align                               设置表格在网页中水平对齐方式                           left/center/right                                                                  
4.表头单元格标签th
作用:
一般表头单元格位于表格的第一行或第一列,并且文本加粗居中
语法:
只需用表头标签&lt;th&gt;</th&gt;替代相应的单元格标签<td></td>即可。
5.表格标题caption
定义和用法
<table>
   <caption>我是表格标题</caption>
</table>
注意:
    5.1. caption 元素定义**表格标题**,通常这个标题会被居中且显示于表格之上。
    5.2. caption 标签必须紧随 table 标签之后。
    5.3. 这个标签只存在 表格里面才有意义。
6.合并单元格
  6.1合并单元格2种方式
        - 跨行合并:rowspan="合并单元格的个数"      
        - 跨列合并:colspan="合并单元格的个数"
  6.2合并单元格顺序
        -合并的顺序我们按照   先上 后下     先左  后右 的顺序
  6.3合并单元格三步曲
        -先确定是跨行还是跨列合并
        -根据 先上 后下   先左  后右的原则找到目标单元格    然后写上 合并方式 还有 要合并的单元格数量  比如 : <td colspan="3">   </td>
        -删除多余的单元格 单元格      
7.总结表格
标签名                               定义                                说明
<table></table>             表格标签                        一个四方的盒子                                       
<tr></tr>                        表格行标签                    行标签要在table标签内部才有意义                                      
<td></td>                      单元格标签                      单元格标签是个容器级元素,可以放任何东西                                                     
<th></th>                      表头单元格标签              它还是一个单元格,但是里面的文字会居中且加粗                                                     
<caption></caption>     表格标题标签                 表格的标题,跟着表格一起走,和表格居中对齐                                                      
clorspan和rowspan          合并属性                       用来合并单元格                                               
-- 表格提供了HTML 中定义表格式数据的方法。
-- 表格中由行中的单元格组成。
-- 表格中没有列元素,列的个数取决于行的单元格个数。
-- 表格不要纠结于外观,那是CSS 的作用。
-- 表格的学习要求:  能手写表格结构,并且能简单合并单元格。
8.表格划分结构
表格分割成三个部分:题头(thead)、正文(tbody)和脚注(tfoot)
注意:
   8.1. <thead></thead>:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
   8.2. <tbody></tbody>:用于定义表格的主体。放数据本体 。
   8.3. <tfoot></tfoot>放表格的脚注之类。
   8.4. 以上标签都是放到table标签中。
——————————————————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————————————————
九、列表
概念:容器里面装载着结构,样式一致的文字或图表的一种形式;
特点:列表最大的特点就是整齐、整洁、有序,跟表哥类似,但可组合自由度会更高
1.无序列表
语法:
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

    1.1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
    1.2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
    1.3. 无序列表会带有自己样式属性,放下那个样式,一会让CSS来!
2.有序列表
语法:
<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>
3.自定义列表
语法:
<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
</dl>
4.列表总结
标签名               定义                                           说明
ul                     无序标签                                  里面只能包含li,没有顺序,布局中最常用的列表
ol                     有序列表                                  里面只能包含li,有顺序,使用情况较少
dl                     自定义列表                               里面有2个兄弟,dt和dd
————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————
十、表单标签
组成:一个完整的表单由提示文本、表单、表单域;
作用:
表单目的是为了收集用户信息、并提交到后台。
表单控件:
包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息:
一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
表单域 :
他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据提交到服务器的方法。
如果不定义表单域,表单中的数据就无法传送到后台服务器。
1.input控件
语法:
<input type="属性值" value="你好">
      - input 输入的意思
      - <input /&gt;标签为单标签
      - type属性设置不同的属性值用来指定不同的控件类型
      - 除了type属性还有别的属性
常用属性:
占位符:placeholder   ------有交互效果
button标签-----按钮标签
属性                            属性值                                                描述
type                            text                                                 单行文本输入框
                                   password                                       密码输入框
                                   radio                                              单选框
                                   checkbox                                       复选框
                                   button                                           普通按钮
                                   submit                                           提交按钮
                                   reset                                              重置按钮
                                   image                                            图像形式的提交按钮
                                   file                                                 文件域
name                          由用户自定义                                  控件的名称
value                           由用户自定义                                  input控件中的默认文本值
size                              正整数                                            input控件在页面中的显示宽度
checked                       checked                                         定义选择控件默认被选中的项
maxlength                   正整数                                             控件允许输入的最多字符数
1.1.type属性
用户名: <input type="text" />
密  码:<input type="password" />
1.2.value属性   值
用户名:<input type="text"  name="username" value="请输入用户名">
1.3.name属性
用户名:<input type="text"  name=“username” />  
1.4.checked属性
表示默认选中状态。
1.5.input属性小结
属性                   说明                 作用
type               表单类型          用来指定不同的控件类型
value               表单值            表单里面默认显示的文本
name              表单名字         页面中的表单很多,name主要作用就是用于区别不同的表单。
checked          默认选中         表示那个单选或者复选按钮一开始就被选中了
2.label标签
目的:为了提高用户体验
概念:label 标签为 input 元素定义标注(标签)。
作用:用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。
用法:
       ---第一种用法就是用label直接包括input表单。
       <label> 用户名: <input type="radio" name="usename" value="请输入用户名">   </label>
       ---第二种用法 for 属性规定 label 与哪个表单元素绑定。
       <label for="sex">男</label>
       <input type="radio" name="sex"  id="sex">
3.textarea标签
语法:
<textarea >文本内容</textarea>
作用:
通过textarea控件可以轻松地创建多行文本输入框.
cols="每行中的字符数" rows="显示的行数"  我们实际开发不用
文本框和文本域区别
表单                             名称              区别                           默认值显示                                         用于场景
input type="text"      文本框        只能显示一行文本          单标签,通过value显示默认值        用户名、昵称、密码等
textarea                     文本域        可以显示多行文本          双标签,默认值写到标签中间                留言板

4.select下拉列表标签
目的:
如果有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.
语法:
<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
</select>
默认selected="selected"
注意:
    4.1. select&gt;  中至少包含一对 option
    4.2. 在option 中定义selected =" selected "时,当前项即为默认选中项。
    4.3. 但是我们实际开发会用的比较少
5.form表单域
收集的用户信息怎么传递给服务器?
通过form表单域
目的:
在HTML中,form标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
语法:
<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
常用属性:
属性              属性值                                   作用
action          url地址                用于指定接收并处理表单数据的服务器程序的url地址。
method       get/post             用于设置表单数据的提交方式,其取值为get或post。
name           名称                    用于指定表单的名称,以区分同一个页面中的多个表单。
注意:
每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。

————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
结构(html)与样式(css)相分离

十一、CSS层叠样式表
概念:
CSS(Cascading Style Sheets)  ,通常称为CSS样式表或层叠样式表(级联样式表)
作用:
- 主要用于设置 HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及**版面的布局和外观显示样式。**
- CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。

目的:主要用于设置页面版面布局和外观显示样式

三种引入方式:
1.行内式(内联样式)
概念:
称行内样式、行间样式.
​是通过标签的style属性来设置元素的样式
语法:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
注意:
- style其实就是标签的属性
- 样式属性和值中间是`:`
- 多组属性值之间用`;`隔开。
- 只能控制当前的标签和以及嵌套在其中的字标签,造成代码冗余
缺点:
没有实现样式和结构相分离
2.内部样式表(内嵌样式表)
概念:
​称内嵌式
​是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义
语法:
<head>
<style type="text/CSS">
    选择器(选择的标签) {
      属性1: 属性值1;
      属性2: 属性值2;
      属性3: 属性值3;
    }
</style>
</head>
注意:
- style标签一般位于head标签中,当然理论上他可以放在HTML文档的任何地方。
- type="text/css"  在html5中可以省略。
- 只能控制当前的页面
缺点:
没有彻底分离
3.外部样式表(外链式)(样式共享)
概念:
称链入式
​是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中
​通过link标签将外部样式表文件链接到HTML文档中
语法:
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>
注意:
---link 是个单标签
---link标签需要放在head头部标签中,并且指定link标签的三个属性
属性                               作用
rel                    定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
type                 定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。我们都可以省略
href                  定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
4.三种样式表总结
样式表                        优点                                         缺点                                        使用情况                       控制范围               
行内样式表          书写方便,权重高                 没有实现样式和结构相分离                     较少                       控制一个标签(少)
内部样式表          部分结构和样式相分离           没有彻底分离                                         较多                      控制一个页面(中)
外部样式表          完全实现结构和样式相分离     需要引入                                               最多,强烈推荐     控制整个站点(多)
5.总结CSS样式规则
具体格式如下:
h1            {   color:red; font-size:25px;}
|                      |      |            |           |      
选择器          属性   值        属性      值
总结:
    5.1. 选择器用于指定CSS样式作用的HTML标签,花括号内是对该对象设置的具体样式。
    5.2. 属性和属性值以“键值对”的形式出现。
    5.3. 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
    5.4. 属性和属性值之间用英文“:”连接。
    5.5. 多个“键值对”之间用英文“;”进行区分。
十二、CSS选择器
应用:
能够使用基础选择器给页面元素添加样式
1.CSS选择器作用
找到特定的THML页面元素,选择标签,把想要的标签选择出来
语法:
h3 {
        color: red;
}
2.CSS基础选择器
  2.1.标签选择器
概念:
标签选择器(元素选择器)是指用**HTML标签名**称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
语法:
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
作用:
标签选择器 可以把某一类标签**全部**选择出来  比如所有的div标签  和 所有的 span标签
优点:
是能快速为页面中同类型的标签统一样式
缺点:
不能设计差异化样式。
总结口诀:
标签选择器,
页面同选起。
直接写标签,
全部不放弃。
思考: 如果想要差异化选择不同的标签,怎么办呢? 就是说 我想单独选一个或者某几个标签呢?

  2.2.类选择器
语法:
类名选择器:
.类名  {   
    属性1:属性值1;
    属性2:属性值2;
    属性3:属性值3;     
}
标签:
<p class='类名'></p>
优点:
可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签
注意:
- 类选择器使用“.”(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文等命名, 尽量使用英文字母来表示。
命名规则:
不要纯数字、中文等命名, 尽量使用英文字母来表示

  2.3.类选择器特俗用法---多类名
注意:
- 各个类名中间用空格隔开。
- 多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
语法:
<div class="pink fontWeight font20">亚瑟</div>
  2.4.id选择器
id选择器使用`#`进行标识,后面紧跟id名
基本语法格式:
id选择器
#id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签:
<p id="id名"></p>
id选择器和类选择器区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
总结:
   1. a 设置 背景左侧,padding撑开合适宽度。   
   2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
   3. 之所以a包含span就是因为 整个导航都是可以点击的。
7.1margin负值之美
1). 负边距+定位:水平垂直居中
咱们前面讲过,一个绝对定位的盒子,利用父级盒子的 50%,然后往左(上)走自己宽度的一半 ,可以实现盒子水平垂直居中。
2). 压住盒子相邻边框
7.2 CSS三角形之美
div {
        width: 0;
                 height: 0;
                 line-height:0;
                 font-size: 0;
        border-top: 10px solid red;
        border-right: 10px solid green;
        border-bottom: 10px solid blue;
        border-left: 10px solid #000;
}
1. 我们用css 边框可以模拟三角效果
2. 宽度高度为0
3. 我们4个边框都要写, 只保留需要的边框颜色,其余的不能省略,都改为 transparent 透明就好了
4. 为了照顾兼容性 低版本的浏览器,加上 font-size: 0;  line-height: 0;
拓展知识:
html5发展之路
1993年(IETF)HTML 1.0-->1995年(W3C)HTML 2.0-->1996年(W3C)HTML 3.2
                                                                                                    |
2000年(W3C)XHTML 1.0<--1999年(W3C)HTML 4.01<--1997年(W3C)HTML 4.0                                    
    |                                                                                                                                
2001(W3C)XHTML 1.1-->XHTML 2.0?   
    |
2004年(WHATWG) HTML 5草案-->2008年(合并)HTML 5正式版-->HTML5未来
什么是XHTML
XHTML 是更严格更纯净的 HTML 代码。
- XHTML 指**可扩展超文本标签语言**(EXtensible HyperText Markup Language)。
- XHTML 的目标是取代 HTML。
- XHTML 与 HTML 4.01 几乎是相同的。
- XHTML 是更严格更纯净的 HTML 版本。
- XHTML 是作为一种 XML 应用被重新定义的 HTML。
- XHTML 是一个 W3C 标准。
HTML和 XHTML之间有什么区别?
- XHTML 指的是可扩展超文本标记语言
- XHTML 与 HTML 4.01 几乎是相同的
- XHTML 是更严格更纯净的 HTML 版本
- XHTML 是以 XML 应用的方式定义的 HTML
- XHTML 是 2001 年 1 月发布的 W3C 推荐标准
- XHTML 得到所有主流浏览器的支持
- XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML,例如它要求标签必须小写,标签必须被正确关闭,标签顺序必须正确排列,对于属性都必须使用双引号等。
表格划分结构
对于比较复杂的表格,表格的结构也就相对的复杂了,所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注, 这样更好的分清表格结构
注意:
1. <thead></thead>:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
2. <tbody></tbody>:用于定义表格的主体。放数据本体 。
3. <tfoot></tfoot>放表格的脚注之类。
4. 以上标签都是放到table标签中。
圆角边框(CSS3)
语法:
border-radius:length;  
- 其中每一个值可以为 数值或百分比的形式。
- 技巧: 让一个正方形  变成圆圈
border-radius: 50%;
- 上效果图矩形的圆角, 就不要用 百分比了,因为百分比会是表示高度和宽度的一半。
- 而我们这里矩形就只用 用 高度的一半就好了。精确单位。
盒子阴影(CSS3)
语法:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
- 前两个属性是必须写的。其余的可以省略。
- 外阴影 (outset) 是默认的 但是不能写           想要内阴影可以写  inset
7.3.4使用双伪元素清除浮动
使用方法:
.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
  *zoom:1;
}
专门用于ie6|7浏览器清除浮动的样式
.clearfix {
         *zoom: 1;
}
子盒子是可以比父盒子宽的!!
图片中心基线对齐:
img {
     vertical-align:middle;
}
margin对浮动元素无效
2.1 鼠标样式cursor
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。
属性值            描述
default           小白  默认
pointer           小手
move              移动
text                 文本
not-allowed    禁止
4. 溢出的文字省略号显示
   1.white-space强行转换一行显示
   2.text-overflow 文字溢出
   3.text-overflow:ellipsis

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马