jieless_HTML+CSS

             ITOTone笔记-HTML+CSS

使用HTML+CSS开发商业站点

1.1.   HTML基础

title               页面标题标签:

用法:

<title>网页的标题</title>

H1~H6          文本标题标签:

用法:

<h1>文字标题一</h1>
<h2>文字标题二</h2>
<h3>文字标题三</h3>
<h4>文字标题四</h4>
<h5>文字标题五</h5>
<h6>文字标题六</h6>

p:                  段落标签:

用法:

<p>一个段落</p>

br:                换行标签:

用法:

<br/>

hr                  水平线:

属性:

size:水平线的粗细

color:水平线的颜色

用法:

<hr size=”10”  color=”red”/>

文字样式:

加粗: b    strong

用法:

1.<b>文字加粗</b>
2.<strong>文字加粗</strong>

倾斜:i     em

用法:

<i>文字倾斜</i>
<em>文字倾斜</em>

下划线:u

用法:

<u>文字出现下划线</u>

删除线:s del

用法:

<s>删除线</s>
<del>删除线</del>

注释与特殊符号:

注释:      <!-- -->

用法:      快捷键:Ctrl+/

<!--注释 -->

空格       &nbsp;

用法:

帅帅的  可爱的  jieless

大于号(>)      &gt;

用法:

帅帅的>>;可爱的>>jieless

小于号(<)      &lt;

用法:

帅帅的<<可爱的<<jieless

