菜单 搜索
首页 前端知识 前端学习一、HTML篇

前端学习一、HTML篇

2024-11-02 10:11:22 前端知识 前端哥 979 963 我要收藏

一、网页声明

<!DOCTYPE html>
是html5标准网页声明，全称为Document Type HyperText Mark-up Language，意思为文档种类为超
文本标记性语言或超文本链接标示语言，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，声明位于文档中的最前面的位置，处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 不是 HTML标签。它为浏览器提供一项信息(声明)，即 HTML 是用什么版本编写的。

二、语言类型

<html lang="en">
在HTML中，<html>标签用于定义整个页面的根元素，而lang="en"属性则指定了文档的主要语言是英语。这里的en代表英语（English），但并不意味着页面中只能使用英语，中文等其他语言同样可以使用，只是在浏览器中不会触发翻译功能‌。
此外，lang属性还可以指定其他语言，例如zh-CN代表简体中文。这个属性主要用于告诉浏览器页面的主要语言，以便浏览器可以正确地处理语言相关的格式化，如日期、时间、数字等‌。

三、字符集

<meta charset="UTF-8">
是一个HTML标签属性，用于指定网页的字符编码为UTF-8。‌

在HTML中，<meta charset="UTF-8">是一个元数据标签，用于告诉浏览器该网页使用的字符编码是UTF-8。UTF-8是一种广泛使用的字符编码，能够表示世界上几乎所有的字符，包括中文、日文、韩文等。使用UTF-8编码可以确保网页在不同语言环境下的正确显示，避免乱码问题‌。

具体来说，<meta charset="UTF-8">的作用如下：

  • ‌指定字符编码‌：通过声明字符编码为UTF-8，浏览器知道如何正确解析页面上的文本内容。
  • 避免乱码‌：如果不指定正确的字符编码，浏览器可能会使用默认编码来解析页面内容，导致中文等字符显示为乱码。
  • 支持多语言‌：UTF-8编码支持世界上大多数语言的字符，因此在国际化的网页开发中非常重要‌。

四、标签

标签分为双标签和单标签，标题标签<h1></h1> 就是一个双标签，图像标签<img>就是一个单标签。

1、标题标签

一级标题<h1></h1>

<h1>这是个一级标签</h1>
复制

二级标题<h2></h2>

<h2>这是个二级标签</h2>
复制

三级标题<h3></h3>

<h3>这是个三级标签</h3>
复制

四级标题<h4></h4>

<h4>这是个四级标签</h4>
复制

五级标题<h5></h5>

<h5>这是个五级标签</h5>
复制

六级标题<h6></h6>

<h6>这是个六级标签</h6>
复制

2、段落标签

<p></p>

<p>这是一个段落标签</p>
复制

3、强制换行标签（单标签）

<br>或者<br />

<br>强制换行标签，是一个单标签
复制

4、加粗标签

<strong></strong>或者<b></b>，建议使用前者，更强烈。

<strong>加粗标签</strong>
<b>这个也是加粗标签，但是没有strong强烈</b>
复制

5、倾斜标签

<em></em>或者<i></i>，建议使用前者，更强烈。

<em>倾斜标签</em>
<i>这个也是倾斜标签，但是没有em强烈</i>
复制

6、删除标签

<del></del>或者<s></s>，建议使用前者，更强烈。

<del>删除标签</del>
<s>这个也是删除标签，但是没有del强烈</s>
复制

7、下划线标签

<ins></ins>或者<u></u>，建议使用前者，更强烈。

<ins>下划线标签</ins><br />
<u>这个也是下划线标签，但是没有ins强烈</u><br />
复制

8、图片标签（单标签）

<img>

属性：

  1. src-- 引入图片
  2. alt-- 替换文本，当图片显示不出来的时候可以用文字提示
  3. title-- 提示文本，当鼠标放在图片上的时候可以显示文字
  4. width-- 给图像设定宽度
  5. height-- 给图像设定高度
  6. border-- 给图像设定边框
