【不务正业】之前端HTML基础(一)

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

【不误正业】HTML

  • 初见
    • HTML结构
    • IDE:顺手就好,此处不在赘述
    • 标签
      • 标签的分类
  • 常用标签用法
    • 单标签与注释标签用法
    • 双标签
      • 段落标签: p
      • 标题标签:H1~H6
      • 文本标签
      • img图片标签
      • a
      • 列表ul, ol
      • charset 编码格式:utf-8
      • meta标签
      • link

初见

HTML结构

                                    
<html>                                             
    <head>                                         
        <title>Jeverson_HTML_Roadtitle>          
    head>
    <body>                                         
    <body>
html>

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

标签

上述的代码注释中,匆匆一看一个标准的HTML文档,除去文档声明的类型大概是由标签和内容组成的,对于前端来讲HTML是结构标准,那HTML的结构是不是就是由这些富有语义化的元素和元素属性组成的呢,答案是的。

标签的分类

  • 单标签:类似换行
  • 注释标签:
  • 双标签:包含开合标签的元素例如段落标签

熟知了上述的一些分类,是否跃跃欲试一下常用标签的玩法,下面就由JJ介绍常用标签的使用方法。

常用标签用法

单标签与注释标签用法


Hello <br />

world <br />

<hr />

双标签

段落标签: p

标题标签:H1~H6

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

文本标签

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

举个?


<html>
    <head>
        <title>JeversonHtmlRoadtitle>
    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 htmlli>
    <li>Jeverson is master in htmlli>
    <li>Jeverson is master in htmlli>
    <li>Jeverson is master in htmlli>
ol>

自定义列表

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

charset 编码格式:utf-8

meta标签

  • 关键字:SEO优化注意事项
  • 网页描述:SEO优化注意事项
  • 作者:
  • 网页重定向: 如果网站域名更换,可通过网页重定向链接到新的域名上。

link

  • 链接外部样式表:
  • 设置iCon图标:

你可能感兴趣的:(前端)