曾几何时要学习前端,百度出来出现好多的HTML教程,一下子那么多的标签着实有点让人恐怖,本人想总结出一些常用的标签,用于练习加以练习。先熟悉用法,再加以练习。为什么要从HTML开始:因为其是web的结构标准,何为结构?即房子除去装修,墙面,门窗剩下的部分。
【不误正业】HTML
初见
HTML结构
<!DOCTYPE html> <!-- 申明文章类型 -->
<html> <!-- 根标签 -->
<head> <!-- 头标签 -->
<title>Jeverson_HTML_Road</title> <!-- 标题 -->
</head>
<body> <!-- 主体标签 -->
<body>
</html>
IDE:顺手就好,此处不在赘述
标签
上述的代码注释中,匆匆一看一个标准的HTML文档,除去文档声明的类型大概是由标签和内容组成的,对于前端来讲HTML是结构标准,那HTML的结构是不是就是由这些富有语义化的元素和元素属性组成的呢,答案是的。
标签的分类
- 单标签:类似换行
<br />
- 注释标签:
<!--我是注释-->
- 双标签:包含开合标签的元素例如段落标签
<p></p>
熟知了上述的一些分类,是否跃跃欲试一下常用标签的玩法,下面就由JJ介绍常用标签的使用方法。
常用标签用法
单标签与注释标签用法
<!-- 注释标签 -->
Hello <br />
<!--换行标签-->
world <br />
<!--水平线标签-->
<hr />
双标签
段落标签: p
标题标签:H1~H6
H1
标签单个页面最好只出现以此,出于SEO
优化
文本标签
<font></font>
- 文本格式化标签
- 文本加粗
<strong>我粗吗</strong> <b>我的真的也很粗</b>
- 文本倾斜
<em>老铁你有点歪</em> <i>是的有点歪<i>
- 删除线
<del>字上面有一横线</del> <s>说的就是删除了哇</s>
- 下划线
<ins>下划线和插入有关吗</ins> <u>下划线貌似就是Unserline</u>
- 文本加粗
举个?
<!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">