HTML入门
文章目录
- 前言
- 一、HTML是什么？
- 二、学习内容
- 一.HTML基础
- **标题**
- **水平线**
- **注释**
- **段落**
- **折行**
- **链接**
- **头部**
- **图像**
- **格式化**
- **表格使用**
- **列表**
- 二.登录框
Html迄今仍是设计网页时不可或缺的编码。假如可以了解把握并运用这种编码，大到建立网站，小到博客网站等都是有非常大的益处，因此在本章记录了我对于HTML基础学习的内容。
推荐学习网站：https://www.runoob.com/html/html-tutorial.html
一、HTML是什么？HTML称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
二、学习内容一.大概掌握HTML的基本知识并且可以达到运用的地步
二.搭建一个登录框
一.HTML基础标题
HTML 标题（Heading）是通过<h1>-<h6>标签来定义的。
实例：`
hello HTMLhello HTML
hello HTML
hello HTML
hello HTML
hello HTML
`
水平线
<hr> 标签在 HTML 页面中创建水平线。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实战</title>
</head>
<body>
<p>看见了吗？</p>
<hr />
<p>文字中间</p>
</body>
</html>
注释
<!-- 注释格式 -->
段落
HTML 段落是通过标签 <p> 来定义的。
实例：<p>-你好！</p>
折行
<br>直接在<p>--</p>中插入
链接
HTML 链接是通过标签 <a> 来定义的。
实例：
头部
总结
实例：<style>操作
图像
HTML 图像是通过标签 <img> 来定义的.
<img loading="car" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" />
实例：
src=“图片的链接”
<img src="url" alt="some_text">
alt=“文本信息说明”
格式化
总结如下：
表格使用
常用语法：
实例：
列表
常用语法：
一：无序列表
<h4>无序列表:</h4>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
实例：
二.有序列表
<ol>
<li>张</li>
<li>王</li>
<li>赵</li>
</ol>
<ol start="20">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
实例：
二者区别在于：start=""的使用，从哪一个数字开始设定往下进行。
三.自定义列表
<dl>
<dt>Coffee</dt>
<dd>- 西方</dd>
<dt>Milk</dt>
<dd>- 西方</dd>
</dl>
实例：
区块
一.<div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
二. <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
表单
常用语法：
文本字段
文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form action="">（创建了一个文本框）
名字: <input type="text" name="名字"><br>
性别： <input type="text" name="性别">
</form>
实例：
密码字段
密码字段通过标签 来定义
<form action="">
用户名: <input type="text" name="user"><br>
** 密码: <input type="password" name="password">
</form>
实例：
给输入框添加占位符文本
<input type="text" placeholder="这里填写文本框的内容">
实例：
单选按钮
标签定义了表单单选框选项
<form action="">
<input type="radio" name="sex" value="喜欢">喜欢<br>
<input type="radio" name="sex" value="不喜欢">不喜欢
</form>（Value=""内容是关键词方便检索）
实例：
复选框
<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form action="demo-form.php" method="get">
<input type="checkbox" name="vehicle[]" value="星"> 流星<br>
<input type="checkbox" name="vehicle[]" value="月亮" checked="checked"> 月亮????<br> (checked="checked"该选项是指默认选择）
<input type="checkbox" name="vehicle[]" value="湖" > 湖泊<br>
<input type="checkbox" name="vehicle[]" value="超人">超级奥特曼<br>
<input type="checkbox" name="vehicle[]" value="C">C罗<br>
<input type="submit" value="提交">
</form>
实例：
提交按钮
<input type="submit"> 定义了提交按钮.
在这里举例一个简单的登录页面
html实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
</head>
<body>
<h1>登录页面</h1>
<form action="">
Username: <input type="text" name="user" placeholder="请输入你的账号"><br>
Password: <input type="password" name="password" placeholder="请输入你的密码"><br>
<input type="submit" value="登录" >
<input type="radio" name="sex" >保存
<input type="radio" name="sex" >不保存
</form>
</body>
</html>
实例：
