SJDocs

Appearance

HTML ​

1 标签-文本标签 ​

html的预定义标签有很多，我们将来进入公司主要做后台开发的，所以，我们学习前端的html标签，只要学习一些基本的常见前端程序员的工作的标签即可

常见标签

  1. 文本标签
  2. 图片音频视频标签
  3. 超链接表格标签 显示列表
  4. 布局标签
  5. 表单标签 提交数据
  6. 表单项标签 填写数据

文本标签 ​

文本标签顾名思义，都是用来修饰文本的，包括标题，段落，加粗等，具体需要学习的标签以及代表的含义如下表格所示：

标签描述
<h1> ~ <h6>定义标题，h1最大，h6最小
<font>定义文本的字体、字体大小、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线

字体标签 ​

在网页上可以看到五颜六色的文字，在html中，我们可以通过<font>标签来修饰，标签的具体含义和属性如下表所示：字体标签前端不常用

标签属性描述
<font>字体标签，修饰文本的颜色、大小、样式
color设置文本的颜色
size设置文本的大小，取值为1-7，其中1最小，7最大
face用来设置字体。如 "楷体"、"宋体"等

对于color属性取值有3种，分别是

  • 英文单词：颜色的单词，例如red,blue等等，但是表示的颜色有限制
  • rgb(值1，值2，值3)：三原色表示法，取值范围为0-255之间
  • #值1值2值3：还是三原色表示法，上述的简写方式，取值是16进制法，所以在00-FF之间

添加如下代码：

html
 <font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>

水平线标签 ​

在网页中看到水平线，是通过

标签来实现的

居中标签 ​

<center>标签即可做到文本内容是居中的效果

html
<center>HTML</center>
<hr>

斜体、加粗、下划线标签 ​

网页中，我们也经常看到一些斜着或者加粗或者有下滑线的字体，可以通过如下标签来实现

标签描述
<b>加粗
<i>斜体
<u>下划线

添加如下代码：

html
HTML 
<i>HTML</i> 
<b>HTML</b> 
<u>HTML</u>
<hr>

换行标签 ​

可以通过<br>标签去换行

修改上述代码如下：

html
HTML <br>
<i>HTML</i> <br>
<b>HTML</b> <br>
<u>HTML</u> <br>
<hr>

段落标签 ​

添加如下文本和代码：

html
已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。<br>
而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。
<hr>

我们通过换行标签对文本进行换行，但是行之间太紧密了，此时我们可以使用<p>段落标签来修饰，添加如下代码：

html
<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>

此时看着更加舒服。

2 标签-图片音频视频标签 ​

图片音频视频标签 ​

我们再浏览网页的时候，经常看到网页上有图片、视频，音频等，那么如何再网页上嵌入图片等元素呢？所以接下来我们需要学习相关的标签以及含义如下表所示：

标签属性描述
<img>在页面上引入图片的
height用来定义图片的高度
width用来定义图片的宽度
src规定显示图像的 url（统一资源定位符）
<audio>定义音频(支持MP3、MAV、OGG)
src规定音频的 url
controls显示播放控件
<video>定义视频(支持MP4、WebM、OGG)
src规定视频的 url
controls显示播放控件

超链接表格标签 ​

本节主要学习超链接标签的具体使用以及表格标签的使用，具体标签以及其含义如下表格所示:

标签属性描述
<a>定义超链接，用于连接到另一个资源
href指定需要访问的资源的URL
target_self,默认值，在当前页面打开, _blank在空白页打开

接下来我们需要通过VS Code开发工具来开发html，演示上述标签的作用

无序列表： ​

html
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
......
</ul>

有序列表： ​

html
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
......
</ol>

3 标签-表格/表单标签 ✏️ ❤️ ​

表格标签 ​

标签属性描述
<table>定义表格
broder规定表格边框的粗细
width规定表格的宽度
cellspacing规定单元格之间的空白
<tr>定义表格的行
align定义表格行的内容对齐方式
<td>定义普通单元格
<th>定义表头单元格，会有加粗居中的效果

在浏览网页的时候，我们也经常看到使用表格来做报表，所以我们通过代码来演示表格标签，添加如下代码；

