HTML学习

最新推荐文章于 2025-06-04 22:36:18 发布

原创最新推荐文章于 2025-06-04 22:36:18 发布 · 329 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html

前段学习专栏收录该内容

3 篇文章

订阅专栏

本文阐述了遵循Web标准的重要性，包括提升网页的可访问性、搜索引擎优化、降低成本和提高加载速度。介绍了Web标准的三个核心方面：结构（HTML）、表现（CSS）和行为（JavaScript）。并详细讲解了HTML的基本标签和属性，如div、span、img、a、table、ul、ol、dl、form等，以及如何使用这些标签创建网页结构和交互。

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

第一天

为什么需要Web标准

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统一,还有以下优点

让Web的发展前景更广阔
内容能被更广泛的设备访问
更容易被搜索引擎搜索
降低网站流量费用
使网站更易于维护
提高页面浏览速度

Web标准的构成

主要包括结构(Structure)、表现(Presentation)和行为(Behavior)三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类、现阶段主要是HTML
表现	表现用于设置网页元素的版式、颜色、大小等外观样式、主要值的是CSS
行为	行为是指网页模型的定义及交互的编写、现阶段主要是Javascript

VScode 插件

第二天

表格

主要用于显示、展示数据。可以让数据显示的非常规整和可读性好

合并单元格

column列   row行   span跨度  align对齐
跨行合并：rowspan=" 合并单元格的个数"
跨列合并：colspan="合并单元格的个数"

列表标签

表格是用来显示数据的,那么列表就是用来布局的

列表的最大特点就是整齐、整洁、有序，他作为布局会更加的自由和方便

根据使用场景不同,列表可以分为三大类:无序列表、有序列表和自定义列表


1=>无序<重点>：实际开发会通过css把前面的.去调
    <ul>
    <li></li>
    <li></li>
    </ul>
<ul>中只能嵌套<li>,<li>相当于一个容器可以容纳所有的元素
2=>有序
    <ol><li></li></ol>
3=>自定义列表
    常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号
    <dl>
    <dt>名词</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    </dl>
    <dl>标签用于定义描述列表(或定义列表),该标签会与<dt>(定义项目/名字)和<dd>
    (描述每一个项目/名字)一起使用

表单标签

使用表单的目的是为了收集用户信息

在HTML中,一个完整的表单通常有表单域、表单控件(也称为表单元素)和提示信息3个部分构成

表单域：<form>

表单控件:

<input>标签

<lable>标签

<label>标签为<input>元素定义标注(标签)

<label>标签用于绑定一个表单元素,当点击<label>标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
ps:for的值与对应元素的id属性相同

<select>标签

使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间，我们可以使用<select>标签控件定义下拉列表

<select>
    <option>选项一</option>
    <option>选项二</option>
    <option>选项三</option>
</select>
ps:1-<select>中至少有一个<option>
   2-<option>中定义select="select",当前选项即为默认选项

<textarea>标签

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。在表单元素当中,<txetarea>标签是用于多行文本输入的控件

用处：使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论

<textarea rows="3" cols="20">

</txetarea>

HTML学习

第一天

为什么需要Web标准

VScode 插件

标签

必须包含的

<div>和<span>标签

图像标签<img>

超链接<a>

第二天

表格