首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML+CSS基础到精通系统学习

HTML+CSS基础到精通系统学习

作者头像
奶糖味的代言
发布2018-04-12 15:28:21
3.1K0
发布2018-04-12 15:28:21
举报
文章被收录于专栏:小白安全小白安全

1:HTML纯干货学习后的达到的效果

(1):会使用HTML的基本结构,创建网页

(2):会使用文本字体相关标签,实现文字修饰和布局

(3):会使用图像、超链接相关标签,实现图文并茂的页面

(4):会使用表格相关标签,实现简单表格,跨行、跨列的复杂表格,并对表格进行美化修饰

(5):会使用表单及表单元素标签,实现表单页面的制作

(6):理解post和get两种提交方式的区别

2:HTML的基本结构

2.1:标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内,<head>标签定义的内容在网页中不可见

2.2:<TITLE>: 定义网页标题

2.3:<meta>标签

<HEAD>

<META name="author" content="zpark">

<!--定义网页的作者-->

<META name="keywords"content="云计算,分布式处理,大数据,...">

<!--定义网页的关键字-->

<META http-equiv="Content-Type" content="text/html; charset=gb2312">

<!--避免出现乱码-->

<META http-equiv="refresh" content="1">

<!--定义网页每隔1秒自动刷新-->

<META http-equiv="refresh" content="2;url=http://www.taobao.com">

<!--定义网页2秒后自动刷新到"淘宝"-->

</HEAD>

2.4:文本、图像和链接。它包括在 <BODY>…</BODY> 标签内

<BODY bgcolor="#FFCCFF“ background="back_image.GIF" text="#FF0000">

hello world!!!

</BODY>

2.5:<HTML>…</HTML>标签标记 HTML 文档的开始和结束

2.6:标题标签(H1 到 H6 标签用于指定不同级别的标题)

<h1><h2><h3><h4><h5><h6>字体大小依次递减

2.7:字体字号<font>标签

<font size="1-7" color="" face="">

<!--字体大小可取1-7,字体颜色,字体类型-->

</font>

2.8:特殊符号

空格:&nbsp;

引号(""):&quot;

小于(<):&lt;

大于(>):&gt;

版权符:&copy;

2.9:段落和换行

段落标签:<p aligin="right/center/left"></p>

<!--align可以调正文字的位置,左中右-->

换行标签:<br/>

2.10:水平线和列表和预格式文本

水平线:<hr size="5" color="red" width="300">标签

设置水平线的厚度值,颜色和宽度

列表标签:

有序列表:

<ol type="1">

<li></li>

...

</ol>

无序列表:

<ul type="circle">

<li></li>

...

</ul>

预格式段落:<pre>标签

2.11:图像标签

<img src="images/adv_2.jpg" width="300“ height="150“ alt="明星演唱会开幕" >

<!--图像的位置,宽度,高度,为图形添加的提示性文字(鼠标移动到图形上)-->

<img ... align="middle">

<!--图像与文本的对齐方式,图像与文本居中对齐,还可以取top, bottom 值-->

2.12:超链接<a>标签:

<a href="register/register.html">[免费注册]</a>

<!--链接的地址,和链接的内容(可单击)-->

设置超链接的显示位置:

target:目标窗口属性四个特殊的窗口

<a href=url target=“_blank”> 显示在新窗口

<a href=url target=“_self”> 显示在本窗口

<a href=url target=“_parent”> 显示在父窗口

<a href=url target=“_top”> 显示在整个浏览器窗口

注意重点:

超链接-锚记属性:

链接到本页面

锚记标签用于使用户“跳”到文档的某个部分

步骤1:创建锚记

<a name=“marker”>主题名称</a>

步骤2:在超链接的 href中使用该锚记

<a href="#marker">xxx</a>

2.13:表格的基本结构

在 HTML 文档中,广泛使用表格来存放网页上的文本和图像

语法如下:

<table border="1'>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

<!--border用来设置表格边框尺寸大小,tr定义行,td定义列,table定义表格-->

跨多行的表格 :

rowspan =“n” 属性表示跨多少行?

<td rowspan="3">学生成绩表</td>

跨多列的表格:

colspan=“n” 属性表示跨多少列?

<td colspan="3">学生成绩表</td>

2.14:表格的美化修饰(表格的宽度,高度,背景色,背景图片,文字的对齐方式)

设置表格的尺寸和边框:

width用来设置表格的宽度

height用来设置表格的高度

border用来设置表格边框尺寸大小

bordercolor用来设置表格边框颜色

设置背景:

background属性用来设置表格的背景图片

bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色

值,RGB指的是红绿蓝 ,下图就是RGB颜色对照表 。

设置对其方式:

align属性用来设置表格、行、列的对齐方式

填充属性、间距属性:

border(边框的厚度)

cellpadding(单元格填充)用来设置表格内填充距离

cellspacing(单元格间距)用来设置表格内框宽度

2.15:表单

表单的典型应用:

注册用户

收集信息

反馈信息

