Html篇
html是用来描述网页的一种语言,超文本标记语言
- HTML主要标签:
基本格式
<!DOCTYPE html>//声明
<html>
<head>
<meta charset="utf-8">
<title>题目</title>
</head>
<body>
<h1>标题</h1>
<p>段落。</p>
</body>
</html>
1.1 <html></html>用来标记该文件是html文档
1.2<head></head>文档的头部信息,说明文档的基本情况,在此标签对中可使用<title></title>、<script></script>等描述html文档相关信息的标签对
1.3<body></body>html文档的主题部分,包含显示信息及控制信息的各种标签 只有body中的内容才会在浏览器中显示
属性:
bgcolor:设置背景颜色
text:设置文本颜色
1.3.1超链接<a href=”url”>超链接名称或图片</a>
1.3.2图片标签<img src=”url” height=” ” weidth=” “>
- 表格标签:
基本语法
<table>
<caption>表格标题</caption>
<tr>
<th>列名1</th><th>列名2</th>
</tr>
<tr>
<td>数据1</td><td>数据2</td>
</tr>
....
</table>
表格属性
<table> border:表格边框 cellspacing:单元格间的间距
cellpadding:单元格的内容与其边框的内边距 align:表格的对齐方式,通常是left,center,right
bgcolor:表格的背景颜色 background:表格的背景图片
width:表格宽度 height:表格高度
border-collaspe:collaspe:边框合并,不叠加 cellspacing:0:边框合并,但合并之后的边框宽
表格行的属性<tr>
align :设置水平对齐方式
valign :单元格中内容的垂直对齐方式:top middle bottom
bgcolor :背景颜色
<td><th>属性(th一般用于表示某一列的名字)
<td>用于设置表格中某一单元格的属性
单元格属性
width:单元格宽度height:单元格高度
align:单元格内文本的对齐方式,通常是左,中,右 left,center,right
valign:单元格内文本的对齐方式,通常是上,中,下 top,middle,bottom
nowrap:在为设置单元格宽度时,当文本长度宽于单元格宽度,将要换行时,该标签会使其不换行
表格的跨行和跨列
rowspan:跨行标签
colspan:跨列标签
- 表单标签:
表单是用户雨服务器交互的主要方法,用户在表单中填写数据,提交给服务器程序来处理。
表单是由文本框、密码框、多行文本框、单选按钮、复选框、下拉菜单列表、按钮、文件域、隐藏域等各种表单元素及其标记组成。
<form>属性:
name 表单对象名称
method 提交方法
action 处理程序
target 用于指明在何处打开
input 属性
<input name=”输入域名称” type=”输入域类型” value=”输入域的值”>
输入域类型 文本域 text
密码域 password
单选按钮 radio
复选框 checkbox
提交按钮 submit
取消按钮 reset
图像按钮 image
文件域 file
隐藏域 hidden
下拉列表框<select><option>
<select name=”下拉列表名” size=”下拉框大小” multiple>
//multiple表示用户从列表中选择多项,若缺省,则表示多选
<option value=”” select>...</option>
<option>.../option>
//option中value和selected都是可选项,value表示选中后浏览器传递给服务器的数据,//selected用来指定选项的初始状态,该选项初始时被选中
</select>
多行文本框<textarea>标记
<textarea name=” ” rows=”输入域行数” cols=”输入域列数” wrap=”off|virtual|physical 设置是否换行”>
初始值
</textarea>
html块级元素
大多数html元素被定义为块级元素或内联元素
块级元素在浏览器显示时,通常会以新的行来显示(和结束))
实例:<h1><p><ul><table>
html内联元素
内联元素在显示时不会以新行开始
实例:<b><td><a><img>
<div>标签可以把文档分割为独立的、不同的部分。
每一个div占满一整行,块级标签
<div id=”块名” stytle=”width:30px;height:30px;background-color:#FFA500;float:left;test-align:center;”></div>
<span>
文本信息在一行展示,行内标签 内联标签,可用作文本的容器
html的几种布局元素
一、流动布局
块级元素都会自上而下按顺序垂直延伸分布,默认状态下块级元素的宽默认为100%
内联元素都会从左到友水平延伸分布
二、浮动布局
在默认布局下,如果我们想让两个块级元素并排显示,通过float浮动实现,使用后记得清除浮动
三、层模型
通过设置定位position实现 absolute 绝对定位; relative 相对定位 ; fixed 固定定位等
目前前端的几种布局方式:
一、静态布局
特点:不管浏览器的尺寸多大,网页布局始终按写代码式的固定宽高显示,常规的pc网站都是静态布局移动端的话另外建设网站单独设布局
移动端开发中采用静态布局的两种方式:
(1)在viewport meta标签上设置宽的大小width=320,也页面的各个元素也以像素px为单位
通过js动态修改标签initial-scale使得页面等比缩放,从而刚好占满整个屏幕
(2)在viewport meta标签上设置content"width=640,user-scalabel=no",页面的各个元素以
像素px为单位。由于640px超出手机宽度,浏览器会自动的缩小页面至全屏
优点:这种布局方式简单,亦没有什么兼容问题
缺点:不能根据用户的屏幕大小做出相应变化
二、流式布局
特点:页面元素的宽度是按照屏幕的分辨率进行适配调整,简单说使用百分比%设置,再设置max-width,min-width; 等属性控制尺寸流动范围;使整体布局不变,代表作网格系统
缺点:如果屏幕过大,相对原始设计过小或过大的屏幕不能正常显示,因为设置的是百分比;但是文字等元素的
大小是以像素px为单位的,在大屏下显示的效果会是宽被拉宽,使整个页面看起来不协调
三、自适应布局
特点:分别为不同的屏幕分辨定义布局,即创建多个静态布局,每个静态局部对应一个屏幕的分辨率范围。改变
屏幕分辨率可以切换不同的静态布局,但每个静态布局中页面元素大小不随窗口的大小而改变。位置发生改变
四、响应式布局
概述:随着CSS3的媒体查询,出现了响应式布局,目标:确保每一个页面在所有的终端都能显示满意的效果
通常糅合了流式布局与自适应布局 再搭配媒体查询技术,
根据不同的屏幕分辨率做不同的布局,且宽根据屏幕的分辨率做出适配的调整
特点:每个屏幕分辨率下面都会有一个布局样式,即元素位置大小都会变
优点:适应移动和PC端
缺点:媒体查询技术有限只能适应主流的宽高;要匹配足够多的屏幕大小,工作量大,设计版本多
响应式布局步骤
在head定义:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user- scalable=no">
name="viewport" :名称=视图;
width="device-width":页面宽度=设备宽度
initial-scale:初始缩放比例
maximum-scale:允许用户的最大缩放比例
minimum-scale:允许用户的最小缩放比例
user-scale:是否允许用户可以手动缩放
media query是响应式设计的核心,它能够跟浏览器进行沟通
结构:@media screen and(max-width:980px){
#head{...}
#content{...}
#footer{....}
}
例:iphone: @media only screen and (width:320px) and (width:768px){}
ipa : @media only screen and (min-width:768px) and (max-width:1024px){}
字体设置: html{font-size:100%;}
完成后可以定义响应式字体
@meta (min-width:640px){body{font-size:1rem}}
@meta (min-width:960px){body{font-size:1.2rem}}
@meta (min-width:1200px){body{font-size:1.5rem}}
宽不固定,可以使用百分比: #head{width:100%} #content{width:50%}等
详情可借鉴http://www.mahaixiang.cn/wzsj/278.html
五、弹性布局(rem/em布局)
rem、em的区别:都是顺应不同网页字体大小展现而产生的,em相对是父元素,rem始终相对html大小即页面根元素
使用em相对布局相对与使用百分比%布局更灵活
特点:包裹文字的各元素的尺寸采用em/rem为单位,而页面的主要划分区域仍然使用百分比或像素为单位
rem、em与px区别:
px:像素,比较精确,不方便左响应式布局
em: 以父节点font-size大小为参考点,标准不统一,IE6-8不支持
表格样式,字体颜色,字体大小,边框
css包括对象、属性(选择器)和值
选择器:标记选择器 引用样式的对象{标签属性:属性值;...}
类别选择器 标签.类名{标签属性:属性值;...}
.类名{标签属性:属性值;..}
ID选择器 #id名{标签属性:属性值;...}
在html中使用css有4种方式:行内式、内嵌式、外链式(<link href=”*.cdd文件路径” type=”text/css” rel=”stylesheet”>在<head>标签内)、导入式(style type=”text/css” @import url(.css 文件路径);</style>)
css常用属性 :
1.字体属性:
font-family(字体) 取值(如“宋体”)
font-size 取值单位pt(点数)
font-style normal(普通,默认值) italic(斜体) oblique(中间状态)
font-weight(加粗) normal bold(一般加粗) bolder(重加粗) lighter(轻加粗) number:100~900的加粗
font(字体复合属性) 可以取值以上所有的属性值,之间用空格分开
2.颜色和背景属性:
color 颜色值为英文名称或16进制的RGB值
background-color 同上
background-image none(不用背景) url(图像地址)
background-position top,left,right,bottom,center等
background 可取以上所有值,之间用空格分开
3.文本段落属性:
text-decoration none,underline,overline,line-though(删除线 blink(文字闪烁)
vertical-align baseline,super(文字上标),sub(文字下标),top,text-top(使元素和上级元素的字体向上对齐),middle,text-bottom
text-align left,right,justify(两端对齐)
text-indent 缩进值(长度或百分比)
line-height 行高值(长度、倍数、百分比)
white-space normal将连续的多个空格合并,nowrap强制在同一行内显示所有文本,知道文本结束或者遇到<br>对象
- 边框属性
border-stytle solid(实线) dashed(虚线)
border-color 边框颜色
border-width 边框宽度
或 border:边框宽度 边框颜色 边框样式(如:border:20px rebeccapurple solid;border-left border-right border-top border-bottom)
- 列表属性 ul,ol{ list-style:decimal-leading-zero;
list-style: none; 除去列表样式
list-style: circle;
list-style: upper-alpha;
list-style: disc; }
- display 属性
none 隐藏
block 块元素
inline 内联元素
inline-block 内联元素具有块属性
1.水平对齐方式 text-align
<div style="width:200px; height:200px; color:#FFF; text-align:center">测试文字</div>
2.垂直对齐方式 vertical-align 配合行高(line-height)使用。
3.行高 line-height
<div style="width:200px; height:200px; background-color:#F00; color:#FFF; text-align:center; vertical-align:middle; line-height:200px">测试文字</div>
4.缩进 text-indent 单位:像素
<div style="width:200px; height:200px; background-color:#F00; color:#FFF; text-align:center; vertical-align:middle; line-height:200px; text-indent:30px">测试文字</div>
五、边界与边框
1.外边距 margin 方向:上右下左 顺时针
<div style="width:300px; height:300px;
<div style="width:200px; height:200px; background-color:#CF9; margin:10px 0px 0px 10px; float:left"></div>
</div>
float为流向,在以后的布局中会学,在这不加上边距不起作用。
2.内边距 padding 方向:上右下左 顺时针
如果加了内边距,该元素会相应的变大。
3.边框 border border代表四个方向全有。
div style="width:200px; height:200px; border:1px solid #60F"></div>
1px solid #60F 简写方式 第一个边框粗细 第二个边框样式 第三个边框颜色
盒子模型
通常用四个边界来描述:
margin(外边距)
border(边框)
padding(内边距)
content(内容区域)
1.padding,border,margin都是可选的,默认值为0,但是浏览器会自行设置元素的margin和padding,通过在css样式表中设置来覆盖浏览器样式。
2.如果给元素设置背景,并且边框的颜色为透明,背景将应用于内容,内边距和边框组成的区域。
3.浏览器兼容性
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。
根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。
不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
- ios-html-get/post的区别,一言以蔽之(MS)CheckST
- html head 头部中的元素内容
- android学习笔记15--------------获取网站html
- 使用严格的HTML4.01
- lucene-使用lius解析html
- Android HttpClient和URLConnection两种下载HTML源码的方法
- spring REST中的内容协商(同一资源,多种展现:xml,json,html)
- python解析html提取数据,并生成word文档
- 原生JS获取HTML样式并修改
- HTML文档中的图像格式
- HTML的footer置于页面最底部的方法
- 小程序 转化html
- HTML Structure: Tables, Divs, and Spans
- HTML5+CSS3教程1
- HTML 隐藏与显示简例,加详细注解
- 简述HTML中post与get请求的区别
- Html,Placeholder,Jquery
- HTML data属性简介以及低版本浏览器兼容算法
- html常用功能
- HTML 表单和输入