前端-----html（1）

基本结构

Doctype

Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档

<!DOCTYPE html>

bead标签

Meta

提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
1、页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>

2、刷新和跳转

< meta http-equiv=“Refresh” Content=“30″> <!--30秒钟刷新一次页面-->
< meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ /> <!--5秒钟后跳转新网页-->

3、关键词

< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
<!--给网址收录用的-->

4、描述

<meta name="description" content="这个是简介。" />
<!--这个是你网址的描述-->

5、X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

Title

网页头部信息

Link

css
< link rel="stylesheet" type="text/css" href="css/common.css" >
icon
<link rel="shortcut icon" href="image/favicon.ico">   <!--定义标签页图标-->

Style

在页面中写样式
例如：

< style type="text/css" > 
.bb{ 
background-color: red; 
} 
< /style>

Script

引进文件
< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写js代码
< script type="text/javascript" > ... </script >

 常用标签

分为块级标签，行内标签：

块级标签，div（白板），H系列（加大加粗），p标签（段落与段落之间有间距）

行内标签，span（白板）

标签之间可以嵌套

标签存在的意思，css操作，js操作

各种符号

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

p 和 br

p表示段落，默认段落之间是有间隔的！

br 是换行

H 标签

1-6标题从大到小排序

span标签

<span>asd</span>白板标签，方便css调用

div标签

<div>asd</div>白板标签，最常用

input标签

输入：

<form action="http://url">
     <input type="text" name="user">      name属性
     <input type="password" name="passwd">  name属性
     <input type="button" value="提交1">  按钮
     <input type="submit" value="提交2">  提交按钮，表单
</form>

以get方式提交数据，会把内容以拼接url的方式发送
post会把数据放在内容里传输过去，form标签默认以get方式发送数据

例子：
<!DOCTYPE html>  <!--规范化 对应关系-->
<html lang="en"> <!-- html标签，只能有一个-->
<head>           <!-- head标签，只能有一个-->
    <meta charset="UTF-8">   <!--指定字符集-->
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>  <!--标签名-->
</head>
<body>
<form action="https://www.sogou.com/web" method="get">
     <input type="text" name="query">
     <input type="submit" value="提交">
</form>
</body>
</html>

点击提交按钮会自动跳转

选择：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <form>
         <div>
             <p>请输入性别：</p>   <!--单选框测试-->
             男：<input type="radio" name="gender" value="men"/>  <!--name值设置为一样，可以限制为只能选择一个-->
             女：<input type="radio" name="gender" value="women"/>
             <p>爱好：</p>      <!--多选框测试-->
             足球：<input type="checkbox" name="favor" value="football"/>  <!--复选框用同一个name方便后台接收-->
             篮球：<input type="checkbox" name="favor" value="basketball" checked="checked"/> <!--checked可用于默认被选中-->
             网球：<input type="checkbox" name="favor" value="volleyball"/>
         </div>
         <input type="submit" value="提交" />
     </form>
</body>
</html>

上传文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <form enctype="multipart/form-data">  <!--文件上传依赖的属性-->
         <div>
             <p>上传文件：</p>      <!--上传文件测试-->
             <input type="file" name="fname">
         </div>
         <input type="submit" value="提交" />
     </form>
</body>
</html>

重置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <form enctype="multipart/form-data">  <!--文件上传依赖的属性-->
         <div>
             <p>上传文件：</p>      <!--上传文件测试-->
             <input type="file" name="fname">
         </div>　　
         <input type="submit" value="提交" />
         <input type="reset" value="重置" /> 重置所有填进去的表单内容
     </form>
</body>
</html>

textarea标签

<textarea>默认值</textarea>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <form>
         <textarea name="memo">默认值</textarea>
         <br>
         <input type="submit" value="提交" />
     </form>
</body>
</html>

下来框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <form>
         <div>
             <p>选择家乡：</p>
             <select name="city" size="4" multiple="multiple"> <!--size默认为1,multiple为支持多选，默认不支持-->
                 <option value="beijing">北京</option>
                 <option value="shanghai">上海</option>
                 <option value="nanjing">南京</option>
                 <option value="chongqing" selected="selected">重庆</option> <!--默认选择-->
             </select>
         </div>
         <input type="submit" value="提交" />
     </form>
</body>
</html>

a标签

1、target属性，_black表示在新的页面打开
<a href="http://www.baidu.com.cn" target="_blank">百度 </a>
2、锚，标签的id不允许重复
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <a href="#i1">第一章</a>
     <a href="#i2">第二章</a>
     <a href="#i3">第三章</a>
     <div id="i1" style="height:600px">第一章的内容</div>
     <div id="i2" style="height:600px">第二章的内容</div>
     <div id="i3" style="height:600px">第三章的内容</div>
</body>
</html>

img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <a href="http://www.baidu.com">
     <img src="2.JPG" title="图片" style="height: 200px;width: 200px;" alt="图片无法加载会显示这个">
     </a>
</body>
</html>
#图片用a标签包起来，可以实现点击图片跳转网址

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <ul>
         <li>sdfs</li>
         <li>sdfs</li>
     </ul>
     <ol>
         <li>werwer</li>
         <li>werwer</li>
     </ol>
</body>
</html>

表格

第一种实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=“Refresh” Content=“3″>
    <title>这是标题</title>
</head>
<body>
     <table border="1">
         <tr>
             <td>第一行，第一列</td>
             <td>第一行，第二列</td>
             <td>第一行，第三列</td>
         </tr>
         <tr>
             <td>第二行，第一列</td>
             <td>第二行，第二列</td>
             <td>第二行，第三列</td>
         </tr>
     </table>
</body>
</html>

第二种实现方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
      <thead>    <!--表头的定义-->
      <tr>
          <th>表头1</th>
          <th>表头2</th>
          <th>表头3</th>
          <th>表头4</th>
      </tr>
      </thead>
      <tbody>  <!--定义表的body-->
      <tr>
          <td rowspan="2">1</td>  <!--占用两个单元格，效果为行合并单元格-->
          <td>1</td>
          <td colspan="2">1</td> <!--占用两个单元格，效果为列合并单元格-->
      </tr>
      <tr>
          <td>1</td>
          <td>1</td>
          <td>1</td>
      </tr>

      </tbody>
</table>
</body>
</html>

fieldset标签和label标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <fieldset>
      <legend>登陆</legend>
      <label for="1">用户名：</label>   <!--for跟id搭配实现点击用户名也能自动切换到输入框-->
      <input id="1" type="text" name="user">
      <br />
      <label for="2">密码：</label>   <!--for跟id搭配实现点击用户名也能自动切换到输入框-->
      <input id="2" type="text" name="password">
   </fieldset>
</body>
</html>

实现效果如下：

posted @ 2019-03-12 09:36  jayonlau  阅读(248)  评论(0)  编辑  收藏  举报