Web网页制作-知识点(1)——HTML5介绍、HTML5的DOCTYPE声明、HTML基本骨架、标题标签、段落 换行、水平线图片图片路径、超链接

news/2024/10/30 19:34:42/

目录

HTML5介绍

HTML5的DOCTYPE声明 

HTML基本骨架

标题标签

段落、换行、水平线

图片

图片路径*

超链接


HTML5介绍

HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾

HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:<html>

标签有两种表现形式:

  1. 双标签,例如:<html></html>
  2. 单标签,例如:<img>

HTML5的DOCTYPE声明 

DOCTYPE是document type(文档类型)的缩写。<!DOCTYPE html>是H5的声明位于文档的最前面,处于标签之前。它是网页必备的组成部分,避免浏览器的怪异模式。

HTML基本骨架

html标签:

定义了HTML文档。这个标签限定了文档的开始点和结束点。

head标签:

head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。

body标签:

body元素定义文档的主题。body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)

title标签:

  1. 可定义文档的标题。
  2. 它显示在浏览器窗口的标题栏或者状态栏上。
  3. <title>标签是<head>标签中唯一必须要求包含的东西,就是说写head一定要写title。
  4. <title>的增加有利于SEO优化。

SEO是搜索引擎优化的英文缩写。通过对网站内容调整,满足搜索引擎的排名需求。

meta标签:

meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8,或是gbk,这些都是编码格式,通常使用utf-8

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

标题标签

标题标签:<h1>~<h6>

正确使用标题,请确保将HTML标题标签只用于标题,不要仅仅是为了生成粗体或者大号的文本而使用标题。正确使用标题有益于SEO。

段落、换行、水平线

承载段落文本信息使用段落标签:<p></p>

<p>这是一个段落</p>
<p>这是另一个段落</p>

换行:<br>

换行标签为单标签。

<p>这个<br>段落<br>演示了换行的效果</p>

水平线:<hr/>

用于在HTML页面中创建水平线,也是单标签。

属性:

  1. color:设置水平线的颜色
  2. width:设置水平线的宽度
  3. size:设置水平线的高度
  4. align:设置水平线的对齐方式(默认居中),可选值left/right

图片

<img>标签定义HTML页面中的图像

<img src="" alt="" title="" width="" height="">

注意: <img>是单标签,不需要进行闭合操作。

属性:

  1. src:路径(图片地址与名字)
  2. alt:规定图像的替代文本
  3. width:规定图像的宽度
  4. height:规定图像的高度
  5. title:鼠标悬停在图片上给予提示

图片路径*

绝对路径:绝对路径是电脑的盘符存储与访问的具体地址。

E:\Windows\1.jpg

相对路径:两者相对关系,两者在同一路径下可以直接访问。

  1. 子级关系:/
  2. 父级关系:../
  3. 同级关系:./(可以省略不写)
<img src="1.jpg" alt="">
<img src="/1.jpg" alt="">
<img src="../1.jpg" alt="">

 网络地址:图片具体的网络地址。

超链接

描述

HTML使用标签<a>来设置超文本链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,我们可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

<a href="ulr">链接文本</a>

属性

在标签<a>中使用了href属性来描述链接的地址,在默认情况下,链接将以以下形式出现在浏览器中:

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。
  2. 访问过的链接为紫色并带有下划线。
  3. 点击链接时,链接显示为红色并有下划线。

注意:这些效果都可以通过CSS样式进行修改。


end 



http://www.ppmy.cn/news/548534.html

相关文章

安卓手机安装google浏览器

下载Go安装器&#xff0c;根据提示默认安装所有依赖项&#xff0c;其中包含googleplay 在googlePlay中输入用户名和密码 搜索google browser&#xff0c;点击安装

原来安卓手机安装谷歌服务框架这么简单!

我们都会经常使用手机来玩游戏的&#xff0c;安卓手机用户只能安装安卓游戏。有时候下载了一个游戏之后&#xff0c;经常会提示我们没有谷歌服务框架无法运行。那接下来小编就来教你们如何安装谷歌服务框架吧&#xff01; 步骤一&#xff1a;打开浏览器输入“谷歌空间”&#x…

谷歌网盘云盘google drive扩容方法

想要扩容谷歌网盘、&#xff08;Google Drive&#xff09;Gmail、谷歌相册、谷歌云盘或者colab空间容量&#xff0c;但是发现需要信用卡或者paypal才能购买或者即使绑定了信用卡也会出现下面无法扩容使用google one的情况应该怎么解决呢&#xff1f; 无法购买使用google one的原…

看完这篇文章,小白也能快速安装谷歌服务框架(GApps)!

科普时间~什么是GApps&#xff1f;GApps是谷歌软件服务集合&#xff08;Google Apps&#xff09;的缩写形式。 由于移动设备生产厂商的某些限制&#xff0c;一些运行Android系统的设备没有安装谷歌服务框架。这类设备在无法运行一些基于谷歌服务框架开发的应用软件及游戏时&am…

SpringBoot 如何使用 Actuator 进行应用程序监控

SpringBoot 如何使用 Actuator 进行应用程序监控 在现代的应用程序开发中&#xff0c;应用程序监控是非常重要的&#xff0c;因为它可以帮助我们快速发现和解决问题。Spring Boot Actuator 是 Spring Boot 提供的一个强大的监控和管理工具&#xff0c;它可以帮助我们监控和管理…

手把手教你注册谷歌账号 亲测有效 快来学

前言&#xff1a; 大家好&#xff0c;我是木易巷。 前一段时间想要注册一个谷歌账号&#xff0c;方便今后的学习。但是在我的注册过程中遇到了手机号码无法验证的情况&#xff0c;也就是收不到验证码。 经过后续的多次尝试&#xff0c;最终成功解决&#xff0c;注册成功&#x…

chrome android 中文版下载,谷歌chrome安卓版中文

谷歌chrome安卓版中文带给为你呈现更多精彩内容的工具&#xff0c;实时搜索&#xff0c;非常稳定&#xff0c;直接播放网页视频&#xff0c;还会提前智能加载&#xff0c;让你播放更流畅&#xff0c;还能有效的保护你的隐私&#xff0c;有需要的用户赶快下载吧&#xff01; 谷歌…

谷歌(google)全球网址

谷歌&#xff08;google&#xff09;全球网址 亚洲 ~阿富汗谷歌www.google.com.af 谷歌亚美尼亚~www.google.am 阿塞拜疆~www.google.az谷歌 孟加拉国~www.google.com.bd谷歌 中国谷歌~www.google.cn 谷歌~www.google.com.hk香港 印度~谷歌www.google.…