HTML页面的构成

---

HTML

• HTML基础

• HTML属性

• HTML表格

• HTML列表

• HTML区块

• 表单和输入

HTML基础

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

HTML 标题

HTML 标题是通过 - 标签来定义的。

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

HTML段落

HTML 段落是通过标签 来定义的。

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

HTML 链接

HTML 链接是通过标签 来定义的。

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

HTML图像

HTML 图像是通过标签 来定义的.

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

HTML属性

• HTML 元素可以设置属性

• 属性可以在元素中添加附加信息

• 属性一般描述于开始标签

• 属性总是以名称/值对的形式出现，比如：name="value"。

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

HTML文本格式化

	定义粗体文本
	定义着重文字
	定义斜体字
	定义小号字
	定义加重语气
	定义下标字
	定义上标字

HTML样式

背景颜色

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

字体样式&大小&颜色

字体样式

<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

字体颜色

<p style="color:red">一个段落。</p>

字体大小

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

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

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

文本对齐

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

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

HTML表格

表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。字母 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>

表格表头&标题

表格的表头使用 标签进行定义。

<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>
    <tr>
        <td>阿坤</td>
        <td>男</td>
        <td>篮球</td>
    </tr>
</table>

HTML列表

HTML 支持有序、无序列表

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

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

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

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

HTML区块

HTML 可以通过 和 将元素组合起来。

<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 表单用于收集用户的输入信息。

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

实例

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

**注意:**表单本身并不可见

提交&登陆

定义了提交按钮。

当用户单击确认按钮时，表单的内容会被传送到服务器

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

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>