前端学习之HTML第二天

 

                                       Html基础

• 复习昨天知识

• 单标签

◆注释标签   ctrl+/

◆水平线标签   <hr>

◆换行标签   <br>

• 双标签

◆段落标签    <p></p>

◆h1-h6  值只能取到6   h1在页面中只能出现一次。

◆文本标签  <font></font>

◆图片标签

<img src=”图片的来源”  alt=”替换文本” title=”提示文本”   width=”宽” height=”高”>

◆  <strong></strong>  <b></b>

    <em></em>   <i></i>

    <ins></ins>   <u></u>

    <del></del>    <s></s>

    ^上标   _下标

• 路径

◆相对路径

  ★文件和图片（html）在同一文件夹（目录）时，直接写文件名
             ★图片在上一级目录，..+/+文件名

  ★图片在下一级目录，文件夹名+/+文件名

◆绝对路径

• 超链接

<a href=”去往的路径”  title=”提示文本”  target=”_self  |   _blank”>链接文本</a>

◆锚链接

◆空链    <a href=”#”>

◆链接优化写法    <base target=”_blank”>

• 特殊字符

&nbsp;  空格

&lt;    <

&gt;    >

&copy; 

&yen;

• 列表

无序列表

<ul>
    <li></li>

    <li></li>

    <li></li>

</ul>

有序列表

<ol>
   <li></li>

   <li></li>

   <li></li>
</ol>

     自定义列表

<dl>
    <dt></dt>

    <dd></dd>

    <dd></dd>
</dl>

 

• 新知识

1. !+tab   html5的标签结构
2. 编码

Charset   编码

Ascll

Ansi

Unicode  

Gbk

Gb2312

Big5

Utf-8   通用字符集

    3.关键字

 

   4.网页描述

 

 

   5.网页重定向

 

 

   6.链接外部样式表

 

 

   7.设置icon图标

 

   8.表格

展示数据。 是对网页重构的一个有益补充。

<table>    表格
    <tr>       行
        <td></td> 列
        <td></td>
        <td></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”    背景颜色。

◆表格的标准结构

<table>
    <thead>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

 

 

  ◆表头和单元格合并

   ◆  表头  <caption></caption>

colspan=”2”  合并同一行上的单元格

rowspan=”2”  合并同一列上的单元格

 

 

◆表格标题、边框颜色、内容垂直对齐

   ◆表格标题 <th></th>用法和td一样

标题的文字自动加粗水平居中对齐

   ◆边框颜色

◆内容垂直对齐方式

Valign=”top   |  middle   |  bottom”

   9.表单：表单的作用是收集信息。

表单的组成

◆提示信息

◆表单控件

 

◆表单域

属性：action:处理信息

Method=”get | post”  

Get通过地址栏提供（传输）信息，安全性差。

Post 通过1.php来处理信息，安全性高。

◆文本输入框

maxlength="6"    限制输入字符长度

readonly=”readonly”  将输入框设置为只读状态（不能编辑）

disabled="disabled"  输入框未激活状态

name="username"   输入框的名称

value="大前端"     将输入框的内容传给处理文件

◆密码输入框

★注意：文本输入框的所有属性对密码输入框都有效。

◆单选框

★只有将name的值设置相同的时候，才能实现单选效果。

★checked=”checked” 设置默认选择项。

◆下拉列表

<select>
    <option>下拉列表选项</option>
    <option>下拉列表选项</option>
</select>

属性：

Multiple=”multiple”  将下拉列表设置为多选项

Selected=”selected”  设置默认选中项目

<optgroup></optgroup>   对下拉列表进行分组。

Label=””  分组名称。

◆多选框

 

Checked=”checked” 设置默认选中项

◆多行文本框

 

Cols  控制输入字符的长度。

Rows  控制输入的行数

◆ 文件上传控件

◆文件提交按钮

 

 

★：可以实现信息提交功能

◆普通按钮

★不能提交信息，配合JS使用。

◆图片按钮

★图片按钮可实现信息提交功能

◆重置按钮

★将信息重置到默认状态

◆表单信息分组

<fieldset></fieldset>    对表单信息分组

<legend></legend>      表单信息分组名称
html5补充表单控件

​​​​​​​

 

10.标签语义化

好的语义化的网站标准就是去掉样式表文件之后，结构依然很清晰。

标签语义化概念：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

-标签语义化意义：

       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）；

如果有疑问联系博主：y19970821ywty

要用到的工具，视频教程，关注公众号（Java学习之乐）直接免费获取：

​​​​​​​