menu DizzyK
陪憨憨学前端-html入门(基础语法)
59 浏览 | 2021-01-05 | 分类:默认分类,something_strange | 标签:

陪憨憨学前端-html入门(基础语法)

DizzyK

字面意思嘿嘿嘿

简介

超文本标记语言(英语:HyperText Markup Language,简称:HTML)不是一种编程语言,是一种用来描述网页的语言,是一种用于创建网页的标准标记语言(markup tag)。
可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。
HTML 很容易学习!相信憨批也能很快学会它!

环境搭建

固定格式

html语法有一套固定的格式(就想markdown一样),但html更为严格,下面就是个简单的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>陪憨憨学html</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落</p>
</body>
</html>

标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

html的格式类似一种套娃的存在,最基础的元素为<head><body>两部分

现在来仔细讲讲上面固定格式里的每一项元素是什么意思

  1. <!DOCTYPE html> 声明为 HTML5 文档
  2. <html> 元素是 HTML 页面的根元素
  3. <head> 元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  4. <title> 元素描述了文档的标题
  5. <body> 元素包含了可见的页面内容
  6. <h1> 元素定义一个大标题
  7. <p> 元素定义一个段落

声明

  1. <!DOCTYPE> 声明
    1. doctype 声明是不区分大小写的,如<!DOCTYPE html><!DOCTYPE HTML>一样
  2. 编码声明
    1. <meta charset="UTF-8">声明编码为UTF-8,如果不想你写的网页满是锟斤拷的话就乖乖写上这句(当然你也可以给UTF-8换成你想用的别的编码,比如常用的GBK等)

标题

HTML 标题(Heading)和markdown一样,有多级标题,html的标题是通过<h1> - <h6> 标签来定义的。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落</p>

段落

和markdown正文不用,HTML 段落是通过标签 <p> 来定义的

<h1>一级标题</h1>
<p>段落一</p>
<p>段落二</p>

链接

和markdown一样,html声明链接也有固定格式,HTML 链接是通过标签 <a> 来定义的。

<h1>一级标题</h1>
<p>段落一</p>
<a href="http://blog.dizzyk.top">憨批,你学会了咩</a>

图片

和markdown一样,html声明链接也有固定格式,HTML 链接是通过标签 <img> 来定义的。

<h1>一级标题</h1>
<p>段落一</p>
<a href="http://blog.dizzyk.top">憨批,你学会了咩</a>
<img loading="hanpi" src="./陪憨憨学前端/a.jpg" width="128" height="80" />

注意: 图像的名称和尺寸是以属性的形式提供的,可以直接通过图像的属性控制宽高。

元素嵌套

比如下面这个例子,就是<p><body><html>三种元素的嵌套

<html>
<body>
<p>一个段落</p>
</body>
</html>

空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

属性

还记得刚刚说过的链接嘛

<a href="http://blog.dizzyk.top">这是一个链接</a>

其中href就是一种属性
注意:属性值应包含在引号内,双引号是最常用的,不过使用单引号也没有问题。在某些个别的情况下,比如属性值本身就含有双引号,那么就必须使用单引号,exp:name='Dizz"K"'
关于属性的知识在后面css等知识中还会用到喔~
特别的:属性和属性值对大小写不敏感。不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而新版本的 (X)HTML 要求使用小写属性。在这里建议憨憨用xhtml的标准呐~~

常见html属性:
属性|描述
--|--
class|为html元素定义一个或多个类名(classname)(类名从样式文件引入)
id|定义元素的唯一id
style|规定元素的行内样式(inline style)
title|描述了元素的额外信息 (作为工具条使用)

分割线

html的分割线用的是<hr>,但根据xhtml要求,建议使用<hr />规避空元素

<p>这是第一个段落</p>
<hr />
<p>这是第二个段落。</p>
<hr />
<p>这是第三个段落。</p>

注释

<p>这不是一个注释
    <!-- 这是一个注释 -->
</p>

换行空格

html的换行用的是<br>,但根据xhtml要求,建议使用<br />规避空元素

<p>这是第一行<br />这是第二行         我空了好几格</p>

和markdown一样,html的多个空格也会变成单个显示

文本格式化

HTML 使用标签 <b>("bold") 与 <i>("italic") 对输出的文本进行格式, 如:粗体 or 斜体,通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而,这些标签的含义是不同的:
<b><i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

常见标签 用途描述
<b> 定义粗体文本
<em> 定义着重文字
<i> 定义斜体字
<small> 定义小号字
<strong> 定义加重语气
<sub> 定义下标字
<sup> 定义上标字
<ins> 定义插入字
<del> 定义删除字
<code> 定义计算机代码
<kbd> 定义键盘码
<samp> 定义计算机代码样本
<var> 定义变量
<pre> 定义预格式文本
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目。

ammm个人jio得,这种标签没必要硬记嗷,用的时候查一下就行啦~

head

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript><base>

  1. <title>

    1. 定义了浏览器工具栏的标题
    2. 当网页添加到收藏夹时,显示在收藏夹中的标题
    3. 显示在搜索引擎结果页面的标题
  2. <base>

    1. <base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接
    2. exp
    <head>
    <base href="http://blog.dizzyk.top/" target="_blank">
    </head>
  3. <link>

    1. <link> 标签定义了文档与外部资源之间的关系,<link> 标签通常用于链接到样式表,在后面的博文中我会再次说明样式表
    2. exp
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
  4. <style>

    1. <style> 标签定义了HTML文档的样式文件引用地址,在<style> 元素中你也可以直接添加样式来渲染 HTML 文档
    2. exp
    <head>
    <style type="text/css">
    body {background-color:yellow}
    p {color:blue}
    </style>
    </head>

  5. <meta>

    1. meta标签描述了一些基本的元数据。
    2. <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析。
    3. META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。
    4. 元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。
    5. exp
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <meta name="description" content="陪憨憨学前端">
    <meta name="author" content="DizzyK">
    <meta http-equiv="refresh" content="30">
标签 描述
<head> 定义了文档的信息
<title> 定义了文档的标题
<base> 定义了页面链接标签的默认链接地址
<link> 定义了一个文档和外部资源之间的关系
<meta> 定义了HTML文档中的元数据
<script> 定义了客户端的脚本文件
<style> 定义了HTML文档的样式文件

总结~~~

html基础语法就到这啦~
憨憨可以先试试写下简单的html文件呐~
不会记得问我0A0~~

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

发表评论

email
web

全部评论 (暂无评论)

info 还没有任何评论,你来说两句呐!