HTML基础入门
HTML基础入门
- 1、什么是HTML
- 2、VScode
- 3、标签详解
-
- 3.1标题
- 3.2 段落
- 3.3 链接
- 3.4 图像
- 3.5 表格
- 3.6列标签
- 3.7表单标签
-
- 3.7.1单行输入框：
- 3.7.2密码框：
- 3.7.3单选框：
- 3.7.4复选框：
- 3.7.5下拉菜单：
1、什么是HTML
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
- HTML 指的是超文本标记语言: HyperText Markup Language
- HTML 不是一种编程语言，而是一种标记语言
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2、VScode
编写HTML建议在Vscode上进行编写，VScode不用创建项目直接打开相应的文件即可启动html，首先下载Vscode，打开Vscode，再创建一个文件，在文件中创建一个文档再编写后缀为.html右键选择打开方式选择浏览器打开（建议使用Google Chrome），如下
3、标签详解
标签可以简单分为三种：块级标签，行内标签，行内块标签
- 块级标签：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
- 行内标签：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！其中还有一种结合两种模式有点的显示模式。
- 行内块标签：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示。
3.1标题
HTML 标题（Heading）是通过标签 < h1>-< h6>来定义的.
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题title>
head>
<body>
<h1>这是标题 1h1>
<h2>这是标题 2h2>
<h3>这是标题 3h3>
<h4>这是标题 4h4>
<h5>这是标题 5h5>
<h6>这是标题 6h6>
body>
html>
3.2 段落
HTML 段落是通过标签 < p> 来定义的。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题title>
head>
<body>
<p>这是一个段落p>
<p>这是一个段落p>
<p>这是一个段落p>
body>
html>
3.3 链接
HTML 链接是通过标签 < a> 来定义的。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>
<a href="https://editor.csdn.net/md?not_checkout=1&articleId=126843176">这是一个链接使用了 href 属性a>
body>
html>
3.4 图像
HTML 图像是通过标签 < img> 来定义的。注意： 图像的名称和尺寸是以属性的形式提供的。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>
<img src="KID.jpg" alt="" width="200" height="300">
body>
html>
3.5 表格
表格由 < table> 标签来定义。每个表格均有若干行（由 < tr> 标签定义），每行被分割为若干单元格（由 < td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用 < th> 标签进行定义。如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>
<table>
<tr> //表格若干行
<th>姓名th> //表头
<th>电话th>
tr>
<tr>
<td>小李td> //表格数据
<td>123td>
tr>
<tr>
<td>小仝td>
<td>456td>
tr>
table>
body>
html>
（1）给表格加个边框：
<table border="1px">
（2）设置尺寸：
<table border="1px" width = "300px" height = "200px">
（3）边框变单层：
根据上图我们会发现边框是双层的，所以我们可以设置为单层的。
<table border="1px" width = "300px" height = "200px" cellspacing = "0">
（4）表格内容居中：
这里简单使用了CSS。
<table border="1px" width = "300px" height = "200px" cellspacing = "0">
<style>
td{
text-align: center; //文字居中
}
style>
<tr>
<th>姓名th>
<th>电话th>
tr>
<tr>
<td>小李td>
<td>123td>
tr>
<tr>
<td>小仝td>
<td>456td>
tr>
table>
3.6列标签
（1）有序标签：
<ol>
<li>列表li>
<li>列表li>
ol>
（2）无序列表：
<ul>
<li>列表li>
<li>列表li>
ul>
3.7表单标签
3.7.1单行输入框：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTMl入门title>
head>
<body>
<input type="text"> //单行输入框
body>
html>
3.7.2密码框：
<input type="password">
3.7.3单选框：
<input type="radio">男
<input type="radio">女
但是我们会发现，它会出现两者都可的现象
所以我们给给它设置一个name，只要把name设成相同的值，此时就是“排它”的。这样就不会出现同时可以选择两个的情况。
<input type="radio"name = "gender">男
<input type="radio"name = "gender">女
还有有时候网页打开的时候，单选按钮的圈太小了，不好点击，所以可以通过特殊手段，让点击文字也能达到选中的效果，最后我们还可以在实现加载页面时自动选择一个选项。
<input type="radio"name = "gender"id = "male">
<label for="male">男label>
<input type="radio"name = "gender"id = "female">
<label for="female">女label>
<input type="radio"name = "gender"id = "male"checked = "checked">
3.7.4复选框：
<input type="checkbox">数学
<input type="checkbox">语文
<input type="checkbox">英语
3.7.5下拉菜单：
<select>
<option value="">上海option>
<option value="">北京option>
<option value="">深圳option>
<option value="">广州option>
select>
