【不务正业】之前端HTML基础（一）

最新推荐文章于 2024-06-13 10:31:50 发布

安静的电动棒

最新推荐文章于 2024-06-13 10:31:50 发布

阅读量133

点赞数 1

分类专栏：前端文章标签： html 基础常用标签

本文链接：https://blog.csdn.net/github_34552693/article/details/95208418

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

曾几何时要学习前端，百度出来出现好多的HTML教程，一下子那么多的标签着实有点让人恐怖，本人想总结出一些常用的标签，用于练习加以练习。先熟悉用法，再加以练习。为什么要从HTML开始：因为其是web的结构标准，何为结构？即房子除去装修，墙面，门窗剩下的部分。

初见

HTML结构

<!DOCTYPE html>                                    <!-- 申明文章类型 -->
<html>                                             <!-- 根标签 -->
    <head>                                         <!-- 头标签 -->
        <title>Jeverson_HTML_Road</title>          <!-- 标题 -->
    </head>
    <body>                                         <!-- 主体标签 -->
    <body>
</html>

IDE:顺手就好，此处不在赘述

常用标签用法

单标签与注释标签用法

<!-- 注释标签 -->
Hello <br />
<!--换行标签-->
world <br />
<!--水平线标签-->
<hr />

双标签

段落标签: p

标题标签：H1~H6

H1标签单个页面最好只出现以此，出于SEO优化

文本标签


文本格式化标签
- 文本加粗 我粗吗 我的真的也很粗
- 文本倾斜老铁你有点歪 是的有点歪
- 删除线<del>字上面有一横线</del> <s>说的就是删除了哇</s>
- 下划线<ins>下划线和插入有关吗</ins> 下划线貌似就是Unserline

举个?

<!DOCTYPE html>
<html>
    <head>
        <title>JeversonHtmlRoad</title>
    </head>
    <body>
        <font size="6" color="red">JJ帅气</font>
        <strong>我粗吗</strong> <b>是的我也很粗</b>
        <em>老铁你有点歪</em> <i>是的我有点歪</i>
        <del>字上面一条横线</del> <s>说的就是删除了哇</s>
        <ins>下划线好想插入</ins> <u>下划线么
        就是Underline了</u>
    </body>
</html>

img图片标签

举个?

<img src="jj.jpg" alt="jj" title="不是林俊杰，再见" />

img标签属性解释

src：必填属性用于填写路径可以是网络路径，也可以是其它路径
alt：图片异常占位文本
title：提示类文本，鼠标悬停显示

路径，此处开始介绍：

相对路径：相对资源本身出发，就是相对路径。
绝对路径：
相对路径：访问下一级目录使用"/",上一级使用"…/"

a

a标签的属性有href: 路径（URL），title: 提示文本，当前页面打开：target="_self",打开新页面： target="_blank

使用场景一锚点

<a href="#md">XXXX,跳转到某个段落</a>
<p id="md">呵呵，这里是要跳转的段落</p>

使用场景二空链

<a href="#">空链接</a>

使用场景三统一跳转方式

<!--让所有超链接在新窗口打开-->
<base target="_blank">

列表ul, ol

无序列表:type值可以为"square","disc", "circle"
举个?

<ul type="circle">
    <li>儿子儿子我是你爸爸</li>
    <li>儿子儿子我是你爸爸</li>
    <li>儿子儿子我是你爸爸</li>
    <li>儿子儿子我是你爸爸</li>
</ul>

有序列表
无序列表:type值可以为1 or a or A or i or I
举个?

<ol type="1" start="3">
    <li>Jeverson is master in html</li>
    <li>Jeverson is master in html</li>
    <li>Jeverson is master in html</li>
    <li>Jeverson is master in html</li>
</ol>

自定义列表

<dl>
    <dt>帮助中心</dt>
    <dd>购物指南</dd>
    <dd>订单管理</dd>
    <dd>账户管理</dd>
</dl>

charset 编码格式：utf-8

meta标签

关键字：<meta name="keywords" content="jeversonjee, jjfront, 不务正业, html, 基础," >SEO优化注意事项
网页描述：<meta name="description" content="，是XXXXXXX，30s讲清一件事">SEO优化注意事项
作者: <meta name="author" content="jeversonjee">
网页重定向：如果网站域名更换，可通过网页重定向链接到新的域名上。

link

链接外部样式表：<link rel="stylesheet" href="style.css">
设置iCon图标：<link rel="icon" href="favicon.jpg">

安静的电动棒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【不务正业】之前端HTML基础（一）

曾几何时要学习前端，百度出来出现好多的HTML教程，一下子那么多的标签着实有点让人恐怖，本人想总结出一些常用的标签，用于练习加以练习。先熟悉用法，再加以练习。为什么要从HTML开始：因为其是web的结构标准，何为结构？即房子除去装修，墙面，门窗剩下的部分。【不误正业】HTML初见HTML结构IDE:顺手就好，此处不在赘述标签标签的分类初见HTML结构<!DOCTYPE html&...
复制链接

扫一扫