引号(")   &quot;

用法:

帅帅的""可爱的""jieless

版权符号@    &copy;   

用法:

帅帅的©©可爱的©©jieless

img        图片标签:

属性:

• src:图片路径
• alt:当图片不存在的时候,文字提示
• title:图片文字提示
• 宽度
• height:高度

用法:

<img src="图片路径" width="图片宽度" height="图片高度" alt="图片加载失败提示" title="图片文字提示"/>

a            超链接

属性:

• href:需要链接到的地址
• target="_self":默认,覆盖当前页面
• target="_blank":开启新页面

用法:

<a href="链接到的地址" target="目标窗口位置">链接文本或图像</a>

锚链接:

用法:

<a href="#spit">查找位置</a>
<a name="spit">目标位置</a>

从查找位置开始去找目标位置

 

行内元素与块级元素

块级元素:

1. 该元素独占一行上显示

比如:

   

<p></p> 

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

行内元素:

1. 行内元素都是在排在一行上显示

比如:

<a href ="#"></a>
<strong></strong>
<em></em>

1.2.   列表、表格与媒体元素

无序列表:

属性:

• type=”disc”            //默认,实心圆
• type="square"        //方块
• type="circle"         //空心圆

用法:

<ul>
      <li>内容一</li>
      <li>内容二</li>
</ul>

有序列表:

属性:

• start:                      //从多少开始
• type=”A”               //以A开头

用法:

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

自定义列表:

用法:

<dl>
    <dt>标题</dt>
    <dd>内容一</dd>
    <dd>内容二</dd>
</dl>

table       表格      

属性:

• border:边框
• height:高度
• width      也可以写百分比  百分比相对是浏览器的宽度问题
• cellpadding:单元格到内容之间的距离
• cellspacing:单元格到单元格之间的距离
• align:水平对齐属性      取值left         reight      center
• bgColor:背景颜色

介绍:

1. table:      表格标签
2. tr:           行标签
3. th:          列标签标题
4. td:          列标签内容

用法:

<table>
     <tr>
         <th>1行1列的标题</th>
         <th>1行2列的标题</th>
         <th>1行3列的标题</th>
    </tr>
    <tr>
        <td>1行1列的单元格</td>
        <td>1行2列的单元格</td>
        <td>1行3列的单元格</td>
    </tr>
    <tr>
        <td>2行1列的单元格</td>
        <td>2行2列的单元格</td>
        <td>2行3列的单元格</td>
    </tr>
</table>

表格合并:

• colspan="n"    :列合并n列
• rowspan="n"   :行合并n行

 

多媒体标签一:video(视频):

属性:

autoplay:自动播放

controls:播放控制

用法:

<video //视频标签:   src="视频路径"     controls>//视频控制(播放,暂停)
</video>

多视频格式:(了解,不需要默写)

<video controls>
    <source src="路径" type="路径带后缀名"/>
    <source src="路径" type="路径带后缀名"/>
</video>

多媒体标签二:audio (音频):

属性:

1. autoplay:自动播放
2. controls:播放控制 

用法:

<audio //音频标签     src="音频路径"    controls>     //视频控制(播放,暂停)
</video>

 

网页布局:

• header     标题头部区域的内容（用于页面或页面中的一块区域）
• footer      标记脚部区域的内容（用于整个页面或页面的一块区域）
• section    Web页面中的一块独立区域
• article     独立的文章内容
• aside       相关内容或应用（常用于侧边栏）
• nav         导航类辅助内容

iframe:内联框架:

属性:

1. src:路径
2. name:框架名

用法:

<iframe src="路径" name="框架名" ></iframe>

内联框架的嵌套:

<p>
        <a href="http://www.baidu.com" target="mainFrame">第一行</a>
        <a href="http://www.bdqn.com" target="mainFrame">第二行</a>
        <a href="Demo2.html" target="mainFrame">第三行</a>
</p>
<iframe  src="http://www.bdqn.com" //iframe的链接  name="mainFrame"             //iframe的名字    height="100"    //iframe的高度  width="60"> //iframe的宽度
</iframe>

1.3.   表单:

form:

属性:

action:将数据提交到服务器

method:数据的提交方式

get/post

• 如果你不写的话,那么默认就是get提交方式
• get:将提交的数据在URL(地址栏)上显示(256B)
• post:提交的时候,请求体里面提交(2M)

• input:
• name:             文本的名称
• value              数据
• size                输入框的长短
• maxlength      输入的值的多少
• placeholder     占位符:输入的文字提示
• readonly         只读(只读可以传给服务器数据)
• disabled       禁用(禁用不能传给服务器数据)
• required         输入不能为空
• pattern           正则表达式

• type=”text”            文本类型
• type=”password”    密码类型
• type=”submit”        提交类型
• type=”radio”          单选类型       checked="checked" :默认选中     
• type=”checkbox”    多选类型       checked="checked":默认选中
• type=”file”            文件类型       multiple="multiple":多文件的上传
• type="reset"           重置类型
• type=”hidden”        隐藏
• type="image"        图片提交       src="图片路径":
• type=”button”        按钮
• type=”email”         邮箱类型
• type=”url”             网址
• type=”number”      数字       min:最小值 max:最大值 value:默认 step:增加间隔
• type="range"         滑块       min:最小值 max:最大值 step:增加间隔
• type="search"        搜索框

select      下拉框   

属性:

size:下拉框显示的长度

1. multiple="multiple":多行选中      //按ctrl键实现多选

option:属性

1. selected="selected":默认选中

用法:

<select name="address" size="2" multiple="multiple">      
                   <option value="北京">北京</option>
                   <option value="上海">上海</option>
                   <option value="长沙" selected="selected">长沙</option>
</select>

textarea  文本域

属性:

1. cols:列
2. rows:行

用法:

<textarea name="qianMing" cols="20" rows="5"> </textarea>

lable:

用法:

<label for="male">账号:</label> input type="text" id="male">

1.4.   初始CSS:

语法结构:

选择器{

属性名:属性值

属性名:属性值

}

       注释:

/* 注释写这里 */

引入方式:

行内样式:

在HTML标签,添加属性,style=”属性:属性值”

作用域:范围最小,只能作用域当前标签上 

优先级:优先级最高

内部样式:

标签style,一般写在head中

属性: type=”text/css”

作用域:当前页面有效

优先级:优先级居中

外部样式:

属性:

• href=”css文件路径”
• type=”text/css”
• ref=”stylesheet”      //style:样式,sheet:层叠

引入外部样式:

• 1.link按tab键
• 2.@import url("style.css");
• 作用范围最大,那一个页面引入,那一个页面有效
• 优先级:优先级最低

基本选择器:

1. 标签选择器:
2. ID选择器:
3. 保证ID属性具有唯一性
4. class类选择器:

优先级:ID选择器>CLASS选择器>标签选择器

层次选择器:

后代选择器:

选择器1 选择器2{

}

子代选择器:

选择器1>选择器2{

}

相邻兄弟选择器:

选择器1+选择器2{

}

通用兄弟选择器:

选择器1~选择器2{

}

 

属性选择器:

选择器[属性名]

选择器[属性名=”属性值”]

选择器[属性名^=”属性值”]

选择器[属性名$=”属性值”]

选择器[属性名*=”属性值”]

结构伪类选择器

• 选择器:first-child                        //同类选择器的第一个元素
• 选择器:last-child                         //同类选择器的最后一个个元素
• 选择器:nth-child(n)                     //同类选择器第n个元素
• 选择器:first-of-type                    //同类选择器的第一个元素
• 选择器:last-of-type                      //同类选择器的最后一个个元素
• 选择器:nth-of-type(n)                 //同类选择器第n个元素

注意:

1.选择器:first-child是选择器的父选择器中的第一个元素是不是当前的选择器?,是就成立,否则没效果

2.选择器:first-of-type是选择器的父类中与当前元素相同类型的第一个元素

1.5.   CSS美化网页元素

span:

无语义标签:

font:

• font-family     设置字体类型       font-family:"隶书";
• font-size         设置字体大小       font-size:12px;
• font-style        设置字体风格       font-style:italic;
• normal           font-style:normar          正常的
• italic               font-style:italic              斜体字
• oblique           font-style:oblique          倾斜的文字
• font-weight     设置字体的粗细    font-weight:bold;
• normal           font-weight:normal        默认值，定义标准的字体
• bold               font-weight:bold           粗体字体
• bolder            font-weight:bolder         更粗的字体
• lighter            font-weight:lighter        更细的字体

注意:可以使用数字进行代替,400表示正常的,700表示加粗,一般数字越大,表示越粗.

font:属性连写:

字体风格→字体粗细→字体大小→字体类型

文本样式:

• color                     设置文本颜色                     color:#00C;
• text-align               设置元素水平对齐方式       text-align:right;
• left         text-align:left         把文本排列到左边。默认值：由浏览器决定
• right        text-align:right        把文本排列到右边
• center      text-align:center     把文本排列到中间
• justify     text-align:justify     实现两端对齐文本效果
• text-indent             设置首行文本的缩进           text-indent:20px;
• line-height             设置文本的行高                  line-height:25px;
• text-decoration       设置文本的装饰                  text-decoration:underline;
• none               text-decoration:none             默认值，定义的标准文本
• underline        text-decoration:underline       设置文本的下划线
• overline          text-decoration:overline        设置文本的上划线
• line-through    text-decoration:line-through  设置文本的删除线
• text-shadow :文本字体阴影
• text-shadow : 颜色   X轴坐标  Y轴坐标  半径;

 

伪类选择器:

• 点击之后,会有四种状态出现:分别是:
• 没点过,点过,鼠标悬浮,激活
• a:link             没点过
• a:visited:        点过
• a:hover:          鼠标悬浮
• a:active          激活

用法:

伪元素选择器:超链接{

}

列表样式(了解)    list-style:

• list-style-type
• none               无标记符号                  list-style-type:none;
• disc                实心圆，默认类型       list-style-type:disc;
• circle             空心圆                         list-style-type:circle;
• square            实心正方形                  list-style-type:square;
• decimal          数字                            list-style-type:decimal
• list-style-image
• url                 图片链接                     list-style-image:url(图片路径);
• list-style-position   
• inside             链表标记位置              list-style-position:inside;

 

background:网页背景

• background-color   网页背景颜色

用法:

text-indent:21.0pt">background-image  网页背景图片

用法:

background-image:url(图片路径);

background-repeat背景重复属性

repeat：沿水平和垂直两个方向平铺

用法:     

background-repeat: repeat;

no-repeat：不平铺，即只显示一次

用法:

background-repeat: no-repeat;repeat-x：只沿水平方向平铺

用法:

background-repeat: repeat-x; rpeat-y：只沿垂直方向平铺

用法:

background-repeat: repeat-y;

background-position:背景定位:

用法:

background-position:20px 20px;

background:属性连写:

background:背景颜色 url(“背景图片路径”)  X轴  Y轴  背景重复;

background-size:背景尺寸

length:    长度

用法:

background-size:宽 高

auto        默认值，使用背景图片保持原样

用法:

background-size:auto

percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的

用法:

background-size:50%;

cover      整个背景图片放大填充了整个元素

用法:

background-size:cover

contain    让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

用法:

background-size:contain;

 

渐变:

linear-gradient ( position,  color1,  color2,…)

用法:

background: linear-gradient(to top,red,green);

1.6.   盒子模型

border:

color:边框颜色

border-top-color           上边框颜色

border-right-color          右边框颜色

border-bottom-color      下边框颜色

border-left-color            左边框颜色

• border-color:四个边框的颜色
• border-color:上下边框的颜色 左右边框的颜色
• border-color:上边框颜色 左右边框的颜色 下边框的颜色
• border-color:上边框颜色 右边框颜色 下边框颜色 左边框颜色

• 边框粗细
• border-top-width           上边框颜色
• border-right-width         右边框颜色
• border-bottom-width      下边框颜色
• border-left-width           左边框颜色

• border-四个边框的粗细
• border-上下边框的粗细 左右边框的粗细
• border-上边框粗细 左右边框的粗细 下边框的粗细
• border-上边框粗细 右边框粗细 下边框粗细 左边框粗细

• style:边框样式
• none        没有边框样式
• hidden     隐藏边框样式
• dotted     点状边框样式
• dashed     虚线边框样式
• solid        实线边框样式
• double     双线边框样式

• border-top-style:            上边框样式
• border-right-style:         右边框样式
• border-bottom-style:      下边框样式
• border-left-style:           左边框样式

• border-style:四个边框的样式;
• border-style:上下边框的样式 左右边框的样式;
• border-style:上边框样式 左右边框的样式 下边框的样式;
• border-style:上边框样式 右边框样式 下边框样式 左边框样式;

• border:属性连写:
• border:颜色 线条 粗细

margin:

• margin-top             外边距上
• margin-right          外边距右
• margin-bottom        外边距下
• margin-left            外边距左

margin:

• margin:0px  auto          //网页居中对齐
• 居中对齐的条件:
• 1.块级元素
• 2.固定宽度

padding:

• padding-top           内边距上
• padding-right         内边距右
• padding-bottom      内边距下
• padding-left           内边距左

• padding:

盒子模型总尺寸=border+padding+margin+内容宽度

盒模型的解析方式:

• box-sizing：
• content-box
• 默认的宽高
• border-box
• 按你设置的固定宽高
• inherit;
• 遵从父元素的宽高

border-radius:圆角边框

• border-radius:四个角;
• border-radius: 20px  10px  50px  30px;
• border-radius: 20px  10px  50px  30px;
• border-radius: 20px  10px  50px  30px;

圆形:

• 元素的宽度和高度必须相同
• 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

半圆:

• 制作上半圆或下半圆时,元素的宽度是高度的2倍,而且圆角半径为元素的高度
• 制作左半圆或右半圆时,元素的高度是宽度的2倍,而且圆角半径为元素的宽度

扇形:

• “三同”是元素宽度、高度、圆角半径相同
• “一不同”是圆角取值位置不同

盒子阴影:

box-shadow:inset  10 px    20     30     #ccc;

• 属性介绍:
• inset             阴影类型内阴影
• x-offset         X轴位移，指定阴影水平位移量
• y-offset         Y轴位移，用来指定阴影垂直位移量
• blur-radius    阴影模糊半径阴影向外模糊的模糊范围
• color              阴影颜色，定义绘制阴影时所使用的颜色