为网站提供搜索工具

表单中包含的表单元素:

单行文本输入框(TEXT)

<INPUT type=“text ” value="张三" size="20">

type="text";文本输入框

value="";输入元素的默认值

size="";文本框的宽度

密码框(PASSWORD)

<INPUT type=“password ” value=“ 123456 ” size=“22”>

type="password";密码框

value="";初始密码

size="";密码区的宽度

单选按钮(RADIO)

<INPUT type="radio" value="男" checked="checked">

type="radio";单选按钮

value="";初始值

checked="checked";默认选中

复选框(CHECKBOX)

<INPUT type=“checkbox” name="cb2" value="talk">

type="checkbox";复选框

name="":复选框名

value="";复选框值

checked="checked";设置此复选框默认被选中

重置按钮(RESET)

<INPUT type="reset" name="Reset" value="重填">

type="button/reset/submit";按钮类型可为button、submit,reset

name="":按钮名称

value="";按钮上面的文字

多行文本框(TEXTAREA)

<TEXTAREA name="textarea" cols="40" rows="6">

文本框中的内容

</TEXTAREA>

name="textarea" ;文本框的名字

cols="40";文本框的列数

rows="6";文本框的行数

下拉列表(SELECT)

<select name=“名称” >

<option value=“选项的值” selected>

</option>

<option value=“选项的值”>

</option>

……

</select>

说明: selected默认被选中的可选项。

案例说明

<INPUT name="byear" value="yyyy" size=4 maxlength=4 >年

maxlength=4;设置此输入框最多只能输入四个符号

提交按钮(SUBMIT)

表单的基本结构:

<FORM action=“http://www.sohu.com” method=“post”>

……

</FORM>

ACTION = “URL”;指定提交后,由服务器上那个处理程序处理

METHOD =“post或get”;指定向服务器提交的方法:一般为post或get方法,

post方法比较安全

表单元素的统一格式:

<FORM name="form3" method="post" action="">

<INPUT type="xxx" name="xxx" value="xxx" size="21“ maxlength="4"

checked="checked">

……

</FORM>

type="";指定元素的类型,可为TEXT、RADIO、SUBMIT等

name="";控件的名称

value="";控件的初始值

size="";控件的初始宽度

maxlength="":控件中输入的最多字符个数

checked="":控件是否被选中

2.16:框架

(1):框架集页面(FrameSet.htm)

(2):广告栏顶部框架(top.htm)

(3):框架的边框

(4):导航栏左侧框架(left.htm)

(5):详细内容页面右侧框架(main.htm)页面中此部分是变化的

框架的基本结构:

<FRAMESET rows="25%,50%,*" border="5">

<FRAME name=“top" src="the_first.html">

<FRAME name="middle" src="the_second.html">

<FRAME name=“bottom" src="the_third.html">

</FRAMESET>

rows=""; 将窗口进行上下分割,各部分的高度用逗号分开

cols: 将窗口进行左右分割,各部分的宽度用逗号分开,可选。

在浏览器中创建左中右结构的窗口: <frameset cols="150,*"...>

border="5";窗口边框的宽度

使用框架:

创建多个复杂的窗口实现步骤如下:

1、创建1个HTML页面“top.html”

2、创建1个HTML页面“left.html”

3、创建1个HTML页面“right.html”

4、创建框架集HTML页面“Frame_Sets.html”

<FRAMESET rows="20%,*" frameborder="0">

<FRAME src="top.html" name="topframe“ scrolling="no"

noresize="noresize">

<FRAMESET cols="20%,*">

<FRAME src="left.html" noresize="noresize“ scrolling="no"

name="leftframe“ >

<FRAME src="right.html" name="rightframe">

</FRAMESET>

</FRAMESET>

frameborder="0";设置无框架边框

scrolling="no" ;不显示滚动条

name="rightframe";框架名称,便于超链接target属性所引用

设置超链接的显示位置:

框架指定名称

<frame src=“url” name=“框架名”>

target 给超链接指定显示位置

<a href="url" target=“框架名”>

<P>

<a href="right.html" target="rightframe">

<IMG src="images/reg.jpg" width="158" height="31" border="0" />

</a>

</p>

<P>

<a href="buy.html" target="rightframe">

<IMG src="images/buy.jpg" width="160" height="32" border="0" />

</a>

</p>

target="rightframe";target属性指定了要链接的文件会出现在名称

为“rightframe”的框架窗口里

3:CSS纯干货学习后的达到的效果(CSS层叠样式表)

(1):会创建统一外观的字体

(2):文本会创建无下划线的超连接样式

(3):会创建个性化的表格

(4):会创建个性化的表单

(5): 会使用DIV实现页面布局

(6):CSS样式表

HTML标签的外观样式比较单一

颜色只有黑白

字体类型和大小无变化

CSS(Cascade Style Sheets)级联/层叠样式表

作用:

HTML页面的美化(相当于华丽的衣服)

实现内容与样式的分离,方便团队开发

4:CSS语法学习

