博客

HTML入门学习和简单使用

  • Post author:
  • Post category:其他




HTML



1. 网页

  • 网页的构成

    • HTML ：定义网页内容的含义和基本结构
    • CSS：美化网页，用来描述网页的表现与展示效果
    • JavaScript ：动态效果，用来执行网页的功能与行为



2. 概述


  • HTML

    （超文本标记语言——HyperText Markup Language），它是一种用来告知浏览器如何组织页面的

    标记语言

    。
  • 所谓

    超文本Hypertext

    ，是指连接单个或者多个网站间的网页的链接。我们通过链接，就能访问互联网中的内容。
  • 所谓

    标记Markup

    ，是用来注明文本，图片等内容，以便于在浏览器中显示，例如

    <head>

    ,

    <body>

    等。



3. 组成



3.1 HTML组成

  • HTML页面由一系列的

    元素（

    elements

    ）

    组成，而元素是使用

    标签

    创建的。



3.2 标签

  • 一对标签（

    tags

    ）可以设置一段文字样式，添加一张图片或者添加超链接等等，在HTML中，

    <h1>

    标签表示

    标题

    ，那么，我们可以使用开始标签

    <h1>

    和结束标签

    </h1>

    包围文本内容，这样其中的内容就以标题的形式显示了。



3.3 属性

  • HTML标签可以拥有

    属性

    。

    属性

    提供了有关 HTML 元素的

    更多的信息

    。我们只能在开始标签中，加入属性。通常以

    名称=值

    成对的形式出现，

    比如：name=’value’
  • 在HTML标签中，

    align

    属性表示

    水平对齐方式

    ，我们可以赋值为

    center

    表示

    居中



