投稿
  1. 首页
  2. html-js-css

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

管理观察 • 2022-6-10 • html-js-css • 阅读 84

【HTML】HTML的基础语法(附思维导图),第1张

文章目录 一、HTML结构二、HTML标签1、div 和 span 标签2、标题标签3、段落标签4、换行标签5、格式化标签6、注释标签7、图像标签8、超链接标签9、表格标签10、列表标签11、表单标签11.1 表单域11.2 input表单元素11.3 label标签11.4 select表单元素11.5 textarea表单元素 12、特殊字符 三、HTML学习资源四、未来可期

一、HTML结构

vscode中提供的标准骨架。

DOCTYPE html>    
<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>Documenttitle>
head>
<body>
    
body>
html>
二、HTML标签 1、div 和 span 标签

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

div 是独占一行的, 是一个大盒子.span 不独占一行, 是一个小盒子. 2、标题标签 单词 head 的缩写，意为：头部、标题从一级标题到六级标题，重要性依次递减，字体越小 
<h1>一级标题h1>
<h2>二级标题h2>
<h3>三级标题h3>
<h4>四级标题h4>
<h5>五级标题h5>
<h6>六级标题h6>
3、段落标签 单词 paragraph 的缩写，意为：段落 
<p>我是一个段落标签p>
4、换行标签 单词：break 的缩写，意为：打断、换行
 是个单标签
 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距，而换行不会 
   <p>准备换行 <br/>
       准备换行 <br/>
        这段要结束了p>
5、格式化标签 
<strong>加粗strong>
<b>加粗b>
<em>倾斜em>
<i>倾斜i>
<del>删除线del>
<s>删除线s>
<ins>下划线ins>
<u>下划线u>
6、注释标签 增加代码的可读性
7、图像标签 图像标签是单词image的缩写，意思为图像src是必须属性图像的高度和宽度，一般来讲设置其中之一就可以，另外一个会自动按比例适配
标签属性作用描述
src放置图片的路径
alt替换文本，图片不能显示时，显示的文字
title提示文本，鼠标放到图片上，显示的文字
width设置图像的宽度
height设置图像的高度
border设置图像的边框粗细
<img src="1.png" alt="吹泡泡的海绵宝宝" title="海绵宝宝" width="800px" height="800px" />

8、超链接标签 超链接标签是单词 anchor 的缩写，意为：锚href是必须属性target属性的两种打开方式 _self : 默认值_blank : 在新窗口中打开的方式 超链接分类： 外部链接内部链接空连接下载链接网页元素链接锚点链接
标签属性作用描述
href用于指定链接目标的 url 地址
target用于指定链接页面的打开方式
9、表格标签 表格标签是
必须嵌套在
中和必须嵌套在中表格不是用来布局页面的，而是用来展示数据的合并单元格 跨行合并：rowspan=“合并单元格的个数”跨列合并：colspan=“合并单元格的个数” 
<table>    
    <tr>     
        <th>表头单元格th>    
    tr>

    <tr>
        <td>一个单元格td> 
    tr>
table>

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

表格属性作用描述
align表格相对于周围元素的对齐方式
border表示边框. 1 表示有边框, “” 表示没边框.
cellpadding内容距离边框的距离
cellspacing单元格之间的距离
width设置表格的宽度
10、列表标签 表格是用来显示数据的，那么列表就是用来布局的列表分类 无序列表有序列表自定义列表 

<u1>
    <li>列表1li>
    <li>列表2li>
    <li>列表3li>
u1>

<ol>
    <li>列表1li>
    <li>列表2li>
    <li>列表3li>
ol>

<dl>
    <dt>内容1dt>
    <dd>对内容1的描述1dd>
    <dd>对内容1的描述2dd>
    <dd>对内容1的描述3dd>
dl>
11、表单标签 11.1 表单域 
<form action="url地址" method="表单的提交方式，为get或者post" name="表单域名称，用于区分">
    各种表单元素控件
form>
11.2 input表单元素 在表单元素中 标签用于收集用户信息 标签为单标签 标签的属性 type：指定不同的控件类型name：定义input元素的名称value：规定input元素的值checked：规定该input元素首次加载时应该被选中maxlength：规定输入字段中，字符的最大长度
type属性值描述
button定义可点击按钮
checkbox定义复选框
file定义输入字段和“浏览”按钮，供上传文件
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段
radio定义单选按钮 (同一组按钮，name值必须相同)
reset定义重置按钮，清空表单中所有数据
submit定义提交按钮，将表单数据发送给服务器
text定义单行的输入字段
11.3 label标签

标签用于绑定一个表单元素，当点击

演示示例：示例传送门

11.4 select表单元素 下拉列表供用户选择