HTML+CSS
HTML一、html文件基本结构 ... ...代码讲解：1. 称为根标签，所有的网页标签都在中。2. 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有、、 、、 等标签3. 在和标签之间的内容是网页的主要内容，如、、、等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。二、head标签 ...
HTML
一、html文件基本结构
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
1. <html></html>称为根标签，所有的网页标签都在<html></html>中。
2. <head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签
3. 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
二、head标签
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
三、代码注释
代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语法：
<!--注释文字 -->
四、基础标签
1、把文章的段落放到<p>标签中。
语法：
<p>段落文本</p>
2、标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。
语法：
<hx>标题文本</hx> (x为1-6)
3、加粗：
<b></b>
<strong></strong>加强语气
4、倾斜：
<i></i>
<em></em>加强语气
5、<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
6、短文本引用
语法：<q>引用文本</q>
7、<blockquote>标签，长文本引用
语法:
<blockquote>引用文本</blockquote>
8、<br />换行不换段
9、分隔线：<hr>有属性
10、<address>标签，为网页加入地址信息，在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用css样式来修改它<address>标签的默认样式。
11、<code>标签
在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，可以使用<code>标签
语法：
<code>代码语言</code>
12、语法：
<pre>语言代码段</pre>
<pre> 标签的主要作用:预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
13、无序列表
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
14、有序列表
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
定义列表： <ul></ul>
<ol></ol>
<dl> <dt><dd></dd> </dt> </dl>
有属性：<br/>
15、 单标记：无属性: <hr>
双标记： 有属性:<body></body>
无属性:<title></title>
16、在XHTML中，所有标签属性都必须有属性值，如果没有则使用属性名.
如<hr noshade=”noshade” />
17、<img>标签，为网页插入图片
语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
五、表格
1、表格
2、细线表格效果公式：
1)、将表格自身的border=0;
2）、给表格设置背景颜色----细线颜色
3）、给表格设置单元格之间的距离---细线粗细
3、<td></td>之间没有内容时，默认不显示边框，若想看到可以加
4、摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：<table summary="表格简介文本">
5、表格标题：
用以描述表格内容，标题的显示位置：表格上方。
语法：
<table>
<caption align=””>标题文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
6、合并行列的属性：rowspan,colsapan;
控制凹凸效果:bordercolorlinght,bordercolordark;
使表格，不显示内边框只显示外边的大框用rules属性
显示部分边框用frame属性
表格颜色：bordercolor;
单元格颜色：bgcolor;
单元格与内容之间的距离为cellpadding
单元格与单元格之间的距离为cellspacing
11.表格的结构化：
重要说明：
FF、Chrome、Safari仅支持colgroup元素的span和width属性；
只有IE6、IE7、Opera支持align属性，IE8+不支持"
六、链接
1、使用<a>标签，链接到另一个页面
语法：
<a href="目标网址" title="鼠标滑过显示的文本" target=”打开链接窗口的形式”>链接显示的文本</a>
<a href="mailto:yy@immoc.com?subject=观了不起的盖茨比有感&body=你好，对此评论有些想法">发送</a>
锚点链接 ：从一个页面链接到另一个页面的某一位置时用<a href=”另一页面的url#锚点名称”></a>
七、表单
18.表单: <form action=”浏览者输入的数据被传送到的-页面” method=”post” ></form>
<input type=”text” name=”” value=”” size=”” maxlength=”” readonly=”readonly” disabled=”disabled” />
19.
20.
六、滚动字幕
21.<Marquee>滚动的文字</Marquee>
css
结构层：
网页的结构： 表现层：
行为层：
一、技巧
1.让文字在垂直方向上居中：行高=元素(标签)高度；但是文字宽度2.不能超过元素宽度，也就是不能换行。
3.让盒子水平居中：将对象的左右外边界设置为auto.
4.让盒子水平居中使用margin:0 auto;属性，还要给这个盒子设置宽度。
5.overflow : visible(默认) / auto / hidden / scroll ;
6.如果相让多个块显示在同一行中，可以把块设置为浮动并且浮动方向相同。（要为块设置宽度，默认为100%.）
7.IE6双倍边距的问题 ( div{margin-left:10px;float:left;} ) :
添加display:inline;属性解决。
8.边框设置：box-sizing: content-box|border-box|inherit;
9.块级盒子本身有宽高，设置padding时增加。
10.Logo一般作为背景图片插入，加h1标签，a标签。
11.ul不显示点——list-style:none outside none;
12.a 不显示下划线——text-decoration:none;
13.display: none 不显示;//元素会让出自己的位置，让其余的元素渲染
inline 内联元素前后没有换行符;
block显示为块级元素,前后会带有换行符
visibility:hidden;的元素，自己隐藏，不会让出自己的位置
14.overflow 属性可以确定是否显示滚动条等行为
15.bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移.注释：如果 "position" 属性的值为 "static"，那么设置 "bottom" 属性不会产生任何效果.
16、相对定位高度（相当于柱子）>绝对定位高度
17、已知一 div高35px，紧邻其后的X元素上外边距为15px，为该div设置fixed定位后，div与浏览器可视窗口上边界相距15px。
顶部固定层：
#top -------position:fixed; top:0; left:0;
#mainbody--------margin-top:(#top高度+原有间距)px;
二、注释
在CSS中也有注释语句：
用/*注释语句*/来标明
三、css应用方式
1.
四、优先权：
3、重要性:
有些特殊的情况需要为某些样式设置具有最高权值，这时候我们可以使用!important来解决。
p{color:red!important;}
注意：!important要写在分号的前面
五、选择符分类
标签选择符：h1{属性：值;}
6.css选择符： id选择符：#idname{属性：值;}
类选择符：.classname{属性：值;}
通配选择符：*{属性：值;}
派生选择符：body h1{属性：值;}/#idname li{属性：值;}
伪类选择符：a:hover{color:red;}
选择符分组：h1,ul,li{属性：值;}
六、字体
1.火狐、谷歌浏览器默认字体为16px
2. font:字体大小/行高 加粗“宋体”;
3. 版权、商标等特殊符号要专门声明字体，常用arial.
4.字体颜色color要单独声明;
5、Font-style:italic;//设置字体样式;
6、为文字设置为下划线样式:
7、span{ text-decoration:underline/line-through;}
8、缩进：p{text-indent:2em;}
注意：2em的意思就是文字的2倍大小。
9、行间距（行高）：p{line-height:1.5em;}
10、设置文字间隔或者字母间隔：
使用 letter-spacing 来实现， letter-spacing:50px;
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
11、单词间距设置：
设置英文单词之间的间距可以使用 word-spacing来实现。如下代码：
h1{ word-spacing:50px;}
12、块状元素中的文本、图片设置居中样式
h1{text-align:center;}
七、元素分类
1、常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
设置display:block就是将元素显示为块级元素。
2、常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
块状元素也可以通过代码display:inline将元素设置为内联元素。
3、常用的内联块状元素有：
<img>、<input>
代码display:inline-block;
八、margin、border
1、平面图
Padding: 上 右 下 左;
margin:1px 四边统一边距
margin:1px 1px 上下边距,左右边距
margin:1px 1px 1px 上,左右,下边距
margin:1px 1px 1px 1px 上,右,下,左边距
margin:5px auto; 上下为5,左右平均居中
margin-top: 20px; 上外边距
margin-right: 30px; 右外边距
margin-bottom: 30px;下外边距
margin-left: 20px; 左外边距
2、边框属性：
Border : border-width ||border-style ||border-color
3、盒子3D模型
五层：border、content+padding、background-image、background-color、margin。
九、元素分类、布局
11.Css的元素分类： 块元素： display:block;
内联元素：display:inline;
12.css的布局方式： 文档流（默认）
浮动方式：脱离当前的文档流
静态定位(position: static)
定位方式 相对定位(position: relative)
绝对定位(position:absolute/ fixed固定定位)
定位机制：标准文档流，浮动方式，绝对定位方式。
在IE6中，子元素的高度超过父元素的高度，IE6默认会把父元素高度增加。
1、 浮动方式
问题：当父元素没有指定高度，并且它的子元素有浮动时，父元素的高度不会自动增加。（浮动对父元素有影响）
解决方法：
清除浮动：clear: both / left / right
在主盒子里最下面加一个含有清除浮动类的空标签。
给父元素添加overflow:hidden;
2、定位方式
（1）使用绝对定位的两个必要条件:
1）.必须给父元素添加定位属性，一般推荐使用position:relative;
2）.给子元素加绝对定位position:absolute;同时加方向(top,right,bottom,left)属性。
（2）区别绝对定位与相对定位：
绝对定位：以父元素为基准点定位，脱离文档流。
相对定位：以自身为基准点定位，离开原位置但占据原空间。
（3）fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
3、fixed与absolute比较：
1）相同：
第一，完全脱离文档流
第二，未定义偏移量时，都定位在父元素的左上角。
2）不同：
设置偏移量时，偏移参照基准
Absolute
无已定位祖先元素，以<html>为基准偏移
有已定位祖先元素，以距其最近的、已定位的祖先元素为基准偏移。
Fixed
有、无已定位祖先元素都以浏览器可视窗口为基准偏移。
十、水平居中设置：
1、行内元素：
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
2、定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
3、不定宽块状元素
（1）加入 table 标签
第一步：为需要设置的居中的元素外面加入一个 table 标签(包括<tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右margin居中”（这个和定宽块状元素的方法一样）。
（2）设置 display: inline 方法：
改变块级元素的 display 为inline类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。
（3）设置 position:relative 和left:50%：
通过给父元素设置float，然后给父元素设置 position:relative 和left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
十一、垂直居中设置
1、父元素高度确定的单行文本：
通过设置父元素的 height 和line-height 高度一致来实现的。
2、父元素高度确定的多行文本
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
（1）使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
td 标签默认情况下就默认设置了 vertical-align 为 middle
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
（2）在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
十二、隐性改变display类型
2. float : left 或 float:right
只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
只要html代码中出现以上两句之一，margin:0 auto;属性就不能实现。
十三、列表
8.列表属性：
语法：
List-style: list-style-image ||list-style-position ||list-style-type
列表样式：列表的图片 列表符号位置 列表的样式
List-style : none 不要列表的符号
十四、管制背景
10.css管制背景：
背景图片比盒子小的时候，默认情况下是进行水平与垂直方向上的平铺。
默认背景图片在元素的左上角显示。
背景图片的依附方式：background-attachment:scroll/fixed; (IE6中只有<body>、<html>这两个标签支持这个属性。)
十五、css模块常用命名
十六、中、英文，unicode编码转换
14.
十七、清除浮动
1、clear:both;
2、同时设置width:100%（或固定宽度）+overflow:hidden;
-
额外标签法
-
使用:after 伪元素
-
给父元素定高
-
利用overflow:hidden;属性
-
父元素浮动
-
父元素处于绝对定位
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)