首页 前端知识 第一章:走进HTML5

第一章:走进HTML5

2024-02-23 11:02:10 前端知识 前端哥 984 256 我要收藏

第一章:走进HTML5

一:基础单词
在这里插入图片描述

二、HTML5文件的基本结构? 快捷键(shift+!)
在这里插入图片描述

1.<!DOCTYPE html>:声明HTML5文档
2. <html> </html>标签对

   \<html\>:用来表示HTML5的开始

   \</html\>:用来表示HTML5的结束

3.<head> </head>标签对

. <head>标签:可以包含,例如:<title>、<link>、<meta>、<style>、<script>等。浏览 器会在标题栏显示<title>元素的内容。

4.<body> </body>标签对

<body>标签:是HTML5的主体部分,其中标签内可以包含<p>、<hl>、<div>等众多标签<body>标签出现在<html>标签后,并且必须在</html>标签前闭合。<body>标签还有很多属性,用于设置背景颜色、文本颜色、超链接颜色、边距等。

三:网页的基本标签

1. 标题标签: <h1>-<h6> ( 其中<h1>字号最大,<h6>字号最小)

在这里插入图片描述

在这里插入图片描述

2:段落标签:<p>内容</p>(中间会出现空行)

在这里插入图片描述
在这里插入图片描述

3:换行标签:<br/> (单标签,没有结束标签)

在这里插入图片描述
在这里插入图片描述

4:水平线标签:<hr/>(单标签)

作用:当上个网页上同时出现多个主题时,可在主题之间加上<hr/>作为分割。

在这里插入图片描述
在这里插入图片描述

5:字体样式标签:<strong>内容</strong>文本加粗、 <em> 内容</em>文本斜体
在这里插入图片描述
在这里插入图片描述

6.注释:<!—注释内容–>

在这里插入图片描述

(注释的内容不会在浏览器中显示)

四、HTML 5 中常用的特殊符号及其对应的字符实体

  1. 空格( ):&nbsp;

    在这里插入图片描述

    在这里插入图片描述

  2. 大于(>):&gt;

    在这里插入图片描述
    在这里插入图片描述

    3.小于(<):&lt;

    在这里插入图片描述

    在这里插入图片描述

    4.双引号("):&quot; 在这里插入图片描述
    在这里插入图片描述

    5.版本号(©):&copy; 在这里插入图片描述
    在这里插入图片描述

五:图像标签的基本语法以及使用

语法:

      <img src="图像地址"/>(单标签)

      Src:图片的地址<img/>标签的必须属性

在这里插入图片描述

在这里插入图片描述

图像标签的常用属性

  • Width:定义图像的宽度
  • height:定义图像的高度
  • alt:图片路径错误的情况下所替代的文本
  • title:鼠标悬停在图片上所呈现的文本
    在这里插入图片描述

在这里插入图片描述

六:超链接(用于跳转到新的页面 )

标签:<a> </a>可放文本或者图片

语法:<a href=“链接地址” target=“打开的方式”>链接文本或者图片</a>

      href:跳转的地址(href="#"代表是一个空链接)

      target分为两种:_self 在当前窗口打开

                     _blank新起一个窗口打开

在这里插入图片描述
在这里插入图片描述

锚点链接

本页面锚链接:设置锚点:设置id=“值”

                  href="#+id值"

跨页面锚链接:设置锚点:设置id=“值”

             href="页面路径+#+id值"

七:块级元素和行内元素

  • 我们可以发现<p>标签,<h1>~<h6>标签无论自身内容多少,都会独占一行,这样的标签称为块级元素。

  • 如<strong>标签,<em>标签,<a>标签,他们由自身内容决定,其他标签可以排列在后,这样的标签被称为行内元素。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2526.html
标签
评论
发布的文章

程序员的中秋节

2024-03-09 09:03:01

js中几种追加元素的方法

2024-03-08 10:03:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!