认识HTML

一、HTML基础

• HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言

（一）标题

• HTML 标题是通过<h1> - <h6> 标签来定义的。

<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>

（二）段落

• HTML段落是通过标签<p>来定义的。

<p>这是一个段落</p>

（三）链接

• HTML 链接是通过标签 <a> 来定义的。

<a>这是通往百度的链接</a>

<a href="https://www.baidu.com">这是通往百度的链接</a>

（四）图像

• HTML 图像是通过标签 <img> 来定义的。

<img src="/images/logo.png" width="200" height="100" />

<img src="image/1.jpg">

二、HTML属性

• HTML 元素可以设置属性
• 属性可以在元素中添加附加信息
• 属性一般描述于开始标签
• 属性总是以名称/值对的形式出现，比如：name="value"。

属性	描述
id	id它是唯一的
class	class可以同时存在多个

（一）HTML文本格式化

<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字

（二）HTML样式

1、背景颜色

<h1 style="background-color: #ff359b">这是一个标题</h1>
<p style="background-color: #00d2ff">这是一个段落</p>

2、字体样式

<h1 style="font-family: KaiTi">这是一个标题</h1>

• 通用：宋体 SimSun

• 黑体 SimHei

• 微软雅黑 Microsoft YaHei

• 微软正黑体 Microsoft JhengHei

• 新宋体 NSimSun

• 新细明体 PMingLiU

• 细明体 MingLiU

• 标楷体 DFKai-SB

• 仿宋 FangSong

• 楷体 KaiTi

• 仿宋_GB2312 FangSong_GB2312

• 楷体_GB2312 KaiTi_GB2312

3、字体颜色

<h1 style="color:red">这是标题。</h1>

 

4、字体大小

<p style="font-size: 18px">这是一个段落</p>

• 同时修改样式，颜色，大小

<p style="font-family: KaiTi;color:red;font-size: 18px">这是一个段落</p>

5、文本对齐

• 使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式。

 <h1 style="text-align: center">这是一个标题</h1>

三、HTML表格

• 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。
• 字母 td 指表格数据（table data），即数据单元格的内容。

（一）表格实例

<h1>一列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
      </tr>
    </table>

<h1>一行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
    </table>

<h1>两行三列:</h1>
    <table border="5">
      <tr>
        <td>100</td>
        <td>200</td>
        <td>300</td>
      </tr>
      <tr>
        <td>400</td>
        <td>500</td>
        <td>600</td>
      </tr>
</table>

如图：

（二）表格表头

• 表格的表头使用 <th> 标签进行定义。

<h1>个人兴趣爱好</h1>
<table border="4">
    <caption style="font-size: 150%;font-family: KAITI;color: red">全民制作人</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>唱歌</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>男</td>
        <td>跳舞</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>男</td>
        <td>rap</td>
    </tr>
</table>

 如图：

四、HTML列表

• HTML 支持有序、无序列表

（一）有序列表

• 有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
• 列表项使用数字来标记。

<h3>有序列表</h3>
    <ol>
        <li>有序列表第一行</li>
        <li>有序列表第二行</li>
        <li>有序列表第三行</li>
        <li>有序列表第四行</li>
    </ol>

如图：

（二）无序列表

• 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

  无序列表使用 <ul> 标签。

<h3>无序列表</h3>
    <ul>
        <li>无序列表第一行</li>
        <li>无序列表第二行</li>
        <li>无序列表第三行</li>
        <li>无序列表第四行</li>
    </ul>

如图：

五、HTML区块

• HTML 可以通过 <div> 和 <span>将元素组合起来。

<div style="width: 500px">
    <div style="background-color: #ff359b;width: 500px;height: 50px"><h1 style="text-align: center">这是我当前的标题</h1></div>
    <div style="background-color: darkorange;height: 250px;width: 100px;float: left;">
        <b style="font-size: 20px">语文成绩</b><br>
        <b style="font-size: 20px">数学成绩</b><br>
        <b style="font-size: 20px">英语成绩</b><br>
        <b style="font-size: 20px">政治成绩</b><br>
        <b style="font-size: 20px">历史成绩</b><br>
        <b style="font-size: 20px">地理成绩</b><br>
        <b style="font-size: 20px">物理成绩</b><br>
        <b style="font-size: 20px">化学成绩</b><br>
        <b style="font-size: 20px">生物成绩</b><br>
    </div>
    <div style="background-color: #666666;height: 250px; width: 400px;float: left"></div>
    <div style="background-color: #ff305a;height: 30px; width: 500px;text-align: center;float:left">欢迎下次光临</div>
</div>

如图：

六、表单和输入

• HTML 表单用于收集用户的输入信息。

• HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
• 实例

<form action="">
    请输入账号: <input type="text" name="user"><br>
    请输入密码: <input type="password" name="password">
</form>

• 注意表单本身并不可见。

如图：

（一）提交和登录

1、提交

• <input type="submit"> 定义了提交按钮。
• 当用户单击确认按钮时，表单的内容会被传送到服务器.

<form>
  Username:<input type="text" name="user">
  <input type="submit" value="提交">
</form>

如图：

2、登录

• button

<button class="but" type="submit">登录</button> 

<div style="background-color: #fff1e8;width: 200px;height: 200px;margin:0 auto; margin-top:200px;">
    请输入账号：<input type="text"><br>
    请输入密码：<input type="password">
    <button class="but" type="submit">登录</button> 
</div>

如图：

（二）实现登录页

 <style>
        input{
             margin: auto 0;
             width: 300px;
            /*间隔*/
             margin-bottom: 10px;
            /*空间*/
             padding: 10px;
             font-size: 15px;
            /*拐角*/
             border-radius: 4px;
        }
        .but{
            width: 150px;
            padding: 10px;
            background-color: aquamarine;

        }
</style>
<div style="background-color: #fffd87;width: 400px;height: 300px;margin: 0 auto;margin-top:200px;text-align: center">

    <h1 style="text-align: center">Login</h1>
    <input type="text" placeholder="用户名"><br>
    <input type="password" placeholder="密码">
    <button class="but" type="submit">登陆</button>
    <button class="but" type="submit">注册</button>


</div>

如图：