前端学习之html Day02

1.关键字

在头部写,关键字有利于搜索引擎高效找到内容

    <meta name="keywords" content="高薪,高薪">

2.网页描述

<meta name="description" content="2019,据说是顺利地一年">

在这里插入图片描述

3. 网页重定向

 <!--网页重定项-->
    <meta http-equiv="refresh" content="5; http://www.baidu.com">
   

5秒钟过后跳转到指定页面

4. 链接外部样式

<!--链接外部样式表-->
    <link  rel="stylesheet" href="1.css" >

5.设置icon图标

<!--设置icon图标-->
    <link rel="stylesheet" href="1.ico">

打开某网页的小图标

6.表格

<table>    			 表格
    <tr>			行
        <td></td> 	列
        <td></td>
        <td></td>
    </tr>
</table>
<table border="1" width="500" height="300" cellspacing="0" cellpadding="10"
align="center" bgcolor="red">
    <tr align="center">
        <td>小王</td>
        <td>女</td>
        <td>13</td>
    </tr>
    <tr align="center">
        <td>小张</td>
        <td>女</td>
        <td>13</td>
    </tr>
</table>

◆属性:
Border=”1” 边框
Width=”500” 宽度
Height=”300” 高
cellspacing=”2” 单元格与单元格的距离
cellpadding=”2” 内容距边框的距离
align=”left | right | center”
如果直接给表格用align=”center” 表格居中
如果给tr或者td使用 ,tr或者td内容居中。

bgcolor=”red” 背景颜色。

**6.1表格的标准结构

<table>
    <thead>     头
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </thead>
    <tbody>   主题
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
    <tfoot>   脚
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tfoot>
</table>

6.2表头和单元格的合并

◆ 表头
colspan=”2” 合并同一行上的单元格
rowspan=”2” 合并同一列上的单元格

<table border="1" width="500" height="300" cellspacing="0" cellpadding="10"
align="center" bgcolor="red">
   <caption>表头</caption>
    <tr align="center">
        <td colspan="2">小王 女 </td>
        <!--<td >女</td>-->
        <td rowspan="3">13</td>
    </tr>
    <tr align="center">
        <td>小张</td>
        <td>女</td>
        <!--<td>13</td>-->
    </tr>
</table>

6.3表格标题,边框颜色,内容垂直对齐

◆表格标题 用法和td一样
标题的文字自动加粗水平居中对齐

<tr >
        <th>小张</th>
        <th>女</th>
        <th>13</th>
    </tr>

◆边框颜色
bordercolor=“red”

◆内容垂直对齐方式

    <td valign="middle">小穆</td>

7.表单

表单的作用是收集信息。
表单的组成
◆提示信息
◆表单控件
◆表单域

写在body内

<form action="1.php" method="post">

Get通过地址栏提供(传输)信息,安全性差。
Post 通过1.php来处理信息,安全性高。
◆文本输入框

用户名: <input type="text" maxlength="6" readonly="readonly"
disabled="disabled" name="username" value="请输入...">

maxlength=“6” 限制输入字符长度
readonly=”readonly” 将输入框设置为只读状态(不能编辑)
disabled=“disabled” 输入框未激活状态
name=“username” 输入框的名称
value=“请输入…” 将输入框的内容传给处理文件
◆密码输入框

<!--密码输入框-->
密码:<input type="password" name="pwd">

★注意:文本输入框的所有属性对密码输入框都有效
◆单选框

<!--单选框-->
<input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender" >女

★只有将name的值设置相同的时候,才能实现单选效果。
★checked=”checked” 设置默认选择项。
◆下拉列表

<select mutiple="mutiple">
    <option >陕西</option>
    <option >山西</option>
    <option selected="selected">北京</option>
</select>

<optgroup label="陕西省">
    <option>西安</option>
    <option>渭南</option>
    <option>铜川</option>
    <option>榆林</option>
</optgroup>
<!--<optgroup></optgroup>   对下拉列表进行分组。-->

属性:
Multiple=”multiple” 将下拉列表设置为多选项
Selected=”selected” 设置默认选中项目

对下拉列表进行分组。 label=" " 分组名称 ◆多行文本框
<textarea cols="30" rows="10"></textarea>

Cols 控制输入字符的长度。
Rows 控制输入的行数
◆文件上传控件
◆文件提交按钮
★:可以实现信息提交功能
◆普通按钮
★图片按钮可实现信息提交功能
◆图片按钮
◆重置按钮

<!--文件上传控件-->
<input type="file">

<!--文件提交按钮-->
<input type="submit">

<!--普通按钮-->
<input type="button" value="普通按钮">

<!--图片按钮-->
<input type="image" src="1.jpg">

<!--重置按钮-->
<input type="reset">

表单信息分组

<form action="1.php" method="post">
    <fieldset>
        <legend>分组信息</legend>
    </fieldset>
</form>
对表单信息分组 表单信息分组名称

8.标签语义化

好的语义化的网站标准就是去掉样式表文件之后,结构依然很清晰。
标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)

-标签语义化意义:
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);

补充:
上标,下标

<!--上标-->
2 <sup>3</sup>

<!--下标-->
h <sub>2</sub>o   

&nbsp;  空格
&lt;    <
&gt;    >

猜你喜欢

转载自blog.csdn.net/qq_40345107/article/details/87887294