学习笔记（1）HTML基础

酒鼎

已于 2025-07-02 16:14:36 修改

阅读量153

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签：学习前端 html

于 2022-08-31 10:47:46 首次发布

本文链接：https://blog.csdn.net/dugujiuding/article/details/125856101

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文是HTML基础学习笔记，介绍了HTML文档、标题、链接、图像等基础内容，阐述了HTML元素的定义、分类及转换方式，还提及列表（有序、无序、定义列表）、表格和表单元素（输入框、按钮、单选框等）的相关知识。

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

1，HTML基础

HTML：超文本标记语言 (Hyper Text Markup Language)。
HTML是用来描述网页内容与结构的标记语言。

1.1，HTML文档

HTML 文档包含了HTML 标签及文本内容；也叫做 web 页面。

1.2，HTML标题

HTML标题是通过h1-h6标签定义的。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

1.3，HTML链接

HTML 链接是通过a标签来定义的。

<!-- 在本页面打开新网址 -->
<div>
	<a href="https://www.baidu.com">跳转到百度</a>
</div>

<!-- 打开一个新窗口，再跳转 -->
<div>
	<a href="https://www.baidu.com" target="_blank">跳转至百度</a>
</div>

1.4，HTML图像

HTML图像是用img标签定义的。

src绑定的是图片地址；alt是图片未正确显示，而显示的文字，width和height设置宽高。

<img src="img01.jpg" alt="图片显示错误" width="200" height="100">

2，元素

2.1，HTML元素

HTML 元素以开始标签起始，以结束标签终止，
元素的内容是开始标签与结束标签之间的内容。

<!--   <h1>是开始标签，</h1>是结束标签     -->
<h1>今天是个好日子</h1>

2.2，元素分类

元素分3类：行元素、块元素、行内块元素；这3类元素可以通过display属性进行任意转换。

display:inline;  /*转换为行内元素*/
display:block;  /*转换为块状元素*/
display:inline-block;  /*转换为行内块状元素*/。

名字	例子	特点
行元素	a，span	不能设置宽高，宽高取决于元素本身的内容。多个元素占用一行，最后会自动换行。
块元素	di，p，h1—h6。	独占一行，可以设置宽高。如果不设置宽高，宽度就继承父元素的宽度，高度是0。如果有内容，高度就是内容的高度。
行内块元素	button，input，img。	既有行元素的特性，也有块元素的特性。可以为元素设置宽高，不独占一行，多个行内块会左右排列。

外边距重叠的条件?
1，必须是块元素，
2，必须是向下的外边距，
3，没有边框。

3，列表

列表有三类：有序列表（ol标签）、无序列表（ul标签）、定义列表（dl标签）

/* 删除列表项的前缀。 */
list-style:none;

有序列表

<ol>
	<!--  列表项，li标签 -->
	<li>Firefox</li>
	<li>Edge</li>
	<li>google</li>
</ol>

无序列表

<ul>
    <li>Firefox</li>
    <li>Edge</li>
    <li>google</li>
</ul>

定义列表

<dl>
	<!-- 描述项目中的标题 -->
	<dt>html</dt>
	<!-- 具体内容 -->
	<dd>vue是当今最流行的前端框架之一</dd>
</dl>

4，表格

标签	描述
table	块元素，显示一个表格。
tbody	表主体
thead	表头部，显示表的头部数据。
tr	代表一行
th	代表`表头中`的一个单元格
td	代表`表主体`的一个单元格

<!-- 行合并：rowspan -->
<td rowspan="2">张三</td>当前td所占的行高是两行的高度 
<!-- 列合并：colspan -->
<td colspan="2">25</td>表示当前单元格要占用两列的宽度

5，表单元素

input：输入框，行内块元素。placeholder：提示内容。

<input type="text" placeholder="请输入账号">

button：按钮，行内块元素。

<button>按钮</button>

lable标签：用于关联一个其他的表单元素，for属性需要写关联元素的id，点击lable相当于点击了关联的元素。

<label for="psw">密码:</label>

radio：单选框，处在同一组的单选框只能选一个值。

<input type="radio" name="city">
<label for="">上海</label>
<input type="radio" name="city">
<label for="">深圳</label>
<input type="radio" name="city">
<label for="">北京</label>
<input type="radio" name="city">

chechbox：复选框，可以多选。

<label for="">香蕉</label>
<input type="checkbox">
<label for="">苹果</label>
<input type="checkbox">
<label for="">西瓜</label>
<input type="checkbox">

select：下拉列表，行内块。
option：下拉列表项。

<select id="nvyou">
<!-- option 下拉列表项 -->
<option>小明</option>
<option>小红</option>
<option>小刚</option>
</select>