<h4>图像标签的使用</h4>
<img src="img0.jpg ">
<br>
 
<h4>alt--替换文本，当图片显示不出来的时候可以用文字提示</h4>
<img src="im.jpg" alt="这是一片郁金香花海">
<br>
 
<h4>title--提示文本，当鼠标放在图片上的时候可以显示文字</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美">
<br>
 
<h4>width--给图像设定宽度：</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" width="500">
<br>
 
<h4>height--给图像设定高度：</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" height="400">
<p style="color: red;">高度和宽度只需设定一个，另一个会等比缩放</p>
<br>
 
<h4>border--给图像设定边框：</h4>
<img src="img0.jpg" alt="这是一片郁金香花海" title="这张图片很美" width="500" border = "15">
复制

文件路径：

  1. 同级路径，与html在同一文件夹下的图片
  2. 下一级路径，在与html网页的文件夹的上一级文件夹下的图片
  3. 上一级路径，在与html网页的文件夹的下一级文件夹下的图片
  4. 绝对路径，直接从磁盘开始输入的路径或百度上的某个图片路径
<img src="img.jpg">同级路径<br>
<img src="images/img.jpg">下一级路径<br>
<img src="../img.jpg">上一级路径<br>
<img src="https://image.baidu.com">绝对路径 C:\web\img\logo.jpg<br>
复制

9、锚链接(超链接)标签

<a></a>

属性：

  1. href-- 最重要的属性，它指定链接的目标。
  2. target-- _blank，新窗口打开页面。默认为_self，在当前窗口打开页面。
target 打开窗口的方式。默认的值是_self 是在当前窗口打开页面，_blank 是新窗口打开页面。<br>
 
<h1>1.外部链接--外部网站的地址</h1>
<a href="http://www.qq.com" target="_blank">腾讯</a> <br> 
 
<h1>2.内部链接</h1>
<a href="vscode.html" target="_blank">vscode</a>
 
<h1>3.空链接:#</h1>
<a href="#">这是一个空链接</a>
 
<h1>4.下载链接：地址链接的是文件 .exe 或者 zip 等</h1>
<a href="img.jpg.zip">点击下载压缩包</a>
 
<h1>5.网页元素的链接</h1>
<a href="http://www.baidu.com" target="_blank"><img src="img.jpg" alt="空"></a>
 
<h1>6.锚点链接：点击后跳转至该页面当前某一位置</h1>
<a href="#AAA">你好！</a>
<h1>sssssss</h1>
<h1>sssssss</h1>
<h1 id="AAA">你好！你好！你好！</h1>
<h1>sssssss</h1>
<h1>sssssss</h1>
复制

10、div标签

<div></div>
‌HTML中的div标签是一个块级元素，用于创建可包含其他元素的块或区域。‌ 它具有创建容器、分组内容、应用样式、创建布局和提供语义的用法。例如，可以使用div标签创建标题和正文的容器‌。

div标签的主要用途包括：

  • 组织内容‌：将相关内容分组，便于管理和维护。
  • ‌应用样式‌：通过div标签和CSS（层叠样式表），可以对页面布局和外观进行控制。
  • ‌提供语义‌：虽然div本身没有语义，但通过合理的使用id或class属性，可以增强页面的语义化，有助于提高网站的可访问性和SEO优化‌。
<div>div标签用来布局，一行只能放一个，一个独占一行（大盒子）</div>
<div>AAAAA</div>
<div>BBBBB</div>
<div>CCCCC</div>
复制

11、span标签

<span></span>
‌HTML的span标签是一个行内标签‌，用于组合文档中的行内元素。它没有固定的格式表现，需要通过应用样式来产生视觉上的变化‌。

span标签主要用于将文档中的文本或其他行内元素进行分组，以便统一应用样式。它支持HTML的全局属性，但本身无法提供视觉上的更改，需要通过类或id属性应用样式来实现特定的视觉效果‌。

<span>用来布局，一行可以放多个span标签（小盒子）</span><br>
<span>AAAAA</span>
<span>BBBBB</span>
<span>CCCCC</span>
复制

