HTML基础知识详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44872216/article/details/99176961

本文详细介绍了HTML的基本结构和常用标签，包括标题、段落、换行、字符实体、块级和行内标签、图像、链接、列表、表单以及表格的使用方法。重点讲述了各个标签的属性和作用，以及在网页设计中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html基本结构

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

<!-- 这是一段注释  -->

快捷键 !+tab

html标签

通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题
<h2>这是二级标题
<h3>这是三级标题
<h4>这是四级标题
<h5>这是五级标题
<h6>这是六级标题

html段落标签

<p>一个段落含有默认的上下间距

html换行标签

<br>
直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行

html字符实体

&nbsp 空格的字符实体 html中只能输入一个空格,在段落前想缩进两个文字的空格
“<” 和 “>” 的字符实体为 < 和 >
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体

html块标签、含样式的标签

html块标签

1、<div> 标签块元素，表示一块内容，没有具体的语义。

2、<span> 标签行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签

1、<em> 标签行内元素，表示语气中的强调词

2、<i> 标签行内元素，表示专业词汇

3、<b> 标签行内元素，表示文档中的关键字或者产品名

4、<strong> 标签行内元素，表示非常重要的内容

html图像标签、绝对路径和相对路径

html图像标签
- <img>标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
  - src属性定义图片的引用地址
  - alt属性定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
    <img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
- 绝对地址：相对于磁盘的位置去定位文件的地址
- 相对地址：相对于引用文件本身去定位被引用的文件地址
- ./ 表示当前文件所在目录下
- ../ 表示当前文件所在目录下的上一级目录

html链接标签

<a> 标签可以在网页上定义一个链接地址，它的常用属性有：
- href 属性定义跳转的地址
- title 属性定义鼠标悬停时弹出的提示文字框
- target 属性定义链接窗口打开的位置
  - target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
  - target="_blank" 新页面会在新开的一个浏览器窗口打开

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.baidu.com/" title="跳转到百度的链接">百度</a>
<a href="2.html" target="_blank">测试页面2</a>

a链接标签默认有下划线此时我们需要去除下划线

/* 去掉下划线 */
a{text-decoration:none;}

html列表

有序列表
- 每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

无序列表
- 在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

去掉小圆点的css代码

/*  去掉小圆点以及数字   */
ul,ol{
	list-style:none;
}

定义列表
定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
    
</dl>

具体效果如图
在这里插入图片描述

html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：

<from>标签定义整体的表单区域

action属性定义表单数据提交地址
method属性定义表单提交的方式，一般有“get”方式和“post”方式

<label>标签为表单元素定义文字标注
<input>标签定义通用的表单元素

type属性
- type="text"定义单行文本输入框
- type=“password” 定义密码输入框
- type=“radio” 定义单选框
- type=“checkbox” 定义复选/多选框
- type=“file” 定义=上传文件
- type=“submit” 定义提交按钮
- type=“reset” 定义重置按钮
- type=“button” 定义一个普通按钮
- type=“image” 定义图片作为提交按钮，用src属性定义图片地址
- type=“hidden” 定义一个隐藏的表单域，用来存储值
value属性定义表单元素的值
name属性定义表单元素的名称，此名称是提交数据时的键名

<textarea>标签定义多行文本输入框
<select>标签定义下拉表单元素
<option>标签与<select>标签配合，定义下拉表单元素中的选项

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>

<p>
<label>密码：</label><input type="password" name="password" />
</p>

<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>

<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>

<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>

<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>

<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>

<p>
<input type="submit" name="" value="提交">
<!-- input类型为submit定义提交按钮  
     还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如：
     <input type="image" src="xxx.gif">
-->
<input type="reset" name="" value="重置">
</p>
</form>