html and css and js

一.

1.大致了解;

1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。

2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。

2.html

(1)HTML文件基本架构

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here(插入标题)</title>
</head>
<body>

HTML文档的主体部分,在此标志对之间可包含<p>……</p>、<h1>……</h1>、<br>、<hr>等众多的标志。

它们所定义的文本、图像等将会在浏览器的框内显示出来。

</body>
</html>

2.格式标记:

1.<p>……</p>

<p></p>标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。<p>标志还可以使用align属性,它用来说明对齐方式,语法如下所示。

<p align="参数"></p>

Align的参数可以是Left(左对齐)、Center(居中)和Right(右对齐)3个值中的任何一个。例如<p align="center"></p>表示标志对中的文本使用居中的对齐方式。

2.<br>

<br>是一个很简单的单标记指令,它没有结束标志,因为它用来创建一个回车换行,即标记文本换行。

3.<blockquote>……</blockquote>

在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。

4.<dl>……</dl><dt>……</dt><dd>……</dd>

<dl></dl>用来创建一个普通的列表;<dt></dt>用来创建列表中的上层项目;<dd></dd>用来创建列表中最下层项目,<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。

5.<ol>……</ol>、<ul>……</ul>、<li>……</li>

<ol></ol>标志对用来创建一个标有数字的列表。<ul></ul>标志对用来创建一个标有圆点的列表。<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用,此标志对用来创建一个列表项,若<li></li>放在<ol></ol>之间,则每个列表项加上一个数字;若放在<ul></ul>之间,则每个列表项加上一个圆点

6.<div>……</div>

<div></div>标志对用来排版大块HTML段落,也用于格式化表,此标志对的用法与<p></p>标志对非常相似,同样有align对齐方式属性。

(3)  文本标记

文本标记主要针对文本的属性设置进行标记说明,如斜体、黑体字、加下划线等。

1.<pre>……</pre>

<pre></pre>标志对用来对文本进行预处理操作。

2.<h1></h1>……<h6></h6>

HTML语言提供了一系列对文本中的标题进行操作的标志对:<h1></h1>、<h2></h2>、……、<h6></h6>。<h1></h1>是最大的标题,而<h6></h6>则是最小的标题。如果在HTML文档中需要输出标题文本,可以使用这6对标题标志对中的任何一对。

3.<b>……</b>、<i>……</i>、<u>……</u>

经常使用Word的人对这3个标志对一定很快就能掌握。<b></b>用来使文本以黑体字的形式输出;<i></i>用来使文本以斜体字的形式输出;<u></u>用来使文本以下加一划线的形式输出。

4.<tt>……</tt>、<cite>……</cite>、<em>……</em>、<strong>……</strong>

这些标志对的用法和上边的一样,差别只是在于输出的文本字体不太一样而已。<tt></tt>用来输出打字机风格字体的文本;<cite></cite>用来输出引用方式的字体,通常是斜体;<em></em>用来输出需要强调的文本(通常是斜体加黑体);<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。

5.<font>……</font>

<font></font>可以对输出文本的字体大小、颜色进行随意的改变。这些改变主要是通过对它的两个属性size和color的控制来实现的。size属性用来改变字体的大小,它可以取值为-1、1和+1;而color属性则用来改变文本的颜色,颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。

(3)  图像标记

再简单朴素的网页如果只有文字而没有图像将失去许多活力,图像在网页制作中是非常重要的一个方面,HTML语言也专门提供了<img>标志来处理图像的输出。

1.<img>

<img>标志并不是真正地把图像加入到HTML文档中,而是将标志对的src属性赋值。这个值是图像文件的文件名,其中包括路径,这个路径可以是相对路径,也可以是网址。所谓相对路径是指所要链接或嵌入到当前HTML文档的文件与当前文件的相对位置所形成的路径。

假如网站的HTML文件与图像文件(文件名假设是logo.gif)在同一个目录下,则可以将代码写成<img src="logo.gif">。假如网站的图像文件放在当前的HTML文档所在目录的一个子目录(子目录名假设是images)下,则代码应为<img src="images/logo.gif">。

%注意:通常图像文件都会放在网站中一个独立的目录里。必须注意一点,src属性在<img>标志中是必须赋值的,是标志中不可缺少的一部分。

除此之外,<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式,在上边已经提到过。border属性是图像的边框,可以取大于或者等于0的整数,默认单位是像素。width和height属性是图像的宽和高,默认单位也是像素。alt属性是当光标移动到图像上时显示的文本。

2.<hr>

<hr>标志是在HTML文档中加入一条水平线。它可以直接使用,具有size、color、width和noshade属性。

size用来设置水平线的厚度,而width用来设定水平线的宽度,默认单位是像素。noshade属性不用赋值,而是直接加入标志即可使用,它是用来加入一条没有阴影的水平线,不加入此属性水平线将有阴影。

