文章标题

来源：互联网发布：mysql 0xc000007b 编辑：程序博客网时间：2024/06/04 19:51

制作第一个网页

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>制作我的第一个网页</title>    </head>    <body>        <h1>Hello World</h1>    </body></html>

Html和CSS的关系

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>Html和CSS的关系</title>        <style type="text/css">        h1{    font-size:12px;    color:#930;text-align:center;        }        </style>    </head>    <body>        <h1>Hello World!</h1>    </body></html>

代码注释

代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语法：

Html标签

h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。
是最高的等级。
就是标题标签，它在网页上的代码写成<h1>标题文本</h1>
是段落标签。它在网页上的代码写成 <p>段落文本</p>
img标签显示网页上的图片，它在网页上的代码写成
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
默认用斜体表示， <em>需要强调的文本</em>
用粗体表示,<strong>需要强调的文本</strong>
标签是没有语义的，它是为了设置单独的样式用的<span>文本</span>
标签，短文本引用<q>引用文本</q>
标签，长文本引用<blockquote>引用文本</blockquote>
标签分行显示文本<br />
添加空格  
标签，添加水平横线<hr />
标签，为网页加入地址信息<address>联系地址信息</address>

标签,加入一行代码<code>代码语言</code>

标签,加入多行代码<pre>语言代码段</pre>

标签，链接到另一个页面
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
在新窗口中打开链接<a href="目标网址" target="_blank">click here!</a>

// 链接Email地址,如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。<a href="mailto:yy@mail.com ?subject="观了不起的盖茨比有感"&body="你好，对此评论有些想法" ">发送邮件给我</a>

使用ul，添加列表(无序)

<ul>  <li>信息</li>  <li>信息</li>   ......</ul>

使用ol,添加列表（有序,序号为数字）

<ol>   <li>信息</li>   <li>信息</li>   ......</ol>

标签的作用就相当于一个容器。<div>…</div>
给div命名<div id="版块名称">…</div>
table标签，绘制表格，其四个元素table、tbody、tr、th、td
1、
…：整个表格以标记开始、标记结束。
2、…：当表格内容非常多时，表格会下载一点显示一点，但如果加上标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、…：表格的一行，所以有几对tr 表格就有几行。
4、…：表格的一个单元格，一行中包含几对…，说明一行中就有几列。
5、…：表格的头部的一个单元格，表格表头。
6、表格中列的个数，取决于一行中数据单元格的个数

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>认识table表标签</title><!--为表格添加边框--><style type="text/css">table tr td,th{    border:1px solid #000;}</style></head><body><table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量"><!--caption标签，为表格添加标题和摘要-->  <caption>2012年到2013年库存记录</caption>  <tr>    <th>产品名称 </th>    <th>品牌 </th>    <th>库存量（个） </th>    <th>入库时间 </th>  </tr>  <tr>    <td>耳机 </td>    <td>联想 </td>    <td>500</td>    <td>2013-1-2</td>  </tr>  <tr>    <td>U盘 </td>    <td>金士顿 </td>    <td>120</td>    <td>2013-8-10</td>  </tr>  <tr>    <td>U盘 </td>    <td>爱国者 </td>    <td>133</td>    <td>2013-3-25</td>  </tr></table></body></html>

使用表单标签，与用户交互

<input type="radio/checkbox" value="值" name="名称" checked="checked"/>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>表单标签</title></head><body><form method="post" action="save.php">      <label for="username">用户名:</label>      <input type="text"  name="username" id="username" value="" />      <label for="pass">密码:</label>      <input type="password"  name="pass" id="pass" value="" />          <input type="submit" value="确定"  name="submit" />      <input type="reset" value="重置" name="reset" /></form>  </body></html>

文本输入框、密码输入框

<form> <input type="text/password" name="名称" value="文本" /> </form>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>文本输入框、密码输入框</title></head><body><form  method="post" action="save.php">    账户:     <input type="text" name="myName">    <br>    密码: <input type="password" name="myName"></form> </body></html>

文本域，支持多行文本输入

<textarea rows="行数" cols="列数">文本</textarea>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>文本域</title></head><body><form action="save.php" method="post" >    <label>个人简介：</label>    <textarea cols="50" rows="10">在这里输入内容...</textarea>    <input type="submit" value="确定"  name="submit" />    <input type="reset" value="重置"  name="reset" /></form> </body></html>

使用单选框、复选框，让用户选择