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

举报
爱打瞌睡的CV君 发表于 2022/07/07 23:25:59 2022/07/07
【摘要】 文章目录 一、HTML结构二、HTML标签1、div 和 span 标签2、标题标签3、段落标签4、换行标签5、格式化标签6、注释标签7、图像标签8、超链接标签9、表格标签10、列表标签11、表单...

文章目录

一、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>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    •

二、HTML标签

1、div 和 span 标签

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

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

2、标题标签

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    •

3、段落标签

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

  
 
    
  
  • 1
    •

4、换行标签

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    •

5、格式化标签

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

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    •

6、注释标签

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

  
 
    
  
  • 1
    •

7、图像标签

  • 图像标签是<img/>
  • 单词image的缩写，意思为图像
  • src是必须属性
  • 图像的高度和宽度，一般来讲设置其中之一就可以，另外一个会自动按比例适配
标签属性 作用描述
src 放置图片的路径
alt 替换文本，图片不能显示时，显示的文字
title 提示文本，鼠标放到图片上，显示的文字
width 设置图像的宽度
height 设置图像的高度
border 设置图像的边框粗细 
<img src="1.png" alt="吹泡泡的海绵宝宝" title="海绵宝宝" width="800px" height="800px" />

  
 
    
  
  • 1
    •

在这里插入图片描述

8、超链接标签

  • 超链接标签是<a></a>
  • 单词 anchor 的缩写，意为：锚
  • href是必须属性
  • target属性的两种打开方式
    • _self : 默认值
    • _blank : 在新窗口中打开的方式
  • 超链接分类：
    • 外部链接
    • 内部链接
    • 空连接
    • 下载链接
    • 网页元素链接
    • 锚点链接
标签属性 作用描述
href 用于指定链接目标的 url 地址
target 用于指定链接页面的打开方式

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>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    •

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

表格属性 作用描述
align 表格相对于周围元素的对齐方式
border 表示边框. 1 表示有边框, “” 表示没边框.
cellpadding 内容距离边框的距离
cellspacing 单元格之间的距离
width 设置表格的宽度

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>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    • 
  
  • 7
    • 
  
  • 8
    • 
  
  • 9
    • 
  
  • 10
    • 
  
  • 11
    • 
  
  • 12
    • 
  
  • 13
    • 
  
  • 14
    • 
  
  • 15
    • 
  
  • 16
    • 
  
  • 17
    • 
  
  • 18
    • 
  
  • 19
    •

11、表单标签

11.1 表单域
<form action="url地址" method="表单的提交方式，为get或者post" name="表单域名称，用于区分">
    各种表单元素控件
</form>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    •
11.2 input表单元素
  • 在表单元素中 <input> 标签用于收集用户信息
  • <input /> 标签为单标签
  • <input> 标签的属性
    • type：指定不同的控件类型
    • name：定义input元素的名称
    • value：规定input元素的值
    • checked：规定该input元素首次加载时应该被选中
    • maxlength：规定输入字段中，字符的最大长度
type属性值 描述
button 定义可点击按钮
checkbox 定义复选框
file 定义输入字段和“浏览”按钮，供上传文件
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段
radio 定义单选按钮 (同一组按钮，name值必须相同)
reset 定义重置按钮，清空表单中所有数据
submit 定义提交按钮，将表单数据发送给服务器
text 定义单行的输入字段
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>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 
  
  • 4
    • 
  
  • 5
    • 
  
  • 6
    •
11.5 textarea表单元素
  • 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 标签
  • 使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板、评论
  • cols=“每行中的字符数”，rows=“显示的行数”，日后也可以用CSS完成
<textarea rows="3" cols="20">
	文本内容
</textarea>

  
 
    
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    •

12、特殊字符

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

原字符 替换字符
空格符 &nbsp;
< &lt;
> &gt;
& &amp;
± &plusmn;
× &times;
÷ &divide;
上标2 &sup2;

三、HTML学习资源

1、学习文档：HTML教程
2、学习视频：HTML教程
3、思维导图：思维导图我是在GitHub上淘到的，下面给出地址，如果不方便下载的，也可以用百度网盘，我放到网盘里一份。

四、未来可期

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

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

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

作者：爱打瞌睡的CV君
CSDN：https://blog.csdn.net/qq_44921056
本文仅用于交流学习，未经作者允许，禁止转载，更勿做其他用途，违者必究。

文章来源: luckystar.blog.csdn.net，作者：爱打瞌睡的CV君，版权归原作者所有，如需转载，请联系作者。

原文链接：luckystar.blog.csdn.net/article/details/124820560

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入