【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
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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

举报
请填写举报理由
0/200