前端- html 和css

  • html

HTML 指超文本标签语言。

HTML 是通向 WEB 技术世界的钥匙。

html属性:所有标签的通用属性

html事件:On...html5加了很多事件

html视频/音频:处理音视频

html画布:标签用于绘制图像(通过脚本,通常是 JavaScript)。 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

html文档类型:HTML5 ,HTML 4.01 / XHTML 1.0(含3种Transitional ,Strict, Frameset) ,XHTML 1.1

html颜色名:16进制数字代表颜色

html字符集:Unicode标准是通用的,html都支持utf-8,xml都支持utf-16

html ascII:字符集的一部分128个,用于在网络上传输数据。

html ISO-8859-1:一种字符集,ISO组织的,Unicode标准utf-8开头的200多个就是这个字符。

html符号:字符集的一部分,符号们

html url编码:用16进制表示ascII码,用于在浏览器和插件中显示非标准的字母和字符。方便传输,有时在地址栏看到的带%的

html语言代码:HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。 根据 W3C 推荐标准,您应该通过 <html> 标签中的 lang 属性对每张页面中的主要语言进行声明,比如:

<html lang="en">

...

</html>

http消息:当浏览器向web服务器请求服务时,可能会发生错误,从而有可能会返回下面的一系列状态消息:

1XX是信息 2XX是成功 3XX是重定向 4XX服务器返回客户端错误 5XX服务器返回服务器错误

http方法:http设计的目的是用来客户机与服务器之间的通信。两种常用方法,get(从指定的资源请求数据)和post(向指定的资源提交要被处理的数据)

  • xhtml

XHTML 是更严谨更纯净的 HTML 版本。

XHTML 与 HTML 4.01 几乎是相同的。

<p>

<a href="http://validator.w3.org/check?uri=referer"><img

src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>

</p>

  • HTML 5

HTML 5 是下一代的 HTML。

HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。

标签列表:http://www.w3school.com.cn/tags/html_ref_byfunc.asp

  • css

CSS 指层叠样式表(Cascading Style Sheets)。

CSS 同时控制整个站点的样式和布局。

通过与 XHTML 结合,CSS 可以帮助我们实行表现与结构分离的开发模式。实现改样式表,就能控制所有html元素(即标签)的样式。

最初的html,不包含样式标签,只有内容标签,后来netscape和ie都加入了样式标签,如字体,字体色等,这时很难把内容和样式分开管理,非盈利的W3C联盟推出了样式,各浏览器都支持,把样式方面的定义独立出来了。层叠指可对单独的html元素,定义多个样式,按优先级判断使用哪个样式;可用多个css,分别定义不同html元素的样式。

概述:

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

  • css3

最新一代样式表

  • tcp/ip

互联网通信协议

  • 建站手册:

