首先推荐一个学习前端的好网站w3school,然后再去借一本Java Web开发就可以开始学前端了
HTML基本语法
<html> </html>
<head> </head>
<title> </title> 标题
<p></p>段落
<br/>换行
<h1></h1>标题文本
<align="center">在中心显示
<hr/>水平线
<!--注释-->
<bgcolor="yellow">改变背景颜色
<b></b>字体明显
<strong></strong>字体加粗
<big></big>字体加大
<em></em>字体变斜
<i></i>字体变斜
<sub></sub>字体向下显示
<sup></sup>字体向上显示
<pre></pre>预格式文本,保留了空格和换行
<code></code>,<kbd></kbd>,<tt></tt>,<var></var>常用于显示计算机/编程代码
<blockquote></blockquote>长引用,会插入换行和外边距
<q></q>短引用
<del></del>删除字效果
<ins></ins>插入字效果二.网络链接
①文字:<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>
②图片<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
知识点:
①点击打开新窗口
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
②点击在本页跳转到指定位置
<p>
<a href="#C3">查看 Chapter 4。</a>
</p>
<h2><a name="C3">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
③<a href="mailto:[email protected]?subject=Hello%20again">发送邮件</a>
应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。三.框架实例
①从左到右三个图像分别占权重百分比
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
②从上到下的三个图像分别占的权重
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
③混合框架
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
④加语句使框架不能被调整大小,之前的框架是可以调整大小
noresize="noresize" 四.表格实例
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。
每个表格数据由 td 标签开始。
①
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
②表头
<th>姓名</th>
③
<td></td>空格
④标题
<caption></caption>
⑤占多行
<th colspan="2">电话</th>
⑥单元格边距
cellpadding：
⑦单元格间距
cellspacing
⑧加背景
background=""
⑨frame属性
frame="box"|above|below|hsides|vsides
五.列表
①无序(.)
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
②有序(标号123)
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
③无序分为三种
type="disc"|circle|square
④有序分为五种
不写type|type="A"|"a"||"I"|"i"
⑤嵌套列表
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
⑥定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
六.HTML 表单与输入实例
①文本域
<form>
名：
<input type="text" name="firstname">
<br />
姓：
<input type="text" name="lastname">
</form>
②密码域
<input type="password" name="password">
③复选框
<input type="checkbox" name="Bike">
④单选按钮(选中该按钮会变为选中,其他变为非选中)
<input type="radio" checked="checked" name="Sex" value="male" />
⑤下拉选项框( 如果加这句就会默认选这项:selected="selected")
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
⑥文本域(一个框)
<textarea cols="30" rows="5">
领先的 Web 技术教程 - 全部免费
在w3school，你可以找到你所需要的所有的网站建设教程。
从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。
</textarea>
⑦按钮
<form>
<input type="button" value="Hello world!">
</form>
⑧加外边框
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
⑨跳转事件(如果您点击提交，表单数据会被发送到名为 demo_form.asp 的页面)
<form action="/demo/demo_form.asp">
First name:<br>
<input type="number" name="firstname" value="1312">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
⑩(如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面)
<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form>
扫描二维码关注公众号，回复：
9392132 查看本文章
七.图像实例
①插入图像(得是你自己目录下的图片)
<p>
一幅图像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
②来自网络的图片
<img src="http://www.w3school.com.cn/i/w3school_logo_white.gif" />
③图像对齐方式:(默认是bottom)
align="bottom"|"middle"|"top"
④浮动图像(图像在文字左侧还是右侧)
align ="right"|left
⑤调整图片大小
width="50" height="50"
⑥仅支持文本的浏览器无法显示图像
所以alt="xx"用来说明当图片无法显示时显示的文字
⑦图像映射(下例中的一张图片分为了三个链接,放在一个map中,然后对map中每一个area放一个链接,coord是指定大小,shape是指定每一个area的形状,target ="_blank"的意思是链接会打开一个新的窗口,如果不写这句就是说在当前的页面显示)
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>八.HTML样式实例
①在head中对body中的元素进行修饰
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
②没有下划线的链接
style="text-decoration:none"
③用link链接到一个外部样式表
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
④文档关键字
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
<body>
<p>本文档的 meta 属性描述了该文档和它的关键词。</p>
</body>
⑤重定向(五秒钟之后会跳到指定的界面)
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
九.HTML脚本(用Script)
①
<script type="text/javascript">
document.write("<h1>Hello World!</h1>")
</script>
②不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。
<noscript>Sorry, your browser does not support JavaScript!</noscript>
