前段时间学习了HTML和一些简单的CSS样式,自己也简单做了尝试,下面是我对HTML+CSS+Javascript的一些总结。
一.写网页的基本格式
1.下面是写一张html文件的基本格式:<html>
<head>...</head>
<body>...</body>
</html>
2.在head的标签里,也可以添加其他的一些标签,而绝大部分这些标签是不会作为内容显示在网页给读者看的,下面是可以用在head标签里的一些常用标签:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
(1)<title>标签很显眼,它会显示在浏览器的标题栏中,以此来告诉浏览者这个网页的主要内容。
就像我截的图一样“我的CSDN”这几个字就是写在<title>里的。 (2)<style>标签就是我们要在里面写的一些css样式,例如改变网页的字体啊字体颜色啊插入一些图片啊等等。 3.代码注释:
<!--注释部分-->
二.认识标签
接下来我把一些常用标签整理出来,列在下面。 1.<p>段落</p>
2.
<hx>文章标题,其中的x分为1~6,写的时候讲x改为1~6,并且从1开始字体逐级变小</hx>
3.
<em>该部分变为斜体</em>
4.
<strong>该部分变为粗体</strong>
5.
<span>只是为了能够设置css样式,没有任何其他意义</span>
6.
<q>引用别人的话,注意不能加“”因为它自动会帮你添加</q>
<blockquote>刚刚的标签适合短文本,这个适合长文本的引</blockquote>
7.在网页添加空格, 一个这个符号就是一个空格。
8.<hr/>水平横线 <br/>转行符
9.
<address>添加地址</address>
10.
<code>代码语言</code>
<pre>大段代码</pre>
11.新闻新列表,在<li>中显示的内容前面会出现一个这样的“
·”小点点
<ul>
<li>...</li>
<li>...</li>
</ul>
如果将<ul>改成<ol>,那么前面的小点点就会变成:“1.”,“2.”.......
12.有一个经常会用到的标签<div>,这个标签可以将一个网页划成一块一块的小块,下面的内容会介绍到盒子模型。
13.在网页上制作一个表格。
<table summary="简介表格内容"><!--该部分是不会在网页中显示的,table是一定要出现的可以不出现summary-->
<caption>...</caption><!--这里填的是表格的标题,会显示-->
<tbody><!--这个的作用是等表格全部加载出来了一起显示在网页上,如果没有这个,那么加载一点,表格显示一点-->
<tr><!--表格的一行-->
<th>...</th><!--表格的表头内容,这里有三个<th>表示有一行有三个表头-->
<th>...</th>
<th>...</th>
</tr>
<tr>
<td>...</td><!--这表示表格的列数-->
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
两点注意点:(1)不设置css样式时,表格是没有线的。
(2)表头在默认情况下显示的是粗体居中。
14.加上链接。
例如:
<a href="http://www.csdn" title="博客频道” target="_blank">博客</a>
博客是在网页上显示的内容,当点击博客两个字是会连接到csdn这个网站上去,当鼠标滑过博客两个字时会出现"博客频道“这四个字。
我特意截了一下效果图:
下一张是鼠标滑过时的效果图:
15.插入图片。
<img src="图片的地址” alt="图片下载失败后显示的内容" title="鼠标滑过该图片是显示的提示文本">
三.认识表单
在实际生活中,我们常常会看到一个页面让用户填写并提交,同样,我把一些常用的表单标签列出来。 1.所有我们要写的单选框、复选框、文本域等等,全部要写在<form>里面。<form method="传送方式" action="服务器文件">...</form>
2.当type="text"时,为文本输入框;当type="password"时,为密码输入框。
<input type="text/password" name="名称" value="文本" />
3.这是文本域。
<textarea rows="行数" cols="列数">会出现在文本域的提示文字</textarea>
4.当type="radio"时,为单选框;当type="checkbox"时,为复选框。要注意一点,单选框的name一定要相同才能起到单选的作用。
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
5.这是下拉列表框。
<select multiple="multiple">
<option value="向服务器提交的值” selected="selected">选项</option>
....
</select>
注意点:(1)multiple该部分可以不写,写了有什么作用呢,可以进行多选,本来下拉框你只能选一个,加了这个之后,在Windows操作系统中,按住control键可以进行多选;在 mac中,按住command键可以进行多选。
(2)select该部分是指,在没有选择的情况下,系统默认选择的选项。
6.这是提交键。
<input type="submit" value="提交">
7.这是重置键。
<input type="reset" value="重置">
8.这是<label>标签,它本身不会呈现效果,但是有了该标签,如果你在label标签内点击了该文本,会自动对焦到相应的表单控件,所以可以直接<label>...</label>用也可以但是没有此效果了。
<label for="控件id名称">
四 .实例介绍
我现在准备做一个表格,让客户填写,在没有css样式的情况下,那么这是一张毫无美感的网页,但是已经具备了基本的功能。代码如下:
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<body>
<div id="sign">
<h1>Sigh Up</h1></br>
<h2>Your basic info</h2>
<form>
<strong>Name:</strong>
<input type="text" name="myname" id="name"/></br>
</br>
<strong>Passward:</strong>
<input type="password" name="mypassward" id="passward"/></br>
</br>
<strong>Age:</strong></br>
<input type="radio" name="age" value="1" checked="checked"/>Under 13</br>
<input type="radio" name="age" value="2" />13 or older</br>
</br>
<strong>Your profile:</strong></br>
<textarea cols="50" rows="4" name="profile" id="profile"></textarea></br>
</br>
<strong>Job Role:</strong></br>
<select>
<option value="Front-End Developer" selected="selected" name="job">Front-End Developer</option>
<option value="Back-End Developer" name="job">Back-End Developer</option>
</select></br>
</br>
<strong>Interests:</strong></br>
<input type="checkbox" name="development" value="1" checked="checked">Development</br>
<input type="checkbox" name="design" value="2" >Design</br>
<input type="checkbox" name="business" value="3" >Business</br>
</br>
<input type="submit" name="Sign Up" value="Sign Up" id="sub" οnclick="abc()">
</input>
</form>
</div>
</body>
</body>
</html>
运行代码后的效果图:
更多推荐
制作一张简单的网页(HTML+CSS+JS)【1】
发布评论