时间: 2024-10-10 04:14:20

html and css and js的相关文章

html、css、js文件加载顺序及执行情况

今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然未弄明白,就在这时我找到了让我恍然大悟的一段话,如下: HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head>标签内有一个<link>标签引用外部CSS文件. 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件. 4. 浏览器继续载入html中&

JQuery 加载 CSS、JS 文件的方法有哪些?

在进行web前端开发(http://www.maiziedu.com/course/web-px/)时,我们可能会需要使用JQuery加载一个外部的css文件或者js文件,加载外部文件的方法有多种,下面具体看看各种加载方法 JS 方式加载 CSS.JS 文件: //加载 css 文件function includeCss(filename) { var head = document.getElementsByTagName('head')[0]; var link = document.cre

关于JAVA EE项目在WEB-INF目录下的jsp页面如何访问WebRoot中的CSS和JS文件

找了这么久资料,总算解决了 感谢博客园:http://www.cnblogs.com/xsht/p/5275081.html 感谢百度:http://zhidao.baidu.com/link?url=Vz4TlygvnMyYVj105bCuzkusjF0G5rM6opHvEzhcCaJK5s1gFUZ3PBgAWCNsfY1RmtPf4ZEo8EV_Gd7SYKV4S_ 在有Struts部署的Java EE环境中,我们一般把jsp页面写在WebRoot\WEB-INF\content 目录下,

js动态加载css和js

js动态加载css和js用处挺多,特意提出来 var loadUtil = { /* * 方法说明:[动态加载js文件css文件] * 使用方法:loadUtil.loadjscssfile("http://libs.baidu.com/jquery/1.9.1/jquery.js","js") * @param fileurl 文件路径, * @param filetype 文件类型,支持传入类型,js.css */ loadjscssfile:function(

Gulp解决发布线上文件(CSS和JS)缓存问题

本文的缘由:目前经常线上发布文件后要不断的刷新页面及过很长时间,页面上的CSS和JS文件才能生效,特别对于目前做微信商城的时候,微信内置的浏览器缓存非常的严重,之前我们经常是在文件后面加上时间戳的方式来解决线上发布后的缓存问题,但是在微信浏览器内并不生效:因此我们需要改变文件名的方式来解决缓存的问题,因此使用后缀名加上MD5一连串的字符串来解决缓存的问题: 我们先可以考虑这么一个功能,我在页面上引用css文件如下: ./css/xx.css ./js/xx.js 我现在想通过使用MD5重新命名c

(转)CSS与JS中的相对路径引用简单介绍

javascript和css文件中采用相对路径,其基准路径是完全不同的. 1.javascript引用资源(比如图片)相对路径是以宿主路径(被引用的网页比如你在首页index.php引用了某js文件,则index.php即为宿主)所处位置为基准. 2.css引用资源(比如图片)相对路径是以.css文件所处位置为基准! 大家在html中通常会导入一些外部的css.js文件,而其中一个比较容易被忽视的问题就是路径问题,有时候,我们在css.js中都有通过路径来引入一张图片的需求,当我们采用相对路径的

Django 的css和js压缩插件:django_compressor

今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用 我把它加载在我的base的HTML template中,原来未经压缩的css和js是: <link rel="stylesheet" href = "include/style.css" type="text/css"> <link rel="stylesheet" href = "include

用javascript预加载图片、css、js的方法研究

预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提升用户体验.在用到一些大图片展示的时候,预加载大图是很不错的方法,图片更快的被呈现给用户.不多说了,作为一个前端攻城师都懂的,下面分享我做的测试和得到的结果. 先说需要知道的服务器返回的status code:status-code: 200 - 客户端请求成功status-code: 304 -

asp.net使用httphandler打包多CSS或JS文件以加快页面加载速度

介绍 使用许多小得JS.CSS文件代替一个庞大的JS或CSS文件来让代码获得更好的可维 护性,这是一个很好的实践.但这样做反过来却损失了网站的性能.虽然你应该将你的Javascript代码写在小文件中并且将大的CSS文件分割到小文件 中,当一个浏览器请求那些JS以及CSS文件,它却将为每一个文件产生一个请求.每一个HTTP请求将导致从你的浏览器到服务器上的一次"往返",从响应 服务器到客户端浏览器之间的等待时间称之为"延时".因此,如果你有四个JS文件以及三个CSS

WEB前端开发学习----6.CSS 和 JS 在html的使用方法

CSS的导入总共有四大方法: 1. 行内式:直接在html标签元素内嵌入css样式(不推荐) 2.嵌入式:在html头部head部分内插入style声明 3.导入式:使用@import引用外部CSS文件方法:<style type="text/css">@import "mystyle.css";</style> 4.链接式:使用link来调用外部的css文件(推荐):<link href="mystyle.css"