HTML基础
HTML基础
- 1 HTML介绍
- 2 HTML基本结构
- 3 常用标签
- 4 列表标签
- 5 表格标签
- 6 表单标签
1 HTML介绍
HTML 的全称为：HyperText Mark-up Language, 指的是超文本标记语言，用来开发网页的。 标记：就是标签, <标签名称> , 比如: 、 等，标签大多数都是成对出现的。
所谓超文本，有两层含义:
- 因为网页中还可以图片、视频、音频等内容(超越文本限制)
- 它还可以在网页中跳转到另一个网页，与世界各地主机的网页链接(超链接文本)
2 HTML基本结构
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
hello world
body>
html>
网页文件的后缀是.html或者.htm, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页。
VS Code 是由微软研发的一款免费、开源的跨平台代码编辑器，目前是前端(网页)开发使用最多的一款软件开发工具，点击下载
3 常用标签
根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)
- 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签
- 单标签是一个标签组成，没有标签内容， 比如: img标签
<h1>一级标题h1>
<h6>六级标题h6>
<div>这是一个div标签div>
<p>这个一个段落标签p>
<br>
<img src="images/pic.jpg" alt="图片加载失败时的描述信息">
<hr>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网a>
<div>
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网a>
div>
注意：
- 标签不区分大小写，但是推荐使用小写
- 资源路径分为绝对路径和相对路径，绝对路径是从根目录算起的路径叫做绝对路径，相对路径是当前目录算起的路径叫做相对路径，一般使用相对路径，若使用绝对路径拷贝工程时可能会出现资源找不到的问题
4 列表标签
列表标签的种类
- 无序列表标签(ul标签)
- 有序列表标签(ol标签)
（1）无序标签
<ul>
<li>列表标题一li>
<li>列表标题二li>
<li>列表标题三li>
ul>
（2）有序标签
<ol>
<li><a href="#">列表标题一a>li>
<li><a href="#">列表标题二a>li>
<li><a href="#">列表标题三a>li>
ol>
5 表格标签
表格是由行和列组成，好比一个excel文件
标签：表示一个表格
标签：表示表格中的一行 标签：表示表格中的列 标签：表示表格中的表头 <table style="border: 1px solid black; border-collapse: collapse"> <tr> <th style="border: 1px solid black;">姓名th> <th style="border: 1px solid black;">年龄th> tr> <tr> <td style="border: 1px solid black;">张三td> <td style="border: 1px solid black;">22td> tr> table>6 表单标签
（1）表单标签简单使用
表单用于搜集不同类型的用户输入(用户输入的数据)，然后可以把用户数据提交到web服务器
-
标签 表示表单标签，定义整体的表单区域 -
标签 表示表单元素的文字标注标签，定义文字标注 -
标签 表示表单元素的用户输入标签，定义不同类型的用户输入数据方式type属性type="text"定义单行文本输入框type="password"定义密码输入框type="radio"定义单选框type="checkbox"定义复选框type="file"定义上传文件type="submit"定义提交按钮type="reset"定义重置按钮type="button"定义一个普通按钮
-