HTML的总结

最新推荐文章于 2023-06-24 13:40:39 发布

∮d(y)√i²

最新推荐文章于 2023-06-24 13:40:39 发布

阅读量69

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/qq_60680687/article/details/125978628

版权

1、html简介

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2、HTML的标签

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

2、1 head 标签

标签	描述
<head>	定义了文档的信息
<title>	定义了文档的标题
<base>	定义了页面链接标签的默认链接地址
<link>	定义了一个文档和外部资源之间的关系
<meta>	定义了HTML文档中的元数据
<script>	定义了客户端的脚本文件
<style>	定义了HTML文档的样式文件

2、2 body 标签

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）body是用在网页中的一种HTML标签，标签是用在网页中的一种 HTML 标签，表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。

3、标签的总结

3、1 文本格式标签

标签	说明
<strong> <b>	加粗
<em> <i>	斜体
<ins> <u>	下划线
<sup> <sub>	上标和下标
<del>	删除线

3、2 段落标签

标签	说明
h1-h6	标题
<p>	段落
<br>	换行
<hr>	水平线
<div>	块元素
<span>	行内元素

3、3 图片标签

src	图像的文件地址
alt	图片显示不出来时的提示文字
title	鼠标移到图片上的提示文字

3、4 路径

相对路径：指的是同一个网站下，不同文件之间的的位置定位。引用的文件位置是相对当前文件的位置而言，从而得到相对路径。

绝对路径，指的是文件的完整路径。

3、5 列表标签

标签	解释
ol	有序列表
ul	无序列表
dl	定义列表

3、5.1 有序列表

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

效果

3、5.2 无序列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

效果

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

3、5.3 定义列表

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

效果：

3、6 表格标签

标签	解释
table	表格
tr	行
td	单元格

3、6.1 表格和边框属性

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

3、6.2 表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本。

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

效果：

3、6.3 表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

4、表单

id	元素的唯一表示，不重复
name	很重要–提交数据到服务器之后，服务器获取数据通过该名称
value	服务器获取数据通过name获取到的就是value
type	表示表单项元素的呈现形式
class	表示样式名称
readonly	表示只读

4、1 input标签

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性

类型	解释
text	定义常规文本输入。
radio	定义单选按钮输入（选择多个选择之一）
submit	定义提交按钮（提交表单）

4、2 textarea标签

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

4、3 select和option

下拉列表由<select>标签和<option>标签配合使用。

<select>

        <option>山东</option>

        <option>北京</option>

        <option>天津</option>

        <option selected="selected">重庆</option>

    </select>

效果：

4、4 按钮

reset	重置按钮
submit	提交按钮
image	图像按钮
file	上传文件
hadden	隐藏域
email	邮件
data	时间段
color	颜色

4、5 表单案例

此表单包含两个复选框和一个确认按钮。

<html>

<body>

<form name="input" action="/html/html_form_action.asp" method="get">
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" checked="checked" />
<br />
I have a car: 
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane: 
<input type="checkbox" name="vehicle" value="Airplane" />
<br /><br />
<input type="submit" value="Submit" />
</form> 

<p>如果您点击 "Submit" 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>
</html>

效果：

表单综合实验：

<!DOCTYPE html>
<html>
<head>
	<title>表单标签</title>
</head>
<body>
 <div align="center">
 	<from>
          <h1>注册界面</h1><br>
          用户名：<input type="text" value="请输入用户名"><br>
          密&nbsp;&nbsp;码:<input type="password"><br>
          请输入您的性别：<input type="radio" value="男" name="gender">男
          <input type="radio" value="女" name="gender">女<br>
          请选择您的爱好：<input type="checkbox" >足球
          <input type="checkbox"  name="checkbox">篮球
          <input type="checkbox">LOL
          <input type="checkbox">韩剧
          <input type="checkbox">王者荣耀<br>
          邮箱：<input type="email" value="请输入您的邮箱"><br>
          用户头像：<input type="file"><br>
          您的家庭住址：<select multiple="multiple" name="住址">
          	<option value="北京">永川</option> <option>江北</option>
           <option>万州</option>
           <option selected="selected">重庆</option>
          </select><br>
          请您留下您的建议或者意见：<textarea cols="20" rows="5">
          </textarea>
          注册时间：<input type="time"><br>
          颜色： <input type="color"><br>
          <input type="submit" value="注册"><br>
          <input type="reset" value="重置">
 	</from>
 </div>

</body>
</html>

效果：