12、表格标签

<table></table>

属性：

  1. align-- left、center、right 规定表格相对周围元素的对齐方式
  2. border-- 规定表格单元是否拥有边框，默认无
  3. cellpadding-- 像素值 规定单元边沿与其内容之间的空白，默认为1
  4. cellspacing-- 像素值 规定单元格之间的空白，默认为2
  5. width-- 像素值或百分比 规定表格的宽度
  6. rowspan-- 上下单元格合并 跨行合并 ————最上侧单元格为目标单元格，写合并代码
  7. colspan-- 左右单元格合并 跨列合并 ————最左侧单元格为目标单元格，写合并代码
<table align="center" cellspacing="0" cellpadding="8" border="1" width="500" height="249">
    <!-- th是表头单元格 -->
    <thead>
        <tr>   <th>序号</th>   <th>姓名</th>   <th>性别</th>   <th>年龄</th>   </tr>
    </thead>
        
    <tbody>
        <tr>   <td>111</td>   <td>aaaa</td>   <td>mmmm</td>   <td>12</td>   </tr>
        <tr>   <td>222</td>   <td>bbbb</td>   <td>ffff</td>   <td>14</td>   </tr>
        <tr>   <td>333</td>   <td>cccc</td>   <td>mmmm</td>   <td>13</td>   </tr>
        <tr>   <td>444</td>   <td>dddd</td>   <td>mmmm</td>   <td>12</td>   </tr>
        <tr>   <td>555</td>   <td>eeee</td>   <td>ffff</td>   <td>12</td>   </tr>
    </tbody>
</table>
 
 
<!-- 
    合并单元格三部曲：
	1、先确定跨行还是跨列合并
	2、找到目标单元格，写上合并方式=合并的单元格数量。eg: <td colspan="2"></td>
	3、删除多余的单元格 
	
	a row 一行
	a column 一列
-->
<table border="1" cellspacing="0" width="500" height="249">
    <tr>
        <td></td>
        <!-- 跨列合并俩单元格 -->
        <td colspan="2"></td>
        <!-- <td></td> -->
    </tr>
    <tr>
        <!-- 跨行合并俩单元格 -->
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <!-- <td></td> -->
        <td></td>
        <td></td>
    </tr>
</table>
复制

13、列表标签

无序列表

<h1>无序列表</h1>
<!-- 注意：
    1、无序列表的各个列表项之间没有顺序级别之分，是并列的
    2、<ul></ul> 中只能嵌套 <li></li> ，直接在<ul></ul>标签中输入其他标签或文字的做法是不被允许的
    3、<li>与</li>之间相当于一个容器，可以容纳所有元素
    4、无序列表会自带样式属性，但在实际使用时一般使用CSS来设置
-->
<h4>你的选项？</h4>
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>
复制

有序列表

<h1>有序列表</h1>
 
<h4>粉丝排行榜</h4>
<ol>
    <li>a   11</li>
    <li>b   22</li>
    <li>c   12</li>
</ol>
复制

自定义列表

<h1>自定义列表</h1>
<!-- 注意： 
    dl（definition list）是自定义列表的容器。
    dt（definition term）表示定义项，即列表中的术语或概念。
    dd（definition description）则用于提供定义项的描述或解释，即对术语或概念的详细说明。
-->
<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
    <dt>名词2</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>
复制

14、表单标签

表单控件

  • input-- 输入表单元素
  • select-- 下拉表单元素
  • textarea-- 文本域元素
  • label-- 增加表单触发面积，增强用户体验

input标签的type属性

  1. button-- 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）。
  2. checkbox-- 定义复选框。
  3. file-- 定义输入字段和“浏览”按钮，供文件上传。
  4. hidden-- 定义隐藏的输入字段。
  5. image-- 定义图像形式的提交按钮。
  6. password-- 定义密码字段，该字段中的字符被掩码。
  7. radio-- 定义单选按钮。
  8. reset-- 定义重置按钮，重置按钮会清除表单中的所有数据。
  9. submit-- 定义提交按钮，提交按钮会把表单数据发送到服务器。
  10. 10.text-- 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符。