{    拓展1网站构建

网站构建需要掌握的技术

html4.01

css

xhtml-html的未来。HTML5 是 HTML、XHTML 以及 HTML DOM 的新标准

xml

xslt。用于转换xml成浏览器可识别的xml

客户端脚本。例如JavaScript

服务器端脚本。ASP、PHP

使用sql管理数据

未来的新技术。静态转动态;新式浏览器

网站产品设计

设计网站需要严谨的思考和周全的计划

最重要的是了解你的受众用户

用户都是浏览者。一般只会停留几秒,最重要的要直接呈现。

少即是多。

导航。所有页面用导航串起来,保持整站结构清晰,以便访问者浏览。

下载速度。可用性方面的研究告诉我们,如果网页的下载时间超过7秒,大多数访问者会选择离开。

允许你的用户发言。可得到技术和知识各不相同的人们大量有益的反馈。

深入了解网站用户

您的用户所用的软件和硬件各不相同

最重要的是了解你的用户

他们使用什么显示器。分辨率支持1024*768,分辨率尺寸可变,以适应不同显示器。

他们使用什么浏览器。

他们安装了什么插件。你的网页使用的插件,用户有权限有么,用户们有么

怎样帮助残疾人士。这些用户也许,是也许,也许同样需要访问你的网站。这是蓝海???

用户都是浏览者。一般只用几秒时间看你的网页。

网站标准

按标准开发,更加容易面对多版本的各种技术。也更方便协作,大家遵循约定的规则。

网站验证

验证编写的网页是否符合标准,如html文件、css文件、xhtml文件、xml、wml(与html类似)是否符合对应标准。

万维网联盟

万维网联盟(W3C)创立了 WWW 标准。

W3C 的使命是通过发展规范、指导方针、软件以及工具,来尽展万维网潜能。

最重要的 W3C 标准是:

HTML

XHTML

CSS

XML

XSL

DOM

网站安全

此刻,您已向整个世界提供了您的 IP 地址。

请确保您没有同时提供对私人数据的访问权限。

您的 IP 地址是公共的

固定的 IP 地址要冒更大的风险。

浏览器信息

各种常用浏览器的信息

网站品质

使用最新的 WEB 标准。html4.01或用xml重新表达html4.01的xhtml。使用css1或2或3。通过web验证工具的验证网页。

增强网页的易读性。根据WAI(W3C发起的网页易读性倡议)的指导方针编写页面。即使残障人士,也能阅读。

html元素内容更合理。如title意义正确;改用h1标签就用h1,以免给搜索引擎带来困扰;doctype内容正确。

使用样式表注意事项。不在页面文件使用font标签,改到css,不至于改font需要改很多处,改css一处即可;不使用固定的字体尺寸,使用相对尺寸值,在调整浏览器显示比例时,就会跟随变化显示比例;不使用很小的默认字体尺寸;字体和背景颜色,不至于相同影响阅读。

字的可读性要好。不会看不清;不会字挤到一起,或间距过大;避免奇特的字体;少用斜体;另外为了在关闭浏览器图片显示的情况下,使用alt属性。

国际化。

语义网

一个电子商务网站

时间: 2024-10-21 11:42:46

前端- html 和css的相关文章

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

前端之DIV+CSS布局

刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识也不可逃避,之前总觉的前端是记忆的东西,遵循常规套路即可,总感觉繁琐,现在逼着自己学习了DIV+CSS,感觉是自己以前多虑了,什么东西只要你肯学,就不是问题,任何困难在坚持的态度下都会迎刃而解.现在来讲下前端的DIV+CSS: 1.之前的网页布局设计 以前我们依赖于强大的Dreamweaver图形化

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

【译】设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧

本文是我在众成翻译平台上认领并翻译的:设计师/后端工程师也能马上实践!前端设计(CSS设计)的技巧 ,正文内容如下: 大家好,我是2015年的应届毕业生小原,职位是前端工程师.不久前我加入了新业务的开发,负责前端的设计和实现.我想在回顾当时做法的同时,总结出一套能够轻松实现的前端编程设计方法. 什么是高灵活性的前端开发设计 不论开发什么样的业务,都可能面临界面样式没有完全确定,或者今后还需要增加或改变功能点的情况.因此代码开发与业务构思一样,都需要具备高度的灵活性,对变化频繁的前端来说更是如此.

前端开发规范-CSS规范

前端开发规范-CSS规范 1.通用约定 (1)代码组织 以组件为单位组织代码段: 制定一致的注释规范: 组件块和子组件块以及声明块之间使用一空行分隔,子组件块之间三空行分隔: 如果使用了多个 CSS 文件,将其按照组件而非页面的形式分拆,因为页面会被重组,而组件只会被移动: 良好的注释是非常重要的.请留出时间来描述组件(component)的工作方式.局限性和构建它们的方法.不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的. 提示:通过配置编辑器,可以提供快捷键来输出一致认可的注释模

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

常用前端布局,CSS技巧介绍

常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. 在这个地方可以使用padding来实现,首先,元素的高度=height+padding*2+border*2;所以我们可以将widht设置为0, 然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的) width: 50%; height: 0;

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属