2015年10月15日学习html基础笔记
一个互联网公司的分工,小公司要求全能,拿一个项目全部做出来。大公司分工明细,主要步奏为策划人员策划方案,美工人员设计图有.psd.rp等,前端人员做静态页面,后台人员获取数据java php .net。无论是处于那块的人员,都要对于其他的有所了解。
www网页服务,FTP文件上传下载,telnet远程控制
Apache2.2服务器
windows+r=运行,输入services.msc调出服务控制台
本地:127.0.0.1,访问自己本地服务器,需要使用Apache架起服务器之后,将文件放置到htdocs文件夹当中。安装Apache时要注意不能有中文文字不能有空格,可以直接安装到C盘下,不要安装到默认文件夹中。
主要使用的测试浏览器有IE、firefox、chrome、opera、safari
服务器端技术与客户端技术
常见的服务器端技术(运行在服务器上):
JSP/PHP/ASPX
(前端)常见的客户端技术(运行在浏览器上):
HTML/CSS/JS/SWF(flash)
计算机语言,HTML与JAVA/C/PHP不同,一门语言有三种结构,顺序执行、循环执行、选择执行。HTML里没有循环、选择等基本结构,只有纯文本和52个标签。
双标记标签:<标签名>文本</标签名>
单标记标签:<标签名/> 单标记标签中不能包含内容
<hr/>水平线<br/>换行
Meta标记的使用
<meta name=”keywords” content=”value”>多个关键字内容之间可以用“,”分割
设置描述:<meta name=”description” content=”value” >
设置作者:<meta name=”author” content=”作者名”>
设置字符集:<meta http-equiv=”content-type” content=”text/html;charset=gb2312”/>或者utf-8
gb2312主要用于中文文字较多的,而utf-8是国标,在国际上使用较多。
设置页面定时跳转:<meta http-equiv=”refresh” content=”2;URL=http://www.baidu.com”/>
html与xhtml的区别,xhtml首先所有字母都小写,其次所有标记都要有关闭。
格式:<标记 属性1=参数1 属性2=参数2>内容</标记>
不同标签具有不同的属性,所有标签都具备以下四个属性:
id:整个文档每个标签可以声明一个唯一的id号
style:为元素指定css样式
class:指定元素所属的类型
title:指定标签的弹出提示语
写代码前需要声明文档类型,否则会影响到css和javascript的解释执行,很多效果就会出不来。
文档类型声明:(所有工具都能生成这句话)
<!DOCTYPE html PUTLIC “-//W3C//DTD XHTML1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
windows+d可以将桌面调出来。
meta data:元数据-描述数据的数据(视频1day02视频1的35分)
<meta http-equiv=”content-type” content=”text/html;charset=UTF-8”/>元数据,写在head里面title上面比较好,这样会告诉浏览器以下的文字内容以这个标准来解析。避免出现乱码问题。
转义字符:
<>正常来说是无法显示的,会被认为是告诉浏览器的语言,所以需要使用转义字符来显示到前台。
基本格式:&xxxx
< 是<
> 是>
空格 是
& 是&
© 是©
™ 是™
® 是®;
XHTML中不使用描述样式,都是使用CSS来控制样式,而在html中描述样式和描述语义是混杂的。例如<b>和<strong>,前面是描述样式,后面是描述语义,在xhtml中<b>描述样式标签就不可存在了。xhtml中,<em>代替<i>。
如今新网页中大多都是用的xhtml,为什么html却没被废弃呢?因为之前很多老网页没有修改过,都还是用的描述样式的方式,所以无法废弃,只是新的不再使用。
html元素类型,共有100多个元素类型,差不多各占一半,有的只能用于区块元素中,有的只能用于内联元素中。如果区块元素的用于内联元素中,那么效果就不会显示出来。
- 区块元素(block),必须自己独立占一行,例如<div></div>
- 内联元素(inline),自己有多宽就占多宽,同时也与其他的处于同一行中。
内联标签:<b><strong><i><em><u><s><sub><sup><span><img/><a><input type=”text”/><input type=”submit”/><label><select><textarea>
区块标签:<h1>到<h6><div><p><hr><pre><table><ul><li><ol><dl><dt><dd><form>
描述标签:<b><i><sub><sup><width><color><align>
语义标签:<p><strong><em><h1>到<h6>
分区元素用于为元素分组,常用与页面布局。<span>和<div>
块分区元素<div></div>,元素分组工具,用于内容分层和页面布局,需配合CSS使用
行内分区元素<span></span>需配合css和Js才有效果
下标字:<sub></sub>
上标字:<sup></sup>
ctrl+d删除一整行
ctrl+alt+↓复制一整行
标题字在不同的浏览器默认字体高度、间距都是不一样,所以会存在兼容性的问题。要使用css来屏蔽这个问题。
<b/>,在html或者html5中“/”可以省略,但是在xhmtl中是不可以省略的。
<hr>分隔线元素,创建一条水平线,常用属性为(size、width、align、color)
<img/>通知浏览器此刻应该向服务器发起一个图片请求,src指定图片的URL,alt属性,如果图片无法显示则显示此文字来替代。
html页面中可能用到资源:图片、css、js、另一个页面
web开发用到的图片格式
bmp:未经压缩的bit图,一般不用于web开发
psd:ps的原始文档,支持层,页面中不直接使用
tiff:出版印刷
raw:太大
jpeg:经过压缩的图片,保真度高,色彩丰富,适用于web中的照片,1024*768大压缩到100k甚至更小完全可以接受
png:色彩没有jpg丰富,但是透明度支持的好,压缩比例大,适合于图标
gif:色彩比较丰富,支持动画效果,也在一定程度支持透明度。
链接的表现形式
- 目标文档为下载资源<a href=”DAY02.zip”>下载</a>
- 电子邮件链接<a href=”mailto:balabala@163.com”>联系我们</a>
- 返回页面顶部的空链接<a href=”#”>…</a>
- 链接到javascript<a href=”javascript:…”>js功能</a>
页面布局的三种方式:
table的使用主要用于显示批量的数据,但是作为页面布局已经过时。
div+css现在的主流
html5布局标签,未来的趋势
蓝色的是内容所占区域,橙色的是间距,绿色的是填充。
form表单,用于收集用户的数据,提交给服务器。有两个属性,action是指定表单数据的处理页面,必须是动态页面。还有input type。
地址栏url中最多输入字符不能超过1024个字节。
2015年10月15日学习html基础笔记的更多相关文章
- 2016年10月15日 星期六 --出埃及记 Exodus 18:26
2016年10月15日 星期六 --出埃及记 Exodus 18:26 They served as judges for the people at all times. The difficult ...
- 【C++】命令行Hangman #2015年12月15日 00:20:27
增加了可以在构造Hangman对象时通过传入参数设定“最大猜测次数”的功能.少量修改.# 2015年12月15日 00:20:22 https://github.com/shalliestera/ha ...
- 10月15日 | 云栖大会“淘宝移动技术实践&开放论坛”来了!
参会报名链接:http://baichuan.taobao.com/marketing/yunqi#?baichuan_channel=cnblogs 顺应移动互联网消费升级趋势, 淘宝作为移动领域的 ...
- 2015年10月22日CSS学习笔记
XHTML1.0对HTML4.0的改进 借鉴了XML的写法,语法更加严格. 把页面的内容和样式分离了,废弃了html4中的表示样式的标签和属性.推荐使用css来描述页面的样式. CSS样式的优先级 ! ...
- 十大Intellij IDEA快捷键(转)(2015年06月15日)
注:本文转自:http://blog.csdn.net/dc_726/article/details/42784275 Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow ...
- 2016 10月15日java的动手动脑
(1) 编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. 源程序: //随机数的产生 //zhanxinwu,October,15,2016 public class Recur ...
- c# Equal函数 and 运算符'==' (原发布 csdn 2017年10月15日 20:39:26)
1.==.!=.<.>.<= 和>= 运算符为比较运算符(comparison operator).C#语言规范5.0中文版中比较运算符的描述如下: 2.通用类型系统 3.值类 ...
- 2015年10月23日JS笔记
ECMAScript标准:JavaScript核心语法 微软:Jscript ECMAScript标准:一纸空文 JavaScript和JScritp都号称完全实现了 ECMAScript标准 W3C ...
- 7月15日学习之BOM
setTimeout() //延时器,只执行一次代码 clearTimeout() //清除演示器 setIntervla() //定时器,根据指定时间间隔执行一次代码 clearInterval() ...
随机推荐
- 现代php开发
最近在看 Modern PHP 很薄的一本书,有种发现新大陆的感觉,强烈推荐.php是一门脚本语言,随着web的发展而发展起来,最早的时候大家还是混编html,php,完全没有工程项目的概念,(我们公 ...
- PHP — 用PHP实现一个双向队列
1.简介 deque,全名double-ended queue,是一种具有队列和栈的性质的数据结构.双端队列中的元素可以从两端弹出,其限定插入和删除操作在表的两端进行.双向队列(双端队列)就像是一个队 ...
- asp.net mvc NPOI 生成Excel文件
private string PushToDown(string addtime) { DataTable dt = _bCreateCode.PushtoExcel(addtime); //1.实例 ...
- NGUI系列教程四(自定义Atlas,Font)
今天我们来看一下怎么自定义NGUIAtlas,制作属于自己风格的UI.第一部分:自定义 Atlas1 . 首先我们要准备一些图标素材,也就是我们的UI素材,将其导入到unity工程中.2. 全选我们需 ...
- poj 3250 Bad Hair Day (单调栈)
http://poj.org/problem?id=3250 Bad Hair Day Time Limit: 2000MS Memory Limit: 65536K Total Submissi ...
- 判断数据库表字段是否为null值,采用is null
use UserCentergo select * from AccountDetails1.判断一个字段是否为null值,进行查询:update AccountDetails set Project ...
- php 数组指针相关函数current(),next(),prev(),end()
mixed current(array target_array) current()函数返回位于target_array数组当前指针位置的数组值.与next().prev().和end()函数不同, ...
- DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中
绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...
- 板级支持包(BSP)
板级支持包(BSP)是介于主板硬件和操作系统中驱动层程序之间的一层,一般认为它属于操作系统一部分,主要是实现对操作系统的支持,为上层的驱动程序提供访问硬件设备寄存器的函数包,使之能够更好的运行于硬件主 ...
- Android EditText如何去除边框添加下划线
(一)问题 之前的自定义EditText只能显示高度不超过屏幕高度的文本内容,继续增加内容会出现如下问题: (二)原因分析 下部(超出屏幕高度的部分)没有继续画线,也就是说横线没有画够,那么一定是循环 ...