前言:
使用VS Code进行一系列的实操,跟着学习,一起进步。这章大部分代码注释都在代码段里边,需要点开查阅。作者希望和大家一起探讨,不断吸取经验,感谢鼓励。之后还会有有关CSS、JavaScript、JQuery等的更新,欢迎关注收藏订阅。
学习内容:
1.HTML语言概述
2.基本HTML标签
3.表格设置
4.表单设置
一、 HTMl语言概述
<!DOCTYPE html>
<!-- 根标签,表示自己是一个HTML文档 -->
<html lang="en">
<head>
<!-- 头部信息编辑处 -->
<meta charset="UTF-8">
<!-- 当前文档的字符集是采用utf-8的字符,
也就是我们常说英文字符集;
uft-8 是Unicode的其中一个使用方式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 页面标题,网页的名字 -->
</head>
<body>
<!-- HTML主体标签,用于显示HTML文档所要显示的内容 -->
</body>
</html>
二、 基本HTML标签
1.标题标签:h1-h6六个标签,有三种对齐方式,左对齐:left通常默认左对齐;右对齐:right;
居中:center。
<body>
<h3>默认左对齐</h3>
<h3 align="left">左对齐</h3>
<h3 align="right">右对齐</h3>
<h3 align="center">居中</h3>
</body>
2.
<p>标签:文本文档的基本形式输出,同样可以设置三种对齐方式,可以根据浏览器页面自动换行
<hr>水平线,将段落之间用水平线隔开。 <br>强制换行
<body>
<!-- 可以使用color设置文本颜色,font-size设置字体大小(px) -->
<p align="center" >这是第一个p标签居中样式</p>
<hr color="red" width="200px" size="20px">
<!-- 水平线分开上下段落,width设置宽度,size设置水平线高度 -->
<p>这是第二个p标签,<br>从此处换行</p>
</body>
3.<div></div>块标签,将一些文档放在一起。列表标签:有序列表ol和无序列表ul。
<body>
<div>这是一个块
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
<!-- 使用快捷ol>li{&}*3 -->
<!-- ol>li{列表前的文字(如上面列表)+&(占位,依次增加)}*3(一共的列表数目) -->
<ul>
<li type="disc">图片1,样式为实心圆</li>
<li type="circle">图片2,样式为空心圆</li>
<li type="square">图片3,样式为方块</li>
</ul>
<!-- 同样可以使用快捷ul>li{&}*3 -->
</div>
</body>
4.img图像
<img src="D:\Vs Code\Vs Code练习\img\5.jpg" alt="">
<!--绝对路径,文件在电脑上的具体位置 -->
<img src="./img/1.jpg" alt="">
<!-- ./img子级关系 用./查找,在同一文件下的不同位置-->
<img src="../img/2.jpg" alt="">
<!-- ../父级关系 可以往上层继续使用多次../ -->
<img src="https://pic3.zhimg.com/v2-c4a43d5ae17408c37680a0fc8db61c4b_r.jpg?source=1940ef5c" alt="">
<!-- 网络地址 网络上某些图片的url地址 -->
5.超链接<a></a>。点击后跳转到相应的网站
<body>
<a href=""></a>
<!-- 超文本链接标签 用href描述链接的地址-->
<a href="https://www.jd.com">京东</a>
<!-- 可以是某网站的url地址 后跟文本信息,单击时跳转 -->
<a href="https://www.163.com">
<img src="../img/2.jpg" alt="" width="100px" title="网易">
<!-- 点击处也可以是一个图片、一段文字,一个符号等 -->
</a>
<!-- 通过点击图片跳转 -->
<a href="https://www.taobao.com">。。</a>
<!-- 通过点击一些符号跳转 -->
</body>
三、表格设置
创建表格使用<table>标签,表格既是一种可视化交流模式,又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。
<body>
<!-- 进行下边的实列操作可以介绍 -->
<p>合并单元格6和7:colspan</p>
<p>合并单元格15和20:rowspan</p>
<p>水平合并,保存左边,删除右边</p>
<p>垂直合并,保存上边,删除下边</p>
<!-- 快速创建表格的方法:
这里的列子是:table>tr*5>td*5,五行五列的
tr后边乘以所需的行数,td后边乘以所需的列数-->
<table border="1" width="400" height="400">
<!-- border设置的是表格边线的宽度(border=0表示无边框),
width设置的是表格的宽度,height设置的是表格的高度 -->
<caption>这是五行五列的表格</caption>
<!-- caption:这里可以填写表格的名字 -->
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="2">单元格6单元格7</td>
<!-- colspan将列合并,水平方向上的单元格合并 -->
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td rowspan="3">单元格13 18 23</td>
<!-- rowspan将行合并,垂直方向上的单元格合并 -->
<td>单元格14</td>
<td rowspan="2">单元格15单元格20</td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格16 17 21 22</td>
<!-- 同时合并水平和垂直方向上的单元格 -->
<td>单元格19</td>
</tr>
<tr>
<td>单元格24</td>
<td>单元格25</td>
</tr>
</table>
</body>
表头一般在第一行,可以将<td>标签换成<th>标签,<th>标签的作用是将其文本加粗居中
四、表单设置
表单在网页中主要负责数据采集功能,分为表单标签、表单域和表单按钮。
1.表单基本定义及文本框和密码框:
<body>
<form action="https://www.baidu.com" method="get">
<!-- action里边写的是服务器地址,代表提交后在哪里处理,
method是提交表单的方法 -->
<!-- 表单域 -->
用户名: <input type="text">
密 码: <input type="password">
<input type="submit" value="登录">
<!-- 提交按钮 input是标签名 type属性为submit
value值为按钮上的文字显示(如提交 默认为提交) -->
<input type="reset" value="重置按钮">
<!-- 重置按钮 type属性为reset value值默认为重置 -->
</form>
</body>
2.多行文本框
<textarea rows="显示的行数" cols="每行的字符数" name="元素名">
初始文本信息(可以不写) </textarea>
3.单选按钮与复选框
单选按钮type属性使用radio,复选框type属性使用checkbox。
<body>
<!-- 以列子说明 -->
<form action="https://www.baidu.com" method="get ">
男: <input type="radio" name="sex" value="man">
女: <input type="radio" name="sex" value="woman">
<!-- 单选文本按钮 name属性必须一致(因为这是在单选按钮组中)
value值为服务器获取的处理值 -->
<br>
<!-- 换行展示,效果更直观整齐 -->
选择喜欢的水果:
<br>
苹果:<input type="checkbox" name="1[]" value="apple">
香蕉:<input type="checkbox" name="1[]" value="banana">
梨子:<input type="checkbox" name="1[]" value="pear">
<!-- 复选框按钮,name属性可以不同,因为它是多选项 -->
<br>
<input type="submit">
<!-- 提交按钮 -->
</form>
</body>
4.表单元素分组与下拉列表和列表框
当表单里包含较多元素时,通过<fieldset>实现信息的分组,嵌套在<form>里面。
<body>
<form action="https://www.baidu.com">
<!-- 提交到百度处理 -->
<fieldset align="center">
<!-- legend设置分组的标题 设置在显示中间 -->
<legend>这是第一个分组表单 </legend>
<!-- 本表单的文本设置,对控件的定义等 -->
<p>你好</p>
请输入信息: <input type="text">
提交:<input type="submit">
重置:<input type="reset">
</fieldset>
<fieldset align="center">
<!-- 显示在中间 -->
<legend>这是第二个分组表单</legend>
<!-- 下拉列表 必须点开下拉才能显示全部信息-->
<select name="1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<!-- 使用快捷select>option*3(所需的列表项数量)
创建三个下拉列表选项 填入基本信息 -->
<input type="submit">
</fieldset>
<fieldset align="center">
<!-- 显示在中间 -->
<legend>这是第三个分组表单</legend>
<select name="2" size="4">
<!-- 列表框 直接显示所有信息出来
size表示的是显示数量,是下拉的变形-->
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<input type="submit">
</select>
</fieldset>
</form>
</body>
》》》》》》》》》》》》》》》》》》》》》
谢谢你在百忙之中观看,小鱼在这里致以诚挚的问候。若代码有误,还望指出,您的指出是我前进的动力,希望您多多支持!今天的学习就到此为止吧,咱们下期再见。