jieless_HTML+CSS

Posted on 2020-03-29 01:40 ITOTone 阅读(46) 评论(0) 编辑收藏举报

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;&nbsp;可爱的&nbsp;&nbsp;jieless

大于号(>) >

用法:

帅帅的&gt;&gt;;可爱的&gt;&gt;jieless

小于号(<) <

用法:

帅帅的&lt;&lt;可爱的&lt;&lt;jieless

引号(") "

用法:

帅帅的&quot;&quot;可爱的&quot;&quot;jieless

版权符号@ ©

用法:

帅帅的&copy;&copy;可爱的&copy;&copy;jieless

img 图片标签:

属性:

src:图片路径
alt:当图片不存在的时候,文字提示
title:图片文字提示
width:宽度
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>

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

行内元素与块级元素

块级元素:

该元素独占一行上显示

比如:

<p></p> 

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

行内元素:

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

比如:

<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 width:也可以写百分比百分比相对是浏览器的宽度问题
cellpadding:单元格到内容之间的距离
cellspacing:单元格到单元格之间的距离
align:水平对齐属性取值left reight center
bgColor:背景颜色

介绍:

table: 表格标签
tr: 行标签
th: 列标签标题
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 (音频):

属性:

autoplay:自动播放
controls:播放控制

用法:

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

网页布局:

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

iframe:内联框架:

属性:

src:路径
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:下拉框显示的长度

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

option:属性

selected="selected":默认选中

用法:

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

textarea 文本域

属性:

cols:列
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");
作用范围最大,那一个页面引入,那一个页面有效
优先级:优先级最低

基本选择器:

标签选择器:
ID选择器:
保证ID属性具有唯一性
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:上边框颜色右边框颜色下边框颜色左边框颜色

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

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

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 阴影颜色，定义绘制阴影时所使用的颜色

会员力量，点亮园子希望

刷新页面返回顶部