Web前端学习:HTML基础【入门宝典】

Web前端学习:HTML基础【入门宝典】

目录

一、HTML简介

1、HTML的特点

2、HTML元素语法

3、示例

二、HTML文档注释

三、HTML标签

1、HTML的标签的认识

2、HTML常用标签的使用

标题标签:

段落标签:

换行标签:

超链接标签:

通用内联容器标签:

图片标签(单标签):

3、HTML文本格式化

4、HTML列表——无序与有序

HTML列表——无序

HTML列表——有序

5、html表格

常用表格属性

构建表格

6、HTML属性

HTML常用属性

四、div元素和flex布局

1、div元素简介

2、div元素使用案例

案例一

案例二:flex布局

五、input及from标签

1、input标签类型和基本使用

text类型

password类型

 button类型

file类型

radio类型

 checkbox类型

 2、from标签


一、HTML简介

  • 什么是HTML? 

HTML(HyperText Markup Language) 超文本标记语言,是一种用于创建网页的标准标记语言。

  • HTML有什么作用?

用于创建网页

1、HTML的特点

  • HTML不是编程语言,而是标记语言。
  • HTML使用标签的形式来标识网页的不同组成部分
  • HTML文档包含了HTML标签和文本
  • HTML文档又叫做Web页面
  • HTML文档的后缀:html 或 htm

2、HTML元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止(双标签)
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(单标签)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

3、示例

  • 在python编辑器中创建一个HTML文件,下图是新创建HTML文件中自动生成的内容。
  • 然后在HTML文件中写入一些数据,注意:斜杠表示结束的意思
  • 写入数据后,点击运行,会生成一个网页


二、HTML文档注释

html文档代码中可以插入注释﹐注释是对代码的说明和解释﹐注释的内容不会显示在页面上﹐ html代码中插入注释的方法是︰

<!--注释-->

  • 运行结果

 


三、HTML标签

1、HTML的标签的认识

 HTML 标签是由尖括号包围的关键词,比如 <html>

成对出现的标签就是双标签,单个出现的就是单标签

标签在页面上会显示成一个方块,分为两类:

  • 块元素:在布局中默认会独占一行,块元素后的元素需换行排列。
  • 内联元素:元素之间可以排列在一行,设置宽高无效,它的宽高由内容撑开。

双标签:开始标签和结束标签

例如:<h1></h1>~<h6></h6>、<p></p>、<a></a>、<span></span>

单标签:只有开始标签

例如:<img>

块元素(会进行换行)

例如:<h1></h1>~<h6></h6>、<p></p>、列表标签

行内元素(不会换行)

例如:<a></a>、<span></span>、<img>

2、HTML常用标签的使用

  • 标题标签:<h> </h>

表示文档的标题,除了具有块元素的基本特性外,还含有默认的外边距和字体大小。

在HTML文件中写入标题标签以及内容

运行结果

  • 段落标签:<p></p>

<p></p>表示一个文档中的文字段落

运行结果:

 

  • 换行标签:<br>

换行标签一般和段落标签一起使用:

<p>第一行<br>第二行</p>

 

 运行结果和解析:

 

  • 超链接标签:<a></a>

 <a></a>链接到另一个网页的href

演示如下:

 运行结果如下:

 鼠标点击”跳转到百度“就会执行页面跳转

  • 通用内联容器标签:<span></span>

演示如下:

运行结果:

  • 图片标签(单标签):<img>

<img>在网页中插入图片:src(图片的路径),alt(当图片不存在时,用来说明)

演示如下:

(1)在HTML文件的目录下放置一张图片

(2)在HTML文件中写入内容

(3)运行结果:

 (3)演示图片不存在时的情况

 运行结果:

3、HTML文本格式化

标签 描述
<b> / <strong> 定义粗体文本
<i> / <em> 定义斜体文本
<sub> / <sup> 定义下标字与上标字
<small> / big 定义小号字与大号字
<ins> 定义插入字
<del> 定义删除字

 代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML文本格式化</title>
</head>
<body>
    北京
    <!--定义粗体文字-->
    <b>北京</b>
    <strong>北京</strong>

    <!--定义斜体文字-->
    <i>故宫</i>
    <em>故宫</em>

    <!--定义上标字-->
    h<sup>+</sup>
    <!--定义下标字-->
    h<sub>2</sub>o

    <!--定义小号字与大号字-->
    <small>A</small>
    <big>A</big>

    <!--定义插入字-->
    <ins>插入字</ins>

    <!--定义删除字-->
    <del>删除字</del>
