2015年10月15日学习html基础笔记

时间 2019-11-25

标签 2015年 10月 15日学习 html 基础笔记栏目 HTML 繁體版

原文原文链接

一个互联网公司的分工，小公司要求全能，拿一个项目所有作出来。大公司分工明细，主要步奏为策划人员策划方案，美工人员设计图有.psd.rp等，前端人员作静态页面，后台人员获取数据java php .net。不管是处于那块的人员，都要对于其余的有所了解。javascript

www网页服务，FTP文件上传下载，telnet远程控制php

Apache2.2服务器css

windows+r=运行，输入services.msc调出服务控制台html

本地：127.0.0.1，访问本身本地服务器，须要使用Apache架起服务器以后，将文件放置到htdocs文件夹当中。安装Apache时要注意不能有中文文字不能有空格，能够直接安装到C盘下，不要安装到默认文件夹中。前端

主要使用的测试浏览器有IE、firefox、chrome、opera、safarihtml5

服务器端技术与客户端技术java

常见的服务器端技术（运行在服务器上）：web

JSP/PHP/ASPXchrome

（前端）常见的客户端技术（运行在浏览器上）：windows

HTML/CSS/JS/SWF（flash）

计算机语言，HTML与JAVA/C/PHP不一样，一门语言有三种结构，顺序执行、循环执行、选择执行。HTML里没有循环、选择等基本结构，只有纯文本和52个标签。

双标记标签：<标签名>文本</标签名>

单标记标签：<标签名/> 单标记标签中不能包含内容

<hr/>水平线<br/>换行

Meta标记的使用

设置描述：<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分）

转义字符：

<>正常来讲是没法显示的，会被认为是告诉浏览器的语言，因此须要使用转义字符来显示到前台。

基本格式：&xxxx

< 是<

> 是>

空格是 

& 是&

™ 是™

® 是&reg；

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个字节。