<!-- form 表单域 -->
<form action="xxx.php" method="get" name="name1">
    <!-- input 输入表单元素 -->
    <!-- text文本框，用户可以在里面输入任何文字 -->
    <!-- maxlength规定输入字段中的字符的最大长度 -->
    <!-- value规定表单中默认显示的文字 -->
    <input type="text" name="username" value="请输入用户名" maxlength="6">
    <br>
    <!-- password密码框，用户看不见输入的密码 -->
    <input type="password" name="pwd">
    <br>
    <!-- radio 单选按钮 可以实现多选一 -->
    <!-- name 是表单元素名称 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
    <!-- checked 单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮 -->
    性别：男 <input type="radio" name="sex" value="男" checked="checked"> 女 <input type="radio" name="sex" value="女">
    <br>
    <!-- checkbox 复选框 可以实现多选 -->
    爱好：吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby" value="吃饭">打豆豆<input type="checkbox" name="hobby" value="打豆豆">
    <br>
    <!-- submit 点击了提交按钮，可以把表单域form 里面的表单元素里面的值提交给后台服务器 -->
    <input type="submit" value="免费注册">
    <br>
    <!-- reset 重置按钮可以还原表单元素初始的默认状态 -->
    <input type="reset" value="重新填写">
    <br>
    <!-- file 文件域 使用场景 上传文件使用的 -->
    上传头像： <input type="file">
    <br>
    <!-- button 普通按钮 后期结合JS 搭配使用 -->
    按钮：<input type="button" value="点击">
    <br>
    <br><br><br><br><br><br><br>
 
    <!-- label 当你点击里面的字的时候可以自动选择某个文本框或者选项   lable标签for里的值与input里的id值一样 -->
    <label for="text">用户名：</label> 
    <input type="text" id="text">
    <br>
 
    <label for="choose">aaa</label>
    <input type="radio" name="choose" id="choose">
 
    <label for="choose1">bbb</label>
    <input type="radio" name="choose" id="choose1">
 
    <label for="choose2">ccc</label>
    <input type="radio" name="choose" id="choose2">
    <br>
    <!-- select 下拉表单元素    selected="selected" 默认选项  -->
    籍贯：
    <select>
        <option>上海</option>
        <option>北京</option>
        <option selected="selected">安徽</option>
        <option>四川</option>
        <option>重庆</option>
        <option>天津</option>
    </select>
    <br>
 
    <label for="select">籍贯：</label>
    <select id = "select">
        <option>上海</option>
        <option>北京</option>
        <option selected="selected">安徽</option>
        <option>四川</option>
        <option>重庆</option>
        <option>天津</option>
        <option>山东</option>
        <option>河南</option>
        <option>河北</option>
        <option>台湾</option>
        <option>香港</option>
        <option>黑龙江</option>
        <option>辽宁</option>
        <option>吉林</option>
        <option>内蒙古</option>
        <option>西藏</option>
        <option>山西</option>
        <option>陕西</option>
    </select>
    <br>
 
 
    <!-- textarea 文本域 元素  不需要记住【cols每行能显示几个字符 、 rows行】一般都是用css去实现文本域的大小 -->
    今日反馈：
    <textarea cols="50" rows="5">这个反馈留言是用textarea做的</textarea>
</form>
复制

15、注释与特殊字符

<h1>
    注释的使用方法：快捷键 ctrl + /
    <!--需要注释掉的文字-->
</h1>
<!-- 《这是一段字》静静地吃两口就吃多少饭iu色染发鸡蛋炒饭和v刘海？？？？ -->
 
<a href="https://blog.csdn.net/jack_rose_me/article/details/124603494">特殊字符一览表</a>
<h4>空&nbsp;格&nbsp;符</h4>
<h4>大于&gt;</h4>
<h4>小于&lt;</h4>
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/19724.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

用html写一个漂亮的登录页

2025-01-16 20:01:33

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！