HTML入门

1.HTML快速入门

1.1概述

HTML(HyperText Markup Language):超文本标记语言

超文本:是一种可以显示在 电脑显示器 或 电子设备 上的文本,现时超文本普遍以电子文档的方式存在,其中的文字包含有可以链接到其他字段或者文档的 超链接 ,允许从当前阅读位置直接切换到超链接所指向的文字。

标记:也就是标签。可以使用一系列的标签,将网络上的文档格式统一,使分散的资源连接为一个整体

1.2HTML的组成

HTML页面是由一系列的元素(Element)组成的,而元素是通过标签创建出来的

标签

一般HTML中的标签可分为两大类:

围堵标签:有开始标签和结束标签。如 <html> </html>

自闭和标签:开始标签和结束标签在一起。如 <br/>

 属性

HTML的围堵标签可以拥有属性。属性可以让HTML元素拥有更多的信息,属性只能加在开始标签中,通常都是以“属性=值”的键值对形式出现

1.3入门案例

在浏览器上显示一串文字

步骤:

在web目录中新建一个HTML文件

在<body>标签中写入一个<h1>标签,并写上想在浏览器上出现的文字

在<h1>中添加属性align并赋值为center,目的是让内容居中

通过浏览器打开查看效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">
    第一个HTML案例
</h1>
</body>
</html>

效果演示

2.HTML基本语法

2.1注释

跟许多语言一样,HTML也有注释,用来解释说明且注释不会被浏览器解析

格式

<!--注释内容--> 

2.2标题标签--<h1></h1> to <h6></h6>

每一个标签里的内容自成一行,字体大小逐级递减,并且HTML中最小只有六级标题

如图所示

代码

效果

 

在HTML中只存在1到6级标题

2.3换行标签--<br>

在HTML中,对输入的文本进行Enter回车,并不会起到换行效果,而是使用<br>自闭和标签实现换行

代码

效果

2.4图片标签--<img></img>

在浏览器中展示图片

属性:src—指定展示图片文件的位置,可以使用全路径或相对路径

相对路径:以 “.” 开头的路径;“./”代表当前目录,“../”表示上一级目录

width—设置图片的宽度,单位一般为px或百分之几

2.5列表标签

有序列表ol:属性type:改变排序的样式;start:n 从n开始排序

无序列表nl:属性type

2.6表格标签

 table:定义表格

  • width:宽度
  • border:边框
  • cellpadding:定义内容和单元格的距离
  • cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
  • bgcolor:背景色
  • align:对齐方式

tr:定义行

  • bgcolor:背景色
  • align:对齐方式

td:定义单元格

  •  colspan:合并列
  •  rowspan:合并行

th:定义表头单元格

  • <caption>:表格标题
  • <thead>:表示表格的头部分
  • <tbody>:表示表格的体部分
  • <tfoot>:表示表格的脚部分

 

 2.7特殊字符在HTML里的实现

注意: 实体名称对大小写敏感

2.8表单标签

用于采集用户输入的数据,并和服务器进行交互

属性:

action:指定提交数据的URL

method:指定提交方式,常见的有两种--get、--post。

get:请求参数会在地址栏中显示 ,会封装到请求行中

        请求参数大小有限制

        不太安全

post:请求参数不会在地址栏中显示,会封装到请求体中

        请求参数大小没有限制

        较为安全

2.8.1表单项标签

①<input>:可以通过type属性值,改变元素展示的样式 

type属性:

        text:文本输入框

        password:密码输入框(输入的信息会以“*”展示在页面上)

        radio:单选框

                1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。

                2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值

                3. checked属性:可以指定默认值

        checkbox:复选框

                1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值

                2. checked属性,可以指定默认值

        file:文件选择框

        按钮:
                submit:提交按钮。可以提交表单
                button:普通按钮
                image:图片提交按钮,也可以提交表单
                        src属性指定图片的路径

placeholder属性:指定输入框的提示信息,当输入框的内容发生变化时,会自动清空提示信息

label:指定输入项的文字描述信息
        label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。

<label for="username"> 用户名 </label>:<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码:<input type="password" name="password" placeholder="请输入密码"><br>
    性别:<input type="radio" name="gender" value="male" >  男
         <input type="radio" name="gender" value="female" checked>  女
            <br>
    爱好:<input type="checkbox" name="hobby" value="shopping"> 逛街
        <input type="checkbox" name="hobby" value="java"  checked> Java
        <input type="checkbox" name="hobby" value="game"> 游戏<br>

    图片:<input type="file" name="file"><br>

 

②select下拉列表

子元素:option,指定列表项

省份:<select name="province">
            <option value="">--请选择--</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3" selected>陕西</option>
         </select><br>

 

③textarea:文本域 

cols:指定列数,每一行有多少个字符
rows:默认多少行 (如果超出设定值,会自动扩容)

练习

案例:编写一个注册页面

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>

    <!--定义表单 form-->
    <form action="#" method="post">
        <table border="1" align="center" width="500">
            <tr>
                <td><label for="username">用户名</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>

            <tr>
                <td><label for="password">密码</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>

            <tr>
                <td><label for="email">Email</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>

            <tr>
                <td><label for="name">姓名</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>

            <tr>
                <td><label for="tel">手机号</label></td>
                <td><input type="text" name="tel" id="tel"></td>
            </tr>

            <tr>
                <td><label>性别</label></td>
                <td><input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>

            <tr>
                <td><label for="birthday">出生日期</label></td>
                <td><input type="date" name="birthday" id="birthday"></td>
            </tr>

            <tr>
                <td><label for="checkcode">验证码</label></td>
                <td><input type="text" name="checkcode" id="checkcode">
                    <img src="../../image/verify_code.jpg">
                </td>
            </tr>


            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册"></td>
            </tr>
        </table>


    </form>

</body>
</html>

 效果如下图所示:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值