2015年10月15日学习html基础笔记_html/css_WEB-ITnose

一个互联网公司的分工，小公司要求全能，拿一个项目全部做出来。大公司分工明细，主要步奏为策划人员策划方案，美工人员设计图有.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个标签。

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

单标记标签： 单标记标签中不能包含内容

---

水平线
换行

Meta标记的使用

多个关键字内容之间可以用“，”分割

设置描述：

设置作者：

设置字符集：或者utf-8

gb2312主要用于中文文字较多的，而utf-8是国标，在国际上使用较多。

设置页面定时跳转：

html与xhtml的区别，xhtml首先所有字母都小写，其次所有标记都要有关闭。

格式：内容标记>

不同标签具有不同的属性，所有标签都具备以下四个属性：

id：整个文档每个标签可以声明一个唯一的id号

style：为元素指定css样式

class：指定元素所属的类型

title:指定标签的弹出提示语

写代码前需要声明文档类型，否则会影响到css和javascript的解释执行，很多效果就会出不来。

文档类型声明：（所有工具都能生成这句话）

UTLIC “-//W3C//DTD XHTML1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

windows+d可以将桌面调出来。

meta data:元数据-描述数据的数据（视频1day02视频1的35分）

元数据，写在head里面title上面比较好，这样会告诉浏览器以下的文字内容以这个标准来解析。避免出现乱码问题。

转义字符：

正常来说是无法显示的，会被认为是告诉浏览器的语言，所以需要使用转义字符来显示到前台。

基本格式：&xxxx

> 是>

空格 是

& 是&

© 是©

? 是™

® 是&reg；

XHTML中不使用描述样式，都是使用CSS来控制样式，而在html中描述样式和描述语义是混杂的。例如和，前面是描述样式，后面是描述语义，在xhtml中描述样式标签就不可存在了。xhtml中，代替。

如今新网页中大多都是用的xhtml，为什么html却没被废弃呢？因为之前很多老网页没有修改过，都还是用的描述样式的方式，所以无法废弃，只是新的不再使用。

html元素类型，共有100多个元素类型，差不多各占一半，有的只能用于区块元素中，有的只能用于内联元素中。如果区块元素的用于内联元素中，那么效果就不会显示出来。

1. 区块元素(block)，必须自己独立占一行，例如
2. 内联元素(inline)，自己有多宽就占多宽，同时也与其他的处于同一行中。

内联标签：

区块标签：

到

---

• 描述标签：

  语义标签：

  到

  分区元素用于为元素分组，常用与页面布局。和

  块分区元素

  ，元素分组工具，用于内容分层和页面布局，需配合CSS使用

  行内分区元素需配合css和Js才有效果

  下标字：

  上标字：

  ctrl+d删除一整行

  ctrl+alt+↓复制一整行

  标题字在不同的浏览器默认字体高度、间距都是不一样，所以会存在兼容性的问题。要使用css来屏蔽这个问题。

  ,在html或者html5中“/”可以省略，但是在xhmtl中是不可以省略的。

  ---

  分隔线元素，创建一条水平线，常用属性为（size、width、align、color）

  通知浏览器此刻应该向服务器发起一个图片请求，src指定图片的URL,alt属性，如果图片无法显示则显示此文字来替代。

  html页面中可能用到资源：图片、css、js、另一个页面

  web开发用到的图片格式

  bmp:未经压缩的bit图，一般不用于web开发

  psd：ps的原始文档，支持层，页面中不直接使用

  tiff：出版印刷

  raw：太大

  jpeg：经过压缩的图片，保真度高，色彩丰富，适用于web中的照片，1024*768大压缩到100k甚至更小完全可以接受

  png：色彩没有jpg丰富，但是透明度支持的好，压缩比例大，适合于图标

  gif：色彩比较丰富，支持动画效果，也在一定程度支持透明度。

  链接的表现形式

  1. 目标文档为下载资源下载
  2. 电子邮件链接联系我们
  3. 返回页面顶部的空链接…
  4. 链接到javascriptjs功能

  页面布局的三种方式：

  table的使用主要用于显示批量的数据，但是作为页面布局已经过时。

  div+css现在的主流

  html5布局标签，未来的趋势

  蓝色的是内容所占区域，橙色的是间距，绿色的是填充。

  form表单，用于收集用户的数据，提交给服务器。有两个属性，action是指定表单数据的处理页面，必须是动态页面。还有input type。

  地址栏url中最多输入字符不能超过1024个字节。

  

  声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

  相关文章

  相关视频

  ---

  • html下拉菜单文字怎么变小
  • html5中元素能拉伸宽度吗
  • HTML里怎么设置thead表头的颜色
  • html5怎么创建跳转页尾超链接
  • 2015年10月15日学习html基础笔记_htm...

  • 依赖注入与服务容器01
  • mvc架构模式运行原理
  • 文件上传后端拦截03
  • 文件上传后端拦截02

  网友评论

  文明上网理性发言，请遵守 新闻评论服务协议

  我要评论

  

  立即提交

  专题推荐

  • 独孤九贱-php全栈开发教程

    全栈 170W+

    主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

  • 玉女心经-web前端开发教程

    入门 80W+

    主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

  • 天龙八部-实战开发教程

    实战 120W+

    主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

  作者信息

  

  认证0级讲师

  发布技术文章

  • 最新文章
  • 热门排行

  

  • html中怎么清除li黑点
  • html下拉菜单文字怎么变小
  • HTML里怎么设置thead表头的颜色
  • html的name和value是什么意思
  • html如何给背景图片设置透明度
  • html中怎么让列表横向排列
  • html5怎么创建跳转页尾超链接
  • 十分钟搞懂form标签中的GET和POST提交方式

  

  • 404 not found是什么意思
  • DOM是什么意思
  • url是什么意思？
  • 如何改变图片大小
  • html是什么
  • html如何创建电子邮件链接
  • HTML编辑器有哪些？最好用的4款HTML编辑器推荐
  • 如何制作一个简单的HTML登录页面（附代码）

  推荐视频教程

  javascript初级视频教程

  jquery 基础视频教程

  视频教程分类

  • php视频教程
  • html视频教程
  • css视频教程
  • JS视频教程
  • jQuery视频教程
  • mysql视频教程
  • Linux视频教程
  • Python视频教程

  • 网站首页
  • PHP视频
  • PHP实战
  • PHP代码
  • PHP手册
  • 词条
  • 手记
  • 编程词典
  • php培训

  ：公益在线php培训，帮助PHP学习者快速成长！

  Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作

    

  ");}}}}topobj_second.html(topsecond);topobj_minutes.html(topminutes);topobj_hours.html(tophours);topobj_day.html(topday);},1000);}$('.topimages .layui-icon-close').click(function(){$.cookie('phpcndatatopadshows',1,{expires:7});$('.topimages').hide();});