【HTML】HTML的基础语法(附思维导图)

简介: 简介:【HTML】HTML的基础语法(附思维导图)

一、HTML结构


vscode中提供的标准骨架。

<!DOCTYPE html>    <!--DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件-->
<html lang="en">   <!--用来定义当前文档显示的主语言-->
<head>
    <meta charset="UTF-8">  <!--描述页面的字符编码方式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--这段代码用于网站页面在手机端显示时根据屏幕进行适应-->
    <title>Document</title>
</head>
<body>
</body>
</html>

二、HTML标签


1、div 和 span 标签

<div><span> 是没有语义的,它们就是一个盒子,用来装内容的

  • div 是独占一行的, 是一个大盒子.
  • span 不独占一行, 是一个小盒子.

2、标题标签

  • 单词 head 的缩写,意为:头部、标题
  • 从一级标题到六级标题,重要性依次递减,字体越小
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

3、段落标签

  • 单词 paragraph 的缩写,意为:段落
<p>我是一个段落标签</p>

4、换行标签

  • 单词:break 的缩写,意为:打断、换行
  • <br /> 是个单标签
  • <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距,而换行不会
<p>准备换行 <br/>
       准备换行 <br/>
        这段要结束了</p>

5、格式化标签

<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>

6、注释标签

  • 增加代码的可读性
<!-- 注释内容 -->

7、图像标签

  • 图像标签是<img/>
  • 单词image的缩写,意思为图像
  • src是必须属性
  • 图像的高度和宽度,一般来讲设置其中之一就可以,另外一个会自动按比例适配image.png
<img src="1.png" alt="吹泡泡的海绵宝宝" title="海绵宝宝" width="800px" height="800px" />

image.png

8、超链接标签

  • 超链接标签是<a></a>
  • 单词 anchor 的缩写,意为:锚
  • href是必须属性
  • target属性的两种打开方式
  • _self : 默认值
  • _blank : 在新窗口中打开的方式
  • 超链接分类
  • 外部链接
  • 内部链接
  • 空连接
  • 下载链接
  • 网页元素链接
  • 锚点链接

image.png

9、表格标签

  • 表格标签是<table> </table>
  • <tr></tr>必须嵌套在<table> </table>
  • <th></th><td></td>必须嵌套在<tr></tr>
  • 表格不是用来布局页面的,而是用来展示数据的
  • 合并单元格
  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan=“合并单元格的个数”
<table>    <!--table标签表示整个单元格-->
    <tr>     <!--tr表示表格的一行-->
        <th>表头单元格</th>    <!--th表示表头单元格,表头单元格中的内容会加粗居中显示-->
    </tr>
    <tr>
        <td>一个单元格</td> <!--td表示一个普通的单元格-->
    </tr>
</table>

表格标签属性,在日后可以使用CSS来完成,简单了解即可image.png

10、列表标签

  • 表格是用来显示数据的,那么列表就是用来布局的
  • 列表分类
  • 无序列表
  • 有序列表
  • 自定义列表
<!--无序列表-->
<u1>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</u1>
<!--有序列表-->
<ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
</ol>
<!--自定义列表-->
<dl>
    <dt>内容1</dt>
    <dd>对内容1的描述1</dd>
    <dd>对内容1的描述2</dd>
    <dd>对内容1的描述3</dd>
</dl>

11、表单标签

11.1 表单域
<form action="url地址" method="表单的提交方式,为get或者post" name="表单域名称,用于区分">
    各种表单元素控件
</form>
11.2 input表单元素
  • 在表单元素中 <input> 标签用于收集用户信息
  • <input /> 标签为单标签
  • <input> 标签的属性
  • type:指定不同的控件类型
  • name:定义input元素的名称
  • value:规定input元素的值
  • checked:规定该input元素首次加载时应该被选中
  • maxlength:规定输入字段中,字符的最大长度image.png
11.3 label标签

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

演示示例:示例传送门

11.4 select表单元素
  • 下拉列表供用户选择
  • <select> 中至少包含一对 <option>
  • <option> 中定义 selected=“selected” 时,当前项即为默认选中项
<select>
    <option selected="selected">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>
11.5 textarea表单元素
  • 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 标签
  • 使用多行文本输入控件,可以输入更多的文字,该控件常用于留言板、评论
  • cols=“每行中的字符数”,rows=“显示的行数”,日后也可以用CSS完成
<textarea rows="3" cols="20">
  文本内容
</textarea>

12、特殊字符

在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代。image.png

三、HTML学习资源


1、学习文档HTML教程

2、学习视频HTML教程

3、思维导图:思维导图我是在GitHub上淘到的,下面给出地址,如果不方便下载的,也可以用百度网盘,我放到网盘里一份。


四、未来可期


文章到这里就要结束了,但故事还没有结局

如果本文对你有帮助,记得点个赞👍哟,也是对作者最大的鼓励🙇‍♂️。

如有不足之处可以在评论区👇多多指正,我会在看到的第一时间进行修正


相关文章
|
7月前
html基础语法
【2月更文挑战第26天】html基础语法
50 5
|
7月前
|
移动开发 前端开发 数据安全/隐私保护
HTML的基本语法以及如何使用HTML来创建网页
HTML的基本语法以及如何使用HTML来创建网页
114 0
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
66 19
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
4月前
|
移动开发 HTML5
HTML5语法
【8月更文挑战第28天】HTML5语法。
44 2
|
4月前
|
存储 移动开发 前端开发
HTML5语法总结
这只是HTML5标准的一个简要概述。它涵盖了基本的元素和属性,还有很多其他细节和特性可以探索,例如Web存储、Web工作线程、离线Web应用等,这些都大大扩展了在网页中可能实现的功能。随着Web技术的不断发展,掌握HTML5是每个前端开发者的必修课,并且也是创建现代化、响应式和互动网页的基础。
50 5
|
4月前
Markdown使用HTML语法实现复杂表格
Markdown使用HTML语法实现复杂表格
154 1
|
5月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
5月前
|
开发者
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
50 1
|
6月前
|
移动开发 前端开发 JavaScript
html语法基础
【6月更文挑战第28天】html语法基础
37 1