前端——HTML,CSS
2018-08-02 06:26:45来源:博客园 阅读 ()
HTML
HTML叫做超文本标记语言,是一种制作万维网页面标准语言。相当于定义一套规则,大家都来遵守它,这样浏览器就可以去解释它。
浏览器负责将标签翻译成用户看得懂的格式,呈现给用户。
作为开发者需要学习的:
1.学习HTML规则
2.从数据库获取数据,然后替换到HTML文件的指定位置(web框架)
HTML文档
如果新建一个HTML文档,编译器会帮你自动写好基本格式:
我们一一来看,他们是怎么回事
1.Doctype
Doctype告诉浏览器使用什么样的规范来解析文档。这个属性会被浏览器识别并使用,如果你的页面没有这个声明,那么默认是标准兼容模式未开启,浏览器会按照自己的方式去解析渲染页面。这将是恶魔的开始。
2.Meta
meta标签提供有关页面的信息,例如页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词。
1.页面编码
charest=“utf-8”
2.刷新和跳转
<meta http-equiv="Refresh"Content="30"> 每隔30秒刷新一次网页
<meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过5秒跳转到某网页。(关于跳转,可以在应急的时候用,一般可以用js实现)
3.关键词
<meta name="keywords" content="星际2.老男孩,UFO,皮卡"> 关键字
4.描述
<meta name="description" content="为您提供最新的信息"> 网站描述
3.title
title标签写网站头部信息,即网页标签的名称
4.Link
link标签有两个作用:
1.设置标签页图标:
<link rel="shortcut icon" href="image/favicon.ico"> # rel指的是类型,href是文件路径,(image是存放图片的文件夹)
2.外联CSS文件
<link rel="stylesheet" type="text/css" href="css/common.css"> # rel指的是类型,href是存放css文件的文件夹
5.style
在页面中写样式
6.script
1.引进文件
<script type="text/javasvript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
2.写js代码
<script type="text/javascript">...</script>
以上都是head标签,head标签内的内容是不会显示在界面上的(除了title)。接下来讲body标签
body标签:
标签一般分为两种:
1.块级标签
霸占一整行的标签。比如:<h>,<p>,<div>等
2.行内标签
可以多个标签共同占用一行的标签。比如:<span>,<a>,<input>,<img>,<label>等
1.各种符号
使用字符编码来代替某种符号,详细对照表参照 http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
2.<p>标签
段落标签:<p>文字</p>,在里面的文字自成一个段落。段落之间会有间距,但换行没有
3.<br>标签
用于换行
4.<h>标签
标题(自动加大加粗),分为1~6等级,h1最大,h6最小。书写:<h1>标题</h>
5.<span>标签
白板,本身没有特性,行内标签。
6.<div>标签(最最常用)
白板,本身没有特性,块级标签。
7.<a>标签
1.做链接。<a href="http://www.baidu.com" target="_blank" title="点一下看看啊">你好</a> # 页面中点击“你好”,跳转页面,参数target=_blank表示跳转到新的标签页,title属性作用:当鼠标移动到链接处,会显示该文字。
2.锚。用来记录页面浏览的位置。
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<a href="#i3">第三章</a>
<a href="#i4">第四章</a>
<a href="#i5">第五章</a>
<div id="i1" style="height:600px;">第一章的内容 <p>绪论</p></div>
<div id="i2" style="height:600px;">第二章的内容 <p>公元500年</p></div>
<div id="i3" style="height:600px;">第三章的内容 <p>公园1000年</p></div>
<div id="i4" style="height:600px;">第四章的内容 <p>公元1900年</p></div>
<div id="i5" style="height:600px;">第五章的内容 <p>公元2010年</p></div>
<a>标签默认的显示样式会有下划线,如果看着不爽想要去掉,在a标签样式中设置:text-decoration:none;
8.<input>标签
用来做用户输入、按钮框,取决于type属性
type参数值 | 代表的类型 | 其他说明 |
text | 单行文本输入框 | 参数name便于后台识别 |
password | 密码输入 | name同上 |
button | 按钮 | value在按钮上显示的名称 |
submit | 提交按钮 | value同上 |
radio | 单选框 | name相同则互斥,value用来后台识别,check=“checked”默认选中 |
checkbox | 多选框 | name相同表明是同一类,value用来后台识别,checked=“checked”默认选中 |
file | 上传文件 | name后台识别,依赖form表单属性enctype=“multipart/form-data” |
reset | 重置按钮 | value按钮名称 |
示例:
<form action="" method="get">
<input type="text" name="user"> <!-- name是标签名,便于后台识别 -->
<input type="text" name="emil">
<input type="password" name="password">
<input type="button" value="登录">
<input type="submit" value="登录吧">
</form>
<form enctype="multipart/form-data">
<p>请选择性别</p>
男:<input type="radio" name="gender" value="1"> <!--name相同则互斥,value用来后台识别-->
女:<input type="radio" name="gender" value="2">
alex:<input type="radio" name="gender" value="3">
<p>爱好</p>
篮球<input type="checkbox" name="favor" value="1"> <!--name相同表示同一类,value用于后台识别-->
足球<input type="checkbox" name="favor" value="2">
台球<input type="checkbox" name="favor" value="3">
羽毛球<input type="checkbox" name="favor" value="4">
<p>技能</p>
写代码<input type="checkbox" name="skill" value="1">
唱歌<input type="checkbox" name="skill" value="2">
<p>上传文件</p>
<input type="file" name="fname">
<p>说说你的优势</p>
<textarea name="meno">可以设置默认值的多行文本框</textarea>
<p>选择你的地址</p>
</from>
9.<form>标签
表单,可以将用户操作的内容提交到后台。参数:action指向提交地址,method指明使用哪种方式提交。
method有两种方式:get和post。提交后台时会发送两部分数据:请求头和请求体。get方式是将内容放在了请求头,所以会显示在url上,post将内容放在了请求体。两者区别仅仅是,内容存放位置不同。
entype="multipar/form-data"设置该属性可以上传文件。
10.<textarea>标签
是一个多行输入框,与上面不同的是,它可以设置默认值。
<textarea name="">默认值在这里</textarea>
11.<select>标签
选择框。如果属性设置multiple="multiple" size="3",表示选择框只能同时显示三项。
<p>选择你的地址</p>
<select name="city">
<option value="1" selected="selected">北京</option> <!-- selected 默认选项 -->
<option value="2">深圳</option>
<option value="3">上海</option>
<option value="4">杭州</option>
<option value="5">成都</option>
</select>
<p>请选择籍贯</p>
<select name="jiguan">
<optgroup label="河北省">
<option value="1">石家庄</option>
<option value="2">保定</option>
<option value="3">邯郸</option>
</optgroup>
<optgroup label="湖南">
<option>长沙</option>
<option>株洲</option>
<option>湘潭</option>
</optgroup>
<optgroup label="广东">
<option>广州</option>
<option>深圳</option>
<option>佛山</option>
<option>珠海</option>
<option>中山</option>
</optgroup>
</select>
12.<img>标签
用来显示图片,属性style中可以设置图片大小,alt可以在图片无法显示的时候显示文字。<iamge>也有title属性,和a标签的作用一样。
13.<label>标签
通常与input输入框一起用。它本身是个普通的白板,与<span>没什么区别,但与输入框在一起时,for属性可以实现一个功能:点击输入框前面的文字,也可以启用输入框编辑。
<label for="username">用户名:</label>
<input id="username" type="text" name="user">
14.列表
ul ol dl三种。ul中没有编号,ol有编号,dl中<dt>可以作为大标号,<dd>作为小标号
<ul>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<ol>
<li>asdfe</li>
<li>asdfe</li>
<li>asdfe</li>
</ol>
<dl>
<dt>asfas</dt>
<dt>sdfas</dt>
<dd>safsd</dd>
<dd>safsd</dd>
<dd>safsd</dd>
</dl>
15.<table>标签
制作表格,<table>标签内可以分成两部分,<thead>表头和<tbody>表格内容区。表头会自动加粗居中,在表格内容区,<tr>表示行,<td>表示列。
合并单元格:
colspan横向合并,要注意去除多余的列
rowspan纵向合并,要注意去除多余的行
<table border="1">
<thead>
<tr>
<th>地址</th>
<th>性别</th>
<th>姓名</th>
<th>其它</th>
</tr>
</thead>
<tbody>
<tr>
<td>石家庄</td>
<td>男</td>
<td colspan="2">欧沃</td>
</tr>
<tr>
<td>保定</td>
<td>女</td>
<td>alex</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td>株洲</td>
<td>男</td>
<td>alxe</td>
</tr>
<tr>
<td>长沙</td>
<td>男</td>
<td>森马</td>
<td>1</td>
</tr>
</tbody>
</table>
16.<fieldset>标签
这个用的很少,看看效果图就懂了
<fieldset>
<legend>登录</legend>
<p>用户名</p>
<p>密码</p>
</fieldset>
CSS
CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。
存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。
语法:style = "key1:value1;key2:value2;"
- 在标签中使用 style="xx:xxx;"(任何一个标签都可以使用style属性来编写样式)
- 在页面中嵌入 < style type="text/css"> </style > 块
- 引入外部css文件
必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。
CSS选择器(编写CSS样式)
选择器指的是,在<head>标签中的<style>标签中编写样式(或在CSS文件中编写),在<body>内的标签来选择已经写好的样式,提高了重用率,减轻了body中的代码臃肿。
1.id选择器(不建议用)
样式编写以#开头,标签选择用id属性,每个标签使用的id都不能相同(唯一配对)
#名称{
........
}
<标签 id="名称">
2.class选择器(最常用)
样式编写以 . 开头,可以使用相同的设置
.名称{
.........
}
<标签 class="名称">
3.标签选择器
如下所示,将所有div标签设置成此样式。
div{
……
}
4.层级选择器(常用)
样式的选择具有层级关系,类似于目录(用空格隔开)
span div{
………
} <!--所有span标签内的div标签应用此设置-->
.c1 div{
………
} <!--应用c1的标签内的div标签应用此设置-->
.c1 .c2{
………
} <!--应用c1的标签内的标签才能应用此设置-->
5.组合选择器
.c1,.c2,div{
………
} <!-- class="c1" 或 class="c2" 或 所有div标签都能应用此设置-->
6.属性选择器
先做一遍筛选,对筛选出来的标签根据属性再做筛选,并设置该样式
格式:标签名 [ 属性 = "值" ]{ …编写的样式… }
如:input[name="alex"]{width:10px;height:20px;} <!-- 先筛选出来所有input标签,再筛选出来属性name为alex的标签,设置样式 -->
.c1[type="password"]{height:40px;width:30px;} <!-- 先筛选出来所有应用c1样式的标签,再筛选属性type为password的标签,设置样式 -->
样式设置的优先级
- 针对某个标签,头部style标签中设置了样式,标签本身也设置了样式,如果没有重复设置属性,都能应用
- 如果有重复设置的属性,则根据优先级来应用。
应用优先级:标签本身的设置 > 书写距离近 > 书写距离远
例如:
<head>
<style>
.c1{
background:red;
color:white;
}
.c2{
background:black;
font-size:58px;
color:black;
}
</style>
</head>
<body>
<div class="c1 c2" style="color:green">wooohoo</div>
</body>
<!-- color和font-size属性由于没有重复,所以都能应用,color属性根据就近原则被应用绿色,background属性被应用黑色 -->
边框border
样式:border: 宽度 样式 颜色 。样式中:dotted表示虚线,solid表示实线
如:border:2px dotted red; <!-- 2像素宽度,虚线,红色 -->
基本样式
高度: height
宽度: width
框内水平居中(文字): text-align:center;
垂直居中(文字): line-height:20px; <!--标签多高,这里就要设置多高-->
字体加粗: font-weight:bold;
字体大小: font-size
float(飘)
在样式中设置 float : right; 此标签就会飘到父标签的最右边。块级标签本身是不能堆叠在一行的,但是都设置了这个属性就可以(宽度相加不大于父标签的前提下)
display
将会计标签和行内标签转换属性。
设置 inline 为行内,设置 block 为块级。
如果设置 inline-block 则同时具有:
inline的属性:默认自己有多少空间占多少空间
block的属性:可以设置高度,宽度,边距 ( 行内标签不能设置高度和宽度,而块级标签可以)
边距(margin padding)
内边距 padding 当padding值增加时,默认增加上边距,除了自己的位置在变化,本身的大小也在变化(可以想象原本的标签在移动,移动过的的区域就是增加的那部分。虽然本身大小在变化,但是可编辑区域仍然是原来那部分大小。)padding-top,padding-left,padding-right,padding-bottom是相同的效果。
外边距 margin 当margin值增加时,与父标签上左右距离增加,标签本身的大小被强制变化。但如果单独设置某一边距时,标签大小不会变化(margin-top 上边距,margin-left 左边距,margin-right 右边距,margin-bottom 下边距。)
常用的方式还有:margin:0 auto; 表示与父标签的上边距为0,左右居中
背景(background)
background 分为以下几类:
background-color:red; 背景颜色设置为红色
background-image:url("image/4.jpg"); 设置背景图片
background-repeat:no-repeat; 如果设置了背景图片,这个属性则可以设置重复平铺。默认是no-repeat不平铺。还可以设置repeat表示背景图片横向纵向都平铺。 repeat-x表示只在横向平铺,repeat-y表示只在纵向平铺。
background-position:74px 100px; 设置背景图片的位置。表示水平方向左边距74像素,上边距100像素。
position 位置
可以设置标签的位置,经常与top、right、left、bottom联用。一旦设置position属性,此标签将变成上一层覆盖下一层。position的值分两类:
- fixed 固定在屏幕的某个位置(滑动滚轮,相对屏幕的位置不会动)
- relative + absolute 固定在相对于父标签的某个位置(单独设置relative没有任何效果,一般与absolute嵌套使用)
思考:当position为 relative + absolute时,它与margin系列的区别是什么?
1. margin是基于父标签调整位置,依赖于父标签;position是基于整个页面调整位置(单独absolute),当然也可以基于父标签调整。
2. 用margin,如果两个同级标签位置不够占,其中一个会将另一个挤到下一行,永远属于同一个图层。而如果设置position,它会分层,覆盖下一层。
在设置position时需要注意:
1. 一旦设置position后,必须设置位置(top,left,right,bottom),否则根本无法显示标签。
2. 如果出现分多层,可以使用 z-index 来设置层级顺序,数值越大层级越高。设置该 z-index 的标签会覆盖没设置的。
3. 若要将position:fixed的标签居中,则应top:50%;left:50%;且上边距为 -(标签高度)÷2 ; 左边距为 -(标签宽度)÷2;
opacity 透明度
opacity的值在[0,1]区间内,0为完全透明,1为完全不透明
overflow 限制图片显示区域
当父标签内的<img>图片大于父标签,若想将其限制,不能超过父标签的范围。有两种解决思路:
① 直接给图片设置大小,小于或等于父标签。
② 设置overflow:hidden。表示超过父标签的部分隐藏,这时显示出来的是原图的右上角部分。
也可以 overflow: auto 。显示效果在hidden的基础上可以滚动图片。
hover
能够实现:将鼠标移动到标签上,显示出另外一种样式。
比如菜单栏,原本全部都是蓝色背景,如果鼠标移动到某个标签上,则显示深蓝色背景。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<style>
.pg-head{
position:fixed;
top:0;
height:50px;
width:1537px;
background-color: #2459a2;
line-height: 50px;
}
.w{
width:1168px;
margin:0 auto;
}
.pg-head .menu{
display: inline-block;
padding: 0 10px 0 10px;
color: white;
}
/*当鼠标移动到当前标签上时,以下css属性才生效*/
.pg-head .menu:hover{
background-color: blue;
}
</style>
</head>
<body style="margin:0 auto;">
<div class="pg-head">
<div class="w">
<a class="menu">全部</a>
<a class="menu">42区</a>
<a class="menu">段子</a>
<a class="menu">1024</a>
</div>
</div>
<div class=""></div>
</body>
</html>
初学者可能会遇到的问题:
1.CSS重用
css样式可以放在<head>标签中,也可以放在css文件中,link标签引入即可。在编写样式时,如果样式c1和c2中有相同的部分,或者有在其他地方被大量使用的部分,可以将这部分提取出来再写个c样式。
2.改变页面大小,原本的页面混乱
要注意:在<body>标签中最外层的标签,大小(height、width)不能用百分比,一定要是具体的数值。
一般情况下,我们习惯将整个页面分成三部分:头部,身体,底部。这三部分都是<div>标签,每个部分标签内层再嵌套一层<div>,这层宽度可以设置百分比了。内层的也可以。
3.在IE浏览器中可能会出现:用<a>标签包裹的<img>图片显示出来会有蓝色边框。
解决办法:样式设置:border:0;
4.<input>标签用户输入的内容若想提交到后台,必须用<form>标签包裹。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:如何让浮动的元素换行??css
下一篇:C#读取配置文件的几种方式
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-15
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-14
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-13
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查 2020-07-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash