文章标题

星空守候

于 2016-09-12 18:34:14 发布

阅读量362

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_26764181/article/details/52515944

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

制作第一个网页

<!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>

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

<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 action="save.php" method="post" >
    <label>性别:</label>
    <label>男</label>
    <input type="radio" value="1"  name="gender" />
    <label>女</label>
    <input type="radio" value="2"  name="gender" />
</form>
</body>
</html>

使用下拉列表框，节省空间

<!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>
    <select>
      <option value="看书">看书</option>
      <option value="旅游"  selected="selected">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

使用下拉列表框进行多选

<!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>
    <select multiple="multiple">
      <option value="看书">看书</option>
      <option value="旅游">旅游</option>
      <option value="运动">运动</option>
      <option value="购物">购物</option>
    </select>
</form>
</body>
</html>

form表单中的label标签

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>
<body>
<form>
   <label for="run">慢跑</label>
  <input type="checkbox"  id="run" />
  <br />
  <label for="mountanin">登山</label>
  <input type="checkbox"  id="mountanin" />
  <br />
  <label for="bask">篮球</label>
  <input type="checkbox"  id="bask" />
</form>
</body>
</html>

星空守候

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
文章标题

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

扫一扫