4.1:样式表的基本语法

样式表的基本结构:

<STYLE type="text/css">

P{color:red; font-size:30px; font-family:隶书;}

……

</STYLE>

<style type="text/css">文档样式表开始,类型为CSS样式

</style>声明文档样式表结束

p{....}样式规则;

样式规则:

P {color:red; font-size:30px; font-family:隶书;}

p:选择器

属性名称:color:red; font-size:30px; font-family:隶书;

注意:在最后一个属性后面加上一个分号 (;) 是一个好习惯

4.2:样式的分类

根据样式代码的位置,分为三类:

行内样式:

使用场景:如果希望某段文字和其他段落的文字显示风格不一样,

那么使用用“行内样式”。

使用语法:行内样式使用元素标签的 STYLE 属性定义。

<html标签 ... style="样式规则">xxx</html标签>

<p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-

size:24px">

...

</p>

内嵌样式:

行内样式表局限于某1个标签,如果希望本网页内的所以同类标签都采用统一样式,

这时应采用内嵌样式。

P { font-size:20px; color:blue; text-align:center }

选择器名称,样式规则,样式表;

根据选择器的不同,内嵌样式又分为:

HTML 选择器:

P { font-size:20px; color:blue; text-align:center }

CLASS 类选择器:

.myinput {border: 1px solid;border-color:#D4BFFF;

color:#2A00FF}

类选择器的定义格式为:

.类名{ …样式规则;}

应用类选择器:class="类名(不含 . )";

ID 选择器:

#fire { color:red; font-size: 24px; }

ID选择器的定义格式为:

#ID名{ …样式规则;}

应用ID选择器:id="ID名(不含#)";

CLASS和ID选择器的区别:

1、在CSS中定义样式表时,ID选择器以"#"开头;CLASS选择器以"." 开

头;

2、在HTML中使用样式表时,使用ID选择器需要id属性;使用CLASS选择

器需要class属性;

3、HTML标签中的id属性,通常用于唯一的标识页面中的一个页面元素,

不允许重复;class允许重复。

4、优先使用CLASS选择器;ID选择器不推荐。

内嵌样式-特殊的选择器:

A:hover 特殊的伪类选择:

其中A代表超链接

hover:代表鼠标悬停

active:当前活动的超链接

visited:访问过的超链接

link:未访问过的超链接

外部样式:

使用场景:同一网站内的多个网页,样式风格统一。

第一步:创建样式表文件newstyle.css

第二步:把样式文件和网页关联

<HEAD>

<LINK rel="stylesheet" type="text/css" href="样式表文件.css">

</HEAD>

第三步:浏览查看各网页

样式文件:newstyle.css P{…..};

4.3:样式的混合使用

行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常需要混合使用:

有关整个网站统一风格的样式代码,放置在独立的样式文件*.css

某些样式不同的页面,除了使用外部样式文件,还需定义内嵌样式

某个网页内,部分内容”与众不同“,采用行内样式

对于某个HTML标签:

1)如果有多种样式,如果规定的样式没有冲突,则叠加;

2)如果有冲突,则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示,如果还

没有,最后采用外面样式表显示,否则就按HTML的默认样式显示。

4.4:常用样式属性-文本字体:

color: red / blue / #ff7300; 颜色

font-family: ”隶书”; 字体类型

font-size:20px; 字体大小(单位,px,em,ex)

text-align: center / left / right; 文本对齐

font-weight: bold / normal; 字体粗细

text-decoration: underline/none; 文本修饰

4.5:常用样式属性-边框

border-width: 1px; 边框粗细

border-top-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px;

border-right-width: 1px;

border-style:solid/dashed/dotted; 边框线类型

border-top-style、

border-bottom-style、

border-left-style、

border-right-style

border-color: #ff7300; 边框颜色

border-top-color、

border-bottom-color、

border-left-color、

border-right-color

border: 1px solid #ff7300 缩写

4.6:常用样式属性-背景

背景颜色

background-image:url(“xxx.gif”); 背景图片

background-repeat: repeat/no-repeat/repeat-x/repeat-y; 背景是否重复

background-position:center/left/right/top/bottom 背景图片定位

4.7:<SPAN> 标签

<SPAN>是行级层标签,不可以包含图片、标题、段落等,只能包含文字内容,对其中

的内容可单独做样式控制。

4.8:<DIV> 层标签

<DIV>是块级层标签,可以包含图片、标题、段落、文字等

DIV的样式属性:

position:absolute; 绝对定位

left:149px; x坐标

top:110px; y坐标

z-index:1; z坐标(位于哪一层)

width:357px; 宽

height:87px; 高

display: none/block/inline; 显示方式

DIV布局:

float属性:定义元素在哪个方向浮动

left-左侧浮动,从左往右排列显示

right-右侧浮动,从右往左排列显示

none-默认,显示在文档中定义的位置

盒模型:

每个元素都被看作一个矩形框(盒子),由内容、padding(填充/内边距)、

border(边框)和margin(空白边/外边距)组成。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档