3.4 创建一个标准的初始化页面


  1. <!DOCTYPE html>

    :

    声明文档类型

    。规定了HTML页面必须遵从的良好规则，从HTML5后，

    <!DOCTYPE html>

    是最短的有效的文档声明。
  2. `：这个标签包裹了整个完整的页面，是一个**根元素（顶级元素）**。其他所有元素必须是此元素的后代，每篇HTML文档只有一个根元素。

  3. <head>

    ：这个标签是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。这里主要介绍两个标签：


    • <meta charset="utf-8">

      ：这个标签是页面的元数据信息，设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容，能够避免页面乱码问题。

    • <title>

      ：这个标签定义文档标题，位置出现在浏览器标签上，而不是页面正文中。在收藏页面时，它可用来描述页面。

  4. <body>

    ：包含了文档内容，你访问页面时所有显示在页面上的文本，图片，音频，游戏等等。



4. 基本语法



4.1 关于注释

  • 如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释。为了将一段HTML中的内容置为注释，你需要将其用特殊的记号

    <!--和-->

    包括起来



4.2 关于标签

  • 不是所有元素都拥有开始标签，内容和结束标签。一些元素只有一个标签，叫做空元素。它是在开始标签中进行关闭的。例如：

    <br/>
  • 你也可以把元素放到其它元素之中——这被称作嵌套。比如，我们想要强调

    第一个

    ，可以将

    <b>

    标签包围第一个，这样

    b标签

    就是嵌套在了

    p标签

    中,如下所示


    • <p>这是<b>第一个</b>页面</p>
  • 在HTML中有两种重要元素类别，块级元素和内联元素

    • 块级元素（block）：独占一行，在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现
    • 行内元素：行内显示，不会导致换行，通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容

    • 注意：一个块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素中

  • <div>

    是一个通用的内容容器，并没有特殊语义，它可以被用来对其他元素进行分组，一般用于样式化相关的需求，它是一个块级元素

  • <span>

    是短语内容的通用行内容器，并没有任何特殊语义，它可以被用来编组元素以达到某种样式，它是一个行内元素

  • 注意：div和span在页面布局中有重要作用



4.3 关于属性

  • 标签属性，主要用于拓展标签。属性包含元素的额外信息，这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据，属性总是以

    name = value

    的格式展现。

    • 属性名：同一个标签中，属性名不得重复。
    • 大小写：属性和属性值对大小写不敏感。不过W3C标准中，推荐使用小写的属性/属性值。
    • 引号：双引号是最常用的，不过使用单引号也没有问题
  • 常用属性
属性名 作用
class 定义元素类名，用来选择和访问特定的元素
id 定义元素唯一标识符，在整个文档中必须是唯一的
name 定义元素名称，可以用于提交服务器的表单字段
value 定义在元素内显示的默认值
style 定义CSS样式，这些样式会覆盖之前设置的样式（第一天简单了解，第二天主要内容）



4.4 特殊字符

  • 在HTML中，字符

    <

    ,

    >

    ,

    "

    ,

    '

    和

    &

    是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢
原义字符 等价字符引用
<
&lt;
>
&gt;
”
&quot;
’
&apos;
&
&amp;
空格
&nbsp;



5. 文本案例



5.1 div样式布局

  • 文本由几部分构成，我们可以使用div将页面分割布局
  • 在head标签中，通过style标签加入样式。
  • 基本格式

    <style>
    标签名{
        属性名:属性值;
    }
</style>
  • 多个属性名格式

    <style>
    标签名{
        属性名1:属性值1;
        属性名2:属性值2;
        属性名3:属性值3;
    }
</style>
  • div的多样式

    • 一个属性名可以含有多个值，同时设置多样式 
    格式：
<style>
    标签名{
        属性名:属性值1 属性值2 属性值3; 
    }
</style>
  • 注：为了布局方便，我们通常可以先设置边框的样式，进行布局，结束后再去掉边框，直观显示完整的界面



5.2 文本标签

  • 使用文本内容标签设置文字基本样式
标签名 作用
p 表示文本的一个段落
h 表示文档标题，

<h1>–<h6>

，呈现了六个不同的级别的标题，

<h1>

级别最高，而

<h6>

级别最低
hr 表示段落级元素之间的主题转换，一般显示为水平线
li 表示列表里的条目。
ul 表示一个无序列表，可含多个元素，无编号显示。
ol 表示一个有序列表，通常渲染为有带编号的列表
em 表示文本着重，一般用斜体显示
strong 表示文本重要，一般用粗体显示
font 表示字体，可以设置样式（已过时）
i 表示斜体
b 表示加粗文本



6. 图文案例



6.1 页面布局

  • 想要将div布局成案例效果，首先需要对多个div进行区分，再分别设置每一个div自身的效果。
  • 首先编写三个div，设置边框样式 
<style>
     div{ border: 1px solid blue;}
</style>

<div >left</div>
<div >center</div>
<div>right</div>
  • 此时通过div设置的样式都是一致的，无法个性化布局。这时候需要区分不同的div
  • 使用class的值 
.class值{
	属性名：属性值；
}

<标签名 class="class值">
  • 使用class的值，可以帮助我们区分div，更加精确的设置标签的样式
  • 当有些部分是并列的时候，我们知道div是独占一行的，这时候我们就需要用到浮动属性
  • float：指定一个元素应沿其容器的左侧或者右侧放置，允许文本或者内联元素环绕它，该元素从网页的正常流动中移除，其他部分保持正常文档流顺序
  • 格式 
<!-- 加入浮动 -->
float：none；不浮动
float：left；左浮动
float：right；右浮动

<!-- 清除浮动 -->
clear：both；清除两侧浮动，此元素不再收浮动元素布局影响。
  • 对前面示例中使用class的值进行浮动布局 
        .left{
            width: 20%;
            float: left;
        }

        .center{
            width: 59%;
            float: left;
        }


        .right{
            width: 20%;
            float: left;
        }



6.2 图片标签

标签名 作用 备注
img 可以显示一张图片（本地或网络） src属性，这是一个必须的属性，表示图片的地址
  • 其他属性
属性名 作用
title 鼠标悬停时显示文本
alt 图形不显示时的替换文本
height 图像的高度
width 图像的宽度
  • 插入图片示例 
<img height="100%" width="100%" src="picture/j1.png"/>



6.3 超链接

标签名 作用 备注
a 表示超链接 href属性，表示超链接指向的URL地址
属性名 作用
target 页面的打开方式（_self当前页 _blank新标签页）
  • 超链接示例 
  <a href="#" target="_blank">文本或图片</a>
  • 去掉超链接下划线 
a{
	text-decoration:none; //none表示不显示
}



6.4 设置背景

背景色:
	 background-color: black;
背景图:
	 background-image: url("../img/bg.png");
  • 设置哪个区域就给哪个div加上背景属性



7. 注册页面案例



7.1 表单标签

标签名 作用
form 表示表单，是用来收集用户输入信息并向web服务器提交的一个容器
  • 代码示例 
<form >
    //表单元素
</form>
  • 表单的属性
属性名 作用 备注
action 处理此表单信息的Web服务器的URL 地址
method 提交此表单信息到Web服务器的方式 可能的值有get和post，默认为get
autocomplete 自动补全，指示表单元素是否能够拥有一个默认值，配合input标签使用 HTML5之后
  • 举例 
<!-- 一个简单的表单，会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form>

<!-- 一个简单的表单，发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>
  • GET与POST说明


    • post

      ：指的是 HTTP

      POST 方法

      ；表单数据会包含在表单体内然后发送给服务器。

    • get

      ：指的是 HTTP

      GET 方法

      ；表单数据会附加在

      action

      属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。
地址栏可见 数据安全 数据大小
GET 可见 不安全 有限制（取决于浏览器）
POST 不可见 相对安全 无限制



7.2 表单元素

  • 表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
标签名 作用 备注
label 表单元素的说明，配合表单元素使用 for属性值为相关表单元素的id属性值
input 表单中输入控件，多种输入类型，用于接受来自用户数据 type属性值决定输入类型
button 页面中可点击的按钮，可以配合表单进行提交 type属性值决定按钮类型
  • 简单的文本输入框

    • label标签：表单的说明。

      • for属性值：匹配input标签的id属性值
    • input标签：输入控件。

      • type属性：表示输入类型，text值为普通文本框
      • id属性：表示标签唯一标识
      • name属性：表示标签名称
      • value属性：表示标签数据值
    • 代码实现 
    <form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
</form>
  • 提交用户名的表单

    • button标签：表示按钮。

      • type属性：表示按钮类型，submit值为提交按钮。 
    <form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
  <button type="submit" >login</button>
</form>



7.3 关于属性值

  • NAME和VALUE属性
属性名 作用

name
<input>

的名字，在提交整个表单数据时，可以用于区分属于不同

<input>

的值

value
 		这个

<input>

元素当前的值，允许用户通过页面输入

  • 使用方式

    • 以name属性值作为键，value属性值作为值，构成键值对提交到服务器，多个键值对浏览器使用

      &

      进行分隔。

  • TYPE属性

    • input标签的type属性
    • 基本的文本属性
    属性值 作用 备注
    text 单行文本字段
    password 单行文本字段，值被遮盖
    email 用于编辑 e-mail 的字段，可以对e-mail地址进行简单校验 HTML5
    • 举例 
    <form action="#" method="get">
    <label for="username">Username:</label>
    <input type="text" id="username"  name="username"> <br/>

    <label for="password">Password:</label>
    <input type="password" id="password"  name="password"><br/>

    <label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    <input type="email" id="email"  name="email"><br/>
    <button type="submit"> login</button>
</form>

  • 单选多选属性

    属性值 作用
    radio 单选按钮。 1. 在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。
    checkbox 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时，所有的值会构成一个数组而提交到Web服务器
    • 举例 
    <form action="#" method="get">
    <label for="gender">性别:</label>
    <input type="radio" id="gender" name="gender" value="boy"/>男
    <input type="radio" name="gender" value="girl" checked="checked"/>女

    <hr/>
    <label for="hobby">爱好: </label>
    <input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育
    <input type="checkbox"  name="hobby" value="tech"/> 科技
    <input type="checkbox" name="hobby" value="fun" /> 娱乐
    <input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>

  • 按钮属性

    属性值 作用
    button 无行为按钮，用于结合JavaScript实现自定义动态效果
    submit 提交按钮，用于提交表单数据。
    reset 重置按钮，用于将表单中内容恢复为默认值。
    image 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。

  • HTML5新增的type值

    属性值 作用 备注
    date HTML5 用于输入日期的控件 年，月，日，不包括时间
    time HTML5 用于输入时间的控件 不含时区
    datetime-local HTML5 用于输入日期时间的控件 不包含时区
    number HTML5 用于输入浮点数的控件
    range HTML5 用于输入不精确值控件 max-规定最大值

    min-规定最小值

    step-规定步进值

    value-规定默认值
    search HTML5 用于输入搜索字符串的单行文本字段 可以点击

    x

    清除内容
    tel HTML5 用于输入电话号码的控件
    url HTML5 用于编辑URL的字段 可以校验URL地址格式
属性值 作用 备注
file 此控件可以让用户选择文件，用于文件上传。 使用 accept 属性可以定义控件可以选择的文件类型。
hidden 此控件用户在页面上不可见，但它的值会被提交到服务器，用于传递隐藏值
  • button标签的type属性

    属性值 作用 备注
    submit 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。 同

    <input type="submit"/>
    reset 此按钮重置所有组件为初始值。 同

    <input type="reset"

    />
    button 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。 同

    <input type="button"/>
  • HTML5新增属性
属性名 作用 备注

placeholder
 		提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 仅适用于当

type

属性为text, search, tel, url or email时; 否则会被忽略。

required
 		这个属性指定用户在提交表单之前必须为该元素填充值 1. 布尔属性，可省略属性值表示true

2. 当type属性是hidden,image或者button类型时不可使用

autocomplete
 		自动补全，规定表单或输入字段是否应该自动完成。当自动完成开启，浏览器会基于用户之前的输入值自动填写值。 1. 开启为on，关闭为off

2. 可以设置指定的字段为off，关闭自动补全



7.4 更多表单元素

标签名 作用 备注

select
 		表单的控件，下拉选项菜单 与option配合实用

optgroup
 		option的分组标签 与option配合实用

option
 		select的子标签，表示一个选项

textarea
 		表示多行纯文本编辑控件 rows表示行高度， cols表示列宽度

fieldset
 		用来对表单中的控制元素进行分组(也包括 label 元素)

legend
 		用于表示它的

fieldset

内容的标题。
fieldset

的子元素
  • select举例 
<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!--  
  select的name属性值与option的value属性值,构成键值对,提交到Web服务器
-->
  • textarea举例 
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
  • fieldset举例 
<form action="#" method="post">
  <fieldset>
    	<legend>是否同意</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">同意</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不同意</label>
  </fieldset>
</form>



7.5 注册页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background: url("picture/bg.png");
            font-family: 华文楷体;
        }
        div{
            text-align: center;
        }
        .center{
            background: lightblue;
            margin: auto;
            text-align: center;
            width: 400px;
        }

    </style>
</head>
<body>
    <div>
        <img height="10%" width="10%" src="picture/logo.png"/>
    </div>
    <div class="center">
        <form action="#" method="get" autocomplete="off">
            <p><font color="blue" size="5">注册详情</font></p>
            <hr color="white"/>
            <label for="username">姓名：</label>
            <input type="text" id="username" name="username" placeholder="   --请输入您的姓名--">
            <br/>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" placeholder="   --请输入您的密码--">
            <br/>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" placeholder="   --请输入您的邮箱--">
            <br/>
            <label for="tel">手机：</label>
            <input type="tel" id="tel" name="tel" placeholder="   --请输入您的手机--">
            <br/>
            <hr color="white"/>
            <label for="gender">性别：</label>&nbsp&nbsp
            <input type="radio" id="gender" name="gender" value="男">&nbsp&nbsp男&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <input type="radio" name="gender" value="女">&nbsp&nbsp女&nbsp&nbsp&nbsp
            <br/>
            <label for="hobby">爱好：</label>
            <input type="checkbox" id="hobby" name="hobby" value="音乐">音乐
            <input type="checkbox" name="hobby" value="电影">电影
            <input type="checkbox" name="hobby" value="游戏">游戏
            <br/>
            <label for="birthday">生日：</label>&nbsp&nbsp&nbsp
            <input type="date" id="birthday" name="birthday">&nbsp&nbsp
            <br/>
            <label for="city">城市：</label>&nbsp&nbsp&nbsp
            <select id="city" name="city">
                <option>请选择您所在的城市</option>
                <optgroup label="直辖市">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </optgroup>
                <optgroup label="省会市">
                    <option>武汉</option>
                    <option>西安</option>
                    <option>杭州</option>
                    <option>银川</option>
                </optgroup>
            </select>&nbsp
            <hr color="white"/>
            <label for="desc">个性签名</label>
            <textarea id="desc" name="desc" rows="3" cols="40"></textarea>
            <hr color="white"/>
            <input style="width: 80px;height: 25px" type="submit" value="注册"/>&nbsp&nbsp&nbsp
            <input style="width: 80px;height: 25px" type="reset" value="重置"/>

        </form>
    </div>
</body>
</html>



7.6 实现效果


版权声明：本文为m0_52627845原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。