html
<hr><hr>  
<!-- width是宽度，border是线的粗细， cellspacing是单元格的距离-->
<table width="50%" border="1" cellspacing="0">
    <!-- tr是代表每一行 -->
        <tr>
            <!-- th是每一列，第一列是标题 -->
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr align="center">
             <!-- td是每一列，第一列是标题th，其余的td -->
            <td>001</td>
            <td><img src="img/huawei.jpg" height="50" width="70"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td><img src="img/alibaba.jpg" height="50" width="70"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

布局标签 ​

接下来我们要学习的布局相关的标签以及其含义如下表所示：

标签描述
<div>定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。
<span>用来组合行内元素。一般用来展示文本

注意： 👈

  • div占据一整行，span仅仅占据文本部分
  • div的高度想要高一点，可以通过css设置高度，此处我们不做演示。

表单标签 ​

这是前端和后台进行交互的一种手段，必须掌握。

  • 表单标签(负责提交数据给后台程序)
  • 表单项标签（负责提供给用户输入数据的组件，如输入框，单选，复选，按钮等）

首先我们要学习的表单标签以及其含义如下表格所示：

标签属性描述
<form>定义表单的
action定义表单数据提交的服务器地址
method定义表单数据提交的方式，一般有get和post这2种

表单项标签如下：

标签属性描述
<input>定义表单项，通过type属性控制输入形式,接受用户的信息
type定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>字标签定义选项
<textarea>定义文本域

表单项标签和表单标签是配合在一起工作的，表单项标签必须书写在表单标签<form>中，他们之间的关系,举个例子：

假设我们需要寄快递，表单项标签就是需要寄出的物品，有文本域，密码框，然后这些物品需要打成一个包裹，就是表单标签<form>

,包裹上面需要指明顺丰快递（请求的方式method属性）和寄出的地址(action属性)

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单标签</title>
</head>
<body>

    <!-- 
        action: 表单数据提交的url , 如果未指定, 默认提交到当前页面.

                表单项要想被提交必须指定name属性

        method: 表单提交方式 ; 
            get: 默认值 , 表单数据在url后面拼接  ?username=java&age=22 ; url长度有限 .
            post
     -->
    <form action="" method="post">
        <input type="text" name="username">
        <input type="text" name="age">
        <input type="submit" value="提交">
    </form>

</body>
</html>

表单项标签 ​

表单标签我们学习过了，接下来我们要学习表单标签中的表单项标签，如下表是我们要学习的表单项标签以及其含义：

标签属性描述
<input>定义表单项，通过type属性控制输入形式,接受用户的信息
type定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>字标签定义选项
<textarea>定义文本域

type取值以及表现形式如下：

type取值描述描述形式
text默认值，定义单行的输入字段1668016526099
password定义密码字段1668016722147
radio定义单选按钮1668016732096
checkbox定义复选框
file定义文件上传按钮
hidden定义定义定义定义
submit定义提交按钮，提交按钮会把表单数据发送到服务器端1668016767325
reset定义重置按钮，重置按钮会清除表单中的所有数据1668016779793
button定义可点击按钮1668016788307

接下来，我们通过代码，来演示表单标签的作用

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="http://wwww.baidu.com" method="post">
     姓名: <input type="text" name="name"> <br><br>

     密码: <input type="password" name="password">  <br><br> 

     性别: <input type="radio" name="gender" value="1"> 男
          <input type="radio" name="gender" value="2"> 女  <br><br>

     爱好: <input type="checkbox" name="hobby" value="java"> java 
          <input type="checkbox" name="hobby" value="game"> game 
          <input type="checkbox" name="hobby" value="sing"> sing  <br><br>

     图像: <input type="file" name="image">  <br><br>

     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">初中</option>
               <option value="2">高中</option>
               <option value="3">大专</option>
               <option value="4">本科</option>
               <option value="5">硕士</option>
               <option value="6">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     
     <input type="hidden" name="id" value="1">
     <!-- 表单常见按钮 -->
     <input type="submit" value="提交">  
     <input type="reset" value="重置"> 
     <input type="button" value="按钮">  <br>
</form>

</body>
</html>

用心去做高质量的内容网站，欢迎 star ⭐ 让更多人发现

MIT License | 版权所有 © 2023-2024 SJDocs contributors