2 html基础

Meta标签介绍

meta 的属性有两种：name和http- 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="你的姓名">告诉搜索引擎你的站点的制作的作者；

其中的属性说明如下：

　　设定为all：文件将被检索，且页面上的链接可以被查询；

扫描二维码关注公众号，回复： 533105 查看本文章

　　设定为none：文件将不被检索，且页面上的链接不可以被查询；

　　设定为index：文件将被检索；

　　设定为follow：页面上的链接可以被查询；

　　设定为noindex：文件将不被检索，但页面上的链接可以被查询；

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

http-equiv属性

link标签：

1：引用外部css

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

字符集（charset）:

− utf-8 是目前最常用的字符集编码方式，常用的字符集编码方式还有 gbk 和 gb2312

− 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 > 标签没有必需的或唯一的属性

练习：

<!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：尽可能少的使用无语义的标签div和span；

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

3：不要使用纯样式标签，如：b、font、u等，改用css设置。

4：需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）；

猜你喜欢