</body>
</html>

运行结果:

4、HTML列表——无序与有序

  • HTML列表——无序

无序列表默认属性是disc,disc定义一个实体圆,所以disc不用刻意去设置 这些属性都是通过type来定义的。

circle是定义一个空心圆          

square定义实体方块

 演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <ul type="square">
        <li>A</li>
        <li>B</li>
        <li>C</li>
    </ul>
</body>
</html>

运行结果:

  • HTML列表——有序

 有序列表默认是数字往下计数的                        

type:规定列表的序号类型(1,A,a,I,i)

演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <ol>
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
    </ol>
</body>
</html>

运行结果:

5、html表格

  • 常用表格属性

属性名 属性
border 边框属性,如果不定义边框属性,表格将不显示边框
cellspacing 单元格间距,设置单元格与单元格之间的距离
width         设置表格的宽度
height 设置表格的高度
align 设置表格在网页中的水平对齐方式

  • 构建表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <table border="1" style="width:200px;height:100px">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <!--align="center"表示将文本信息放在正中央-->
            <td align="center">张三</td>
            <td>18</td>
            <td>男</td>
        </tr>
    </table>
</body>
</html>

运行结果如下:

6、HTML属性

HTML 元素可以设置属性

属性可以在元素中添加附加信息 属性一般描述于开始标签

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

  • HTML常用属性

属性 描述
id 规定元素的唯一id
name 规定元素的唯一名字
style 规定元素的行内样式(inline style)
class 规定元素的类名(classname)
hidden hidden 属性规定对元素进行隐藏
type 规定元素的类型

注意:id具有唯一性,而class是可以声明多个的,图解如下:


四、div元素和flex布局

1、div元素简介

  <div> 可定义文档中的分区或节(division/section)。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。

<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。 提示:请使用

<div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化

2、div元素使用案例

  • 案例一

使用<div>元素来组合块级元素(这样就可以使用格式对它们进行格式化)

格式化:一个<div>元素中设置其内容的颜色格式:red,div元素中的<h1>和<p>标签的内容都变成了红色 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <div id="div1" style="color:red">
        123
        <h1>123</h1>
        <p>123</p>
    </div>
</body>
</html>

运行结果: 

  • 案例二:flex布局

 使用<div>元素,做出红、黑、蓝这三个正方体

下面的代码可以理解为农民分地问题

三个村民通过:<div id="div1" style="width:300px;height:300px;display:flex">申请得一个高为300px,宽为300px的地,然后开始平分,每一位村民得到的地为高100px,宽100px的地,并分别用红、黑、蓝三种颜色进行区分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <div id="div1" style="width:300px;height:300px;display:flex">
        <div style="width:100px;height:100px;background-color:red"></div>
        <div style="width:100px;height:100px;background-color:black"></div>
        <div style="width:100px;height:100px;background-color:blue"></div>
    </div>
</body>
</html>

运行结果:


五、input及from标签

1、input标签类型和基本使用

  • text类型

输入的是一个文本 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML列表</title>
</head>
<body>
    <input type="text" name="name">
</body>
</html>

运行结果 

 

  • password类型

输入的是一个不可见的文本

<!--name可随便设置-->
<input type="password" name="pwd">

运行结果:

  •  button类型

设置一个可点击的按钮 

<!--value是显示在按钮上的信息-->
<input type="button" name="btn" value="点我">

 运行结果:

  • file类型

 定义输入字段和”浏览“按钮,供文件上传

<input type="file" name="uploadFile">

运行结果:

点击”选择文件“后弹出文件夹 ,供文件上传

  • radio类型

定义单选按钮 

<input type="radio" name="radio">

运行结果:

生成一个按钮,点击变蓝 

  •  checkbox类型

 定义复选框

<input type="checkbox" name="checkbox">读书
<input type="checkbox" name="checkbox">写字
<input type="checkbox" name="checkbox">画画
<input type="checkbox" name="checkbox">运动

运行结果:

生成一个复选框,点击后变蓝 

 2、from标签

 <form> 标签用于创建供用户输入的 HTML 表单。

<form> 元素包含一个或多个的表单元素

action属性:表单提交URL

method属性:表单提交方式(get/post)

<!--例-->
<form action="" method="get"></form>

 运行结果:

出现网页后,点击网页检查,进行抓包,会看到网页的请求方式是get请求

转载请说明出处内容投诉
CSS教程_站长资源网 » Web前端学习:HTML基础【入门宝典】

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买