HTML基础知识详解

爱笑的Sunday

已于 2023-07-31 09:10:27 修改

阅读量73

点赞数 1

文章标签： html 前端 java

于 2023-07-21 15:33:32 首次发布

本文链接：https://blog.csdn.net/weixin_57800914/article/details/131851147

版权

概念

HTML是超文本标记语言，是最基础的网页开发语言。

超文本：用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言：标记语言不是编程语言，由标签构成的语言 <标签名称>如html、xml。

语法

1. html文档后缀名 .html 或者 . htm

2.标签分类：围堵标签，有开始标签和结束标签，如<html></html>

自闭和标签，开始标签和结束标签在一起，如<br/>

3.标签需要正确嵌套，不能你中有我，我中有你。正确用法：<a><b></b></a>

4.在开始标签中可以定义属性，属性由键值对构成，值需要用引号引起来（单双都可）。

5.html标签不区分大小写，建议小写。

标签学习

1.文件标签

（1）html：html文档的根标签。

（2）head：头标签，用于指定html文档的一些属性，引入外部资源。

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

head和header区别：head 标签用于定义文档头部，它是所有头部元素的容器。

header 标签用于定义文档的页眉（介绍信息）。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接。

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表。

<style> 标签定义了HTML文档的样式文件引用地址。
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档。

<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

<script>标签用于加载脚本文件，如： JavaScript。

（3）title标签：定义了浏览器工具栏的标题，当网页添加收藏夹时显示在收藏夹中的标签，显示在搜索引擎结果页面的标题。

（4）body标签：体标签，当我们浏览网页时，展示在页面上的内容。

（5） <!DOCTYPE html >：html5中定义该文档是html文档。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="sunday" content="免费 Web & 编程 教程">
<title>菜鸟教程(runoob.com)</title>
<!-- <base href="http://www.runoob.com/html/" target="_blank"> -->
<link rel="stylesheet" type="text/css" href="css/firstweb.css">
<!-- <style type="text/css">
    body {
        background-color:rgb(135, 222, 222);
    }
    p {
        color:blue
    }
</style> -->
</head>
<body>

</body>
</html>

2.文本标签

（1）标题标签：<h1>至<h6>

h1~h6字体大小逐渐递减.

搜索引擎使用标题为网页的结构和内容编制索引.

（2）段落标签：p

（3）换行标签：br

（4）展示一条水平线：hr

（5）字体加粗：b

（6）字体斜体：i

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

<hr/>

<a href="html-tutorial.html" ><i>菜鸟教程</i></a>

<br/>

<hr/>

<b>加粗文本</b><br><br>

<i>斜体文本</i><br><br>

3.图片标签

img：展示图片

属性：src:指定图片的位置

alt 属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

注意：插入动图的语法和静态图的语法是一样的。

<img src="D:\Dellprojects\javaWeb\web\imgs\lyf.png"/ width=“” hight=“”>

4.列表标签

无序列表

<ul>
<li>项目</li>
<li>项目</li>
</ul>

有序列表

<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

5.链接标签

a : 定义一个超链接

属性：href:指定访问资源的URL（统一资源定位符）

target:指定打开资源的方式： _self:默认值，在当前页面打开

_blank：在空白页面打开

HTML使用标签 <a>来设置超文本链接。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

id属性：

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

6.div和span

div：每一个div占满一整行，块级标签。

与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。

span：文本信息在一行展示，行内标签。

与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。

7.表格标签

table ：定义表格

tr ：定义行

td ：定义单元格

th ：定义表头单元格

caption ：表格标题

thead :表格的头部分

tbody ：表格的体部分

tfoot ：表格的脚部分

<table> 元素表示整个表格，它包含两个主要部分：<thead> 和 <tbody>

<table border="1">

<thead>

<tr>

<th>列标题1</th>

<th>列标题2</th>

<th>列标题3</th>

</tr>

</thead>

<tbody>

<tr>

<td>行1,列1</td>

<td>行1,列2</td>

<td>行1,列3</td>

</tr>

<tr>

<td>行2,列1</td>

<td>行2,列2</td>

<td>行2,列3</td>

</tr>

</tbody>

</table>

8.form表单

HTML 表单用于收集用户的输入信息。
HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

输入元素 <input>标签：

输入类型：文本域<input type="text">

密码字段<input type="password">

单选按钮<input type="radio">

复选框<input type="checkbox">

提交按钮：<input type="submit">

当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。
action 属性会对接收到的用户输入数据进行相关的处理。

method 属性，它用于定义表单数据的提交方式

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="sunday" content="免费 Web & 编程 教程">
<title>菜鸟教程(runoob.com)</title>
<!-- <base href="http://www.runoob.com/html/" target="_blank"> -->
<link rel="stylesheet" type="text/css" href="css/firstweb.css">
<!-- <style type="text/css">
    body {
        background-color:rgb(135, 222, 222);
    }
    p {
        color:blue
    }
</style> -->
</head>
<body>
//单选框
<form action="">
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
  </form>
  <hr>

//复选框
  <form action="">
    <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="Car">I have a car 
  </form>
  <hr>

//下拉列表
  <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
    </select>
  </form>
  <hr>
  
//预选下拉列表
  <form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
    </select>
  </form>
  <hr>

//
  <form action="">
    <input type="button" value="Hello world!">
  </form>
  <hr>
  <form action="demo-form.php">
    First name: <input type="text" name="FirstName" value="Mickey"><br>
    Last name: <input type="text" name="LastName" value="Mouse"><br>
    <input type="submit" value="提交">
  </form>
    <p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>
  <hr>

//
    <form action="demo-form.php" method="get">
      <input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
      <input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
      <input type="submit" value="提交">
    </form></body>

</html>

记住这些基本的标签，学会怎么用，怎么在页面上将标签内容展示出来才是html的关键，加油！！！！！！！！！！！！！！！！！！！！！！！！