首页 > 其他分享 >day 05 5.1 前端基础之HTML

day 05 5.1 前端基础之HTML

时间:2023-04-20 17:12:06浏览次数:49  
标签:5.1 网页 05 标签 单元格 表单 HTML 属性

前端基础之HTML

  • 了解了web相关基本概念以后,我们开始正式接触网页开发,网页开发的基础是HTML,
    • 所以,本章内容主要分两部分,
      • 一是介绍HTML的相关概念、发展历史,
      • 二是 创建HTML网页文档和认识HTML的基本结构。
      • 我们学会如何新建一个 HTML 页面和熟记HTML文档的基本结构和主要标签。

【1】、HTML概述

  • HTML,即超文本标记语言(HyperText Markup Language ]),由SGML (标准通用标记语言) 发展而来,也叫web页面。扩展名是 .html 或是 .htm 。

  • HTML,是一种用来制作网页的标准标记语言。超文本,指的就是超出普通文本范畴的文档,可以包含文本、图片、视频、音频、链接等元素。

  • HTML 不是一种编程语言,而是一种写给网页浏览器、具有描述性的标记语言。

  • 自1990年以来HTML就一直被用作WWW(World Wide Web的缩写,也可简写WEB,中文叫做万维网)的信息表示语言,使用HTML语言描述的文件,需要通过网页浏览器显示出效果。
    • 用户在访问网页时,是把服务器的HTML文档下载 到本地客户设备中,
    • 然后通过本地客户设备的浏览器将文档按顺序解释渲染成对应的网页效果。
  • 网页本身是一种文本文件,通过在文本文件中添加各种各样的标记标签,
    • 可以告诉浏览器如何显示标记中的代表的内容,
    • 如:
      • HTML中有的标签可以告诉浏览器要把字体放大,就像word一样,
      • 也有的标签可以告诉浏览器显示指定的图片,
      • 还有的标签可以告诉浏览器把内容居中或者倾斜等等。
  • 每一个HTML标签代表的意义都不一样。
    • 同样,他们在浏览器中表现出来的外观也是不一样的。

【2】、HTML结构和标签格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1、<!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档

2、<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档,在它们之间是文档的头部<head>和主体<body>

3、元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。

4、<title></title>定义网页标题,在浏览器标题栏显示。

5、<meta charset="UTF-8"> 声明编码方式用utf8

6、<body></body>之间的文本是可见的网页主体内容

【3】、标签的语法

<标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>
<标签名 属性1=“属性值1” 属性2=“属性值2”…… />

1、HTML标签是由尖括号包围的特定关键词

2、标签分为闭合和自闭合两种标签

3、HTML不区分大小写

4、标签可以有若干个属性,也可以不带属性,比如就不带任何属性

5、标签可以嵌套,但是不可以交叉嵌套

  • XHTML是实现 HTML 到 XML的 过渡。

【4】、基本标签

【4.1】标题标签

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

【4.2】换行标签

悟道休言天命,<br>
修行勿取真经。<br>
一悲一喜一枯荣,<br>
哪个前生注定?

【4.3】段落标签

<p>菩提本无树,</p>
<p>明镜亦非台。</p>
<p>本来无一物,</p>
<p>何处惹尘埃。</p>

【4.4】文本格式化标签

  • HTML提供了一系列的用于格式化文本的标签,可以让我们输出不同外观的元素,
    • 比如粗体和斜体字。
    • 如果需要在网页中,需要让某些文本内容展示的效果丰富点,可以使用以下的标签来进行格式化。
<b>定义粗体文本</b><br />
<strong>定义粗体文本方式2</strong><br />
<em>定义斜体字</em><br />
<i>定义斜体字方式2</i><br />
<del>定义删除文本</del><br />

【4.5】特殊符号

&reg; &nbsp; &copy;

标签大致可分为两类

  • 块级标签(block) -- 独占一行
  • 内联标签(inline) -- 按文本内容占位

【4.6】div和span标签

<div>只是一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现.
<span>表示了内联行(行内元素),并无实际的意义,主要通过CSS样式为其赋予不同的表现
  • 块级元素与行内元素的区别所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。
    • 如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
    • 这两个元素是专门为定义CSS样式而生的。

【5】、超链接标签

【5.1】超链接基本使用

  • 超链接是浏览者和服务器的交互的主要手段,也叫超级链接或a链接,是网页中指向一个目标的连接关系,这个目标可以是网页、网页中的具体位置、图片、邮件地址、文件、应用程序等。

  • 超链接是网页中最重要的元素之一。

    • 一个网站的各个网页就是通过超链接关联起来的,用户通过点击超链接可以从一个网页跳转到另一个网页。
  • 几乎可以在所有的网页中找到链接。

    • 点击链接可以从一张页面跳转到另一张页面。
    • 例如
      • 在阅读某个网站时,遇到一个不认识的英文,你只要在这个单词上单击一下,即可跳转到它的翻译页面中,看完单词的解释后点一下返回按钮,又可继续阅读,这就是超链接的常见用途。
      • 还有经常到购物网站中去,我们都是在百度搜索,然后点击对应的搜索项进入到对应的购物网站的,这也是超链接的作用。
  • 超链接的属性:

属性 描述
href 网络链接 [ 例如: http://www.baidu.com ] 本地链接 [ 例如:F:\html\index.html ] 规定链接的跳转目标
title 百度 链接的提示信息
target _blank [ 在新建窗口中打开网页 ] _self [ 默认值,覆盖自身窗口打开网页 ] _parent [ 在父级框架中打开网页 ] _top [ 在顶级框架中打开网页 ] framename [ 在指定的框架中打开网页] 与前面四项固定值不同,framename是泛指,并不是这个值,这点将在后面框架部分内容中详细介绍,这里可以暂时先略过

1、href是超链接最重要的属性,规定了用户点击链接以后的跳转目标,这个目标可以是 网络连接,也可以是本地连接。

2、网络链接指的是依靠网络来进行关联的地址,一般在地址前面是以 http://或者https

标签:5.1,网页,05,标签,单元格,表单,HTML,属性
From: https://www.cnblogs.com/dream-ze/p/17337510.html

相关文章

  • DxO PhotoLab 6 for Mac(raw图片处理软件) 6.5.1.49中文直装版
    DxOPhotoLab6• 引入 DxO 广色域工作色彩空间:利用 DxO 的新色彩空间利用最新打印机和显示器的潜力。避免在高度饱和的区域进行剪辑,并确保整个工作流程的准确性。在传统色彩空间(适用于来自 DxOPhotoLab 早期版本的所有图像)和新的 DxOWideGamut 工作色彩空间(适用于在 ......
  • 6 05 | 深入浅出索引(下)
    在上一篇文章中,我和你介绍了InnoDB索引的数据结构模型,今天我们再继续聊聊跟MySQL索引有关的概念。在开始这篇文章之前,我们先来看一下这个问题:在下面这个表T中,如果我执行select*fromTwherekbetween3and5,需要执行几次树的搜索操作,会扫描多少行?下面是这个表的初始化语句......
  • 05-HTML标签:字体标签和超链接
    title:05-HTML标签:字体标签和超链接publish:true本文主要内容字体标签:<font>、<b>、<u>、<sup>、<sub>超链接<a>字体标签特殊字符(转义字符)&nbsp;:空格 (non-breakingspacing,不断打空格)<:小于号<(lessthan)>:大于号>(greaterthan)&amp;:符号&a......
  • 06-HTML标签:图片标签
    title:06-HTML标签:图片标签publish:trueimg标签介绍介绍img:英文全称image(图像),代表的是一张图片。如果要想在网页中显示图像,就可以使用img标签,它是一个单标签。语法如下:<imgsrc="图片的URL"/>能插入的图片类型能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等......
  • 07-html标签图文详解(二)
    title:07-HTML标签图文详解(二)本文主要内容列表标签:<ul>、<ol>、<dl>表格标签:<table>框架标签及内嵌框架<iframe>表单标签:<form>多媒体标签滚动字幕标签:<marquee>列表标签列表标签分为三种。1、无序列表<ul>,无序列表中的每一项是<li>英文单词解释如下:ul:unordered......
  • 08-HTML5详解
    title:08-HTML5详解publish:trueHTML5的介绍Web技术发展时间线1991HTML1994HTML21996CSS1+JavaScript1997HTML41998CSS22000XHTML1(严格的html)2002TablelessWebDesign(表格布局)2005AJAX2009HTML52014HTML5Finalized2002年......
  • 09-HTML5举例:简单的视频播放器
    title:09-HTML5举例:简单的视频播放器publish:true我们采用Bootstrap网站的图标字体,作为播放器的按钮图标。index.html的代码如下:<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><!--引入字体图......
  • 10-HTML5详解(二)
    title:10-HTML5详解(二)publish:true本文主要内容拖拽历史地理位置全屏拖拽如上图所示,我们可以拖拽博客园网站里的图片和超链接。在HTML5的规范中,我们可以通过为元素增加draggable="true"来设置此元素是否可以进行拖拽操作,其中图片、链接默认是开启拖拽的......
  • 11-HTML5详解(三)
    title:11-HTML5详解(三)publish:trueWeb存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,传统方式我们以document.cookie来进行存储的,但是由于其存储大小只有4k左右,并且解析也相当的复杂,给开发带......
  • 12-HTML基础回顾
    title:12-HTML基础回顾本文主要内容html的常见元素html元素的分类html元素的嵌套关系html元素的默认样式和CSSResethtml常见面试题html的常见元素html的常见元素主要分为两类:head区域的元素、body区域的元素。下面来分别介绍。1、head区域的......