2 html基础

原创 2018年04月17日 16:35:51

Meta标签介绍

meta 的属性有两种:namehttp- equiv

 name属性主要用于描述网页,对应于content(网页内容)         

 1<meta name="generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等;

2<meta name="keywords" contect="">向搜索引擎说明你的网页的关键词;

3<meta name="description" contect="">告诉搜索引擎你的站点的主要内容;

4<meta name="Author"  contect="你的姓名">告诉搜索引擎你的站点的制作的作者;

5<meta  name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 

其中的属性说明如下:

  设定为all:文件将被检索,且页面上的链接可以被查询;

  设定为none:文件将不被检索,且页面上的链接不可以被查询;

  设定为index:文件将被检索;

  设定为follow:页面上的链接可以被查询;

  设定为noindex:文件将不被检索,但页面上的链接可以被查询;

  设定为nofollow:文件将不被检索,页面上的链接可以被查询。

http-equiv属性 

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <!--网页重定向-->

<meta http-equiv="Refresh"content="5;url=http://www.w3school.com.cn" />

link标签:

  1:引用外部css

  2:   引用title图片  (icon)     例如: <link  rel="icon"  href="1.icon">

字符集(charset):

utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbkgb2312
gb2312 简单中文
GBK包含全部中文字符  繁体
BIG5   繁体中文


html表格

1.<table>
<table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格,用<td>...</td>标签定义。
2.<tr>
表格行用<tr>标签定义,由单元格构成。多个行结合在一起就构成一个表格,这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示,并用相应的</tr> 结束
3.<td>
表格的每一行又有若干表格单元格,用<td>...</td>标签表示。TD"表格数据( Table Data)”的英文缩写。<td>标签定义一个列,嵌套于<tr>标签内。
border属性是最常用的属性,可用于定义表格的单元格和结构。该属性指定边框的厚度,如果其值设置为零(0),则不显示边框


创建表格的基本语法:
                                    <table>
                                           <
tr>
                                                   <td> 
单元格内容 </td>      
                                             </tr>                    
                                    
</table>
创建表格时,一般情况下分3步:
第一步:创建表格标签< table>…</table>
第二步:在表格标签table>…</table>里创建行标签<tr>...</tr>,可以有多行。
第三步:在行标签<tr>...</tr>里创建单元格标签<td>...</td>,可以有多个单元格。



表格的属性:填充属性和间距属性




属性名

含义

常用属性值

Border

设置边框 默认为0 没有边框

单位为px  像素值

Cellspacing

设置单元格与单元格之间的距离

单位为px 像素值

默认2px

Cellpadding

设置文字与单元格之间的距离

默认1px

Width

设置表格的宽度

单位px

Height

设置表格高度

单位px

Align

设置表格在网页中的对齐方式

Left       

Right     

Center   居中

bgcolor

设置背景颜色

white ,red,green


caption元素定义表格标题
caption标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。


练习:课程表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="课程表"/>
    <meta name="keywords" content="课程表"/>
    <link rel="icon" href="image/favicon.ico"/>
    <title>课程表</title>
</head>
<body>


<table bgcolor="green" cellspacing="1" width="300" height="200" align="center">
    <caption>课程表</caption>
    <tr bgcolor="white" align="center">
        <th colspan="2"></th>
        <!--<th></th>-->
        <th>星期一</th>
        <th>星期二</th>
        <th>星期三</th>
        <th>星期四</th>
        <th>星期五</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td rowspan="2" width="45" style="font-size: 90%">上午</td>
        <td width="30">1</td>
        <td style="font-size: 90%">语文</td>
        <td style="font-size: 90%">数学</td>
        <td style="font-size: 90%">物理</td>
        <td style="font-size: 90%">化学</td>
        <td style="font-size: 90%">生物</td>
    </tr>
    <tr bgcolor="white" align="center">
        <!--<td></td>-->
        <td style="font-size: 90%">2</td>
        <td style="font-size: 90%">体育</td>
        <td style="font-size: 90%">音乐</td>
        <td style="font-size: 90%">几何</td>
        <td style="font-size: 90%">画画</td>
        <td style="font-size: 90%">舞蹈</td>
    </tr>
    <tr bgcolor="white" align="center">
        <td rowspan="2" style="font-size: 90%">下午</td>
        <td style="font-size: 90%">1</td>
        <td style="font-size: 90%">体育</td>
        <td style="font-size: 90%">画画</td>
        <td style="font-size: 90%">音乐</td>
        <td style="font-size: 90%">语文</td>
        <td style="font-size: 90%">音乐</td>
    </tr>
    <tr bgcolor="white" align="center">
        <!--<td></td>-->
        <td style="font-size: 90%">2</td>
        <td style="font-size: 90%">英语</td>
        <td style="font-size: 90%">舞蹈</td>
        <td style="font-size: 90%">体育</td>
        <td style="font-size: 90%">唱歌</td>
        <td style="font-size: 90%">体育</td>
    </tr>
</table>

</body>
</html>

效果:

 form表单

-常见的表单:银行开户,学籍录入,网上注册信息等等。。

表单的作用:主要负责数据采集功能。

对于表单构成中的表单控件、提示信息和表单域,初学者可能比较难理解,对他们的具体解释如下
   表单控件:包含了具体的表单功能项,如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
   提示信息:一个表单中通常还需要包含一些说明性的文字,提示用户进行填写和操作。
   表单域:他相当于一个容器,用来容纳所有的表单控件和提示信息,可以通过他定义处理表单数据所用程序的url地址,以及数据         提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。

语法:

Name :定义表单的名称
Method: 定义表单结果从浏览器传送到服务器的方式,默认参数为:get
Action :用来指定表单处理程序的位置(服务器端脚本处理程序) 
Fieldset:把表单分组
Legend:分组名称


input控件

在上面的语法中,<input/>标记为单标记,type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。除了type属性之外,<input />标记还可以定义很多其他的属性,其常用属性如下表所示。


textarea控件
如果需要输入大量的信息,就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框,其基本语法格式如下:
Cols:相当于宽度
Rows:相当于高度

select控件
HTML中,要想制作如下图所示的下拉菜单,就需要使用select控件

  


值得一提的是,在HTML中,可以为<select><option>标记定义属性,以改变下拉菜单的外观显示效果,具体如下表所示。

组合表单
<fieldset> 标签没有必需的或唯一的属性

<legend> 


练习:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="description" content="用户注册"/>
    <link rel="icon" href="image/favicon.ico"/>
    <title>信息注册</title>
</head>
<body>


<form action="1.php" method="post" enctype="text/plain" style="width: 500px">

    <fieldset>

     <legend>信息注册</legend>
     <!--input为单标签-->
     <!--创建文本域-->
     用户名:<input type="text" name="username" placeholder="请输入用户名">
     <br/>
     <br/>
     <!--密码域-->
     密   码:<input type="password" name="pwd" maxlength="5"  placeholder="请输入密码">
     <br/>
     <br/>

        籍贯:
        <select name="province">

            <option>北京市</option>
            <option>河北省</option>
            <option>山东</option>
            <option>山西</option>

        </select>

        <select name="city">

            <option>石家庄</option>
            <option>张家口</option>
            <option>西安</option>
            <option>济南</option>

        </select>

        <select name="area">

            <option>朝阳区</option>
            <option>裕华区</option>
            <option>东城区</option>
            <option>昌平区</option>

        </select>

      <br/>
      <br/>
      性别:
      <!--单选框-->
      男:<input type="radio" name="gender" value="boy">
      女:<input type="radio" name="gender" value="girl" checked="checked">
      <br/>
      <br/>

      爱好:
      <!--复选框-->
      打篮球<input type="checkbox" name="ball">
      打游戏<input type="checkbox" name="game">
      逛街:<input type="checkbox" name="shopping">
      抽烟、喝酒、烫头<input type="checkbox" name="bar">
      <br/>
      <br/>

      头像:
      <!--文件-->
      <input type="file"/>
      <br/>
      <br/>
      <!--文本域-->
      自我介绍:
      <textarea name="description" cols="50" rows="6" ></textarea>
      <br/>
      <br/>
        
        
     <!--submit-->
     <input type="submit"/>
     <input type="reset"/>

    </fieldset>


</form>

</body>
</html>


标签语义化

-标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

-标签语义化意义:

       1:网页结构合理

          2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语                         义你的网页内容自然容易被搜索引擎抓取;

          3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)

          4:便于团队开发和维护


1:尽可能少的使用无语义的标签divspan

2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;

3:不要使用纯样式标签,如:bfontu等,改用css设置。

4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);




JSP动态网站开发 第1章 JSP使用基础第2章 HTML与CSS第3章 JavaScript脚本编程…………

  • 2009年09月10日 20:35
  • 1.97MB
  • 下载

【HTML 基础练习】

HTML 不同的标记间似乎叠加使用,添加的背景或音频和源代码放在一起时不用 + 路径效果图片 :实现代码 使用FONT标记 ...
  • WYK1823376647
  • WYK1823376647
  • 2017-04-10 19:53:56
  • 249

html入门基础2

  • 2008年03月13日 16:55
  • 327KB
  • 下载

Web综合应用实验(html css javascript)

default_order function panduan(str){         if(str==""||str==null){             return 0;    ...
  • qq_33609401
  • qq_33609401
  • 2016-11-15 22:45:26
  • 713

html基础试题

1.请描述一个网页从开始请求到最终显示的完整过程? 1).在浏览器中输入网址; 2).发送至DNS服务器并获得域名对应的WEB服务器的IP地址; 3).与WEB服务器简历TCP连接; 4).浏...
  • sinat_30975247
  • sinat_30975247
  • 2015-11-20 21:01:23
  • 1907

零基础HTML学习历程 (一) 初识HTML

首先我是拿着这本书开始我的HTML入门之旅的(如下图) 对这本书的评价在网上都有,我就不多说了哈。 先给HTML下个含义:HTML是超文本标记语言(HyperText ...
  • feizaoSYUACM
  • feizaoSYUACM
  • 2016-10-27 08:59:42
  • 789

html基础html基础html基础html基础

  • 2008年11月14日 22:39
  • 1.96MB
  • 下载

html基础学习例子.part2

  • 2010年02月24日 22:20
  • 15.49MB
  • 下载

html基础学习例子.part1

  • 2010年02月24日 22:45
  • 15.51MB
  • 下载

HTML 基础控件介绍

1.标签 标签用于搜集用户信息。 根据不同的 type 属性值,输入字段拥有很多种形式。可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 type属性如下:type= text:文本区...
  • a359680405
  • a359680405
  • 2015-04-27 15:20:04
  • 1938
收藏助手
不良信息举报
您举报文章:2 html基础
举报原因:
原因补充:

(最多只允许输入30个字)