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

news2024/10/7 12:26:06

目录

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.coloradmin.cn/o/679613.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自动化神器AutoIt,告别重复劳动

概要 计算机已经进入大众家庭多年&#xff0c;它给我们带来了便利&#xff0c;却也带来了枯燥、重复、机械的重复工作。今天&#xff0c;我要和大家分享一款自动化工具AutoIt&#xff0c;它能够帮助你告别这些烦恼&#xff0c;并提高工作效率。 AutoIt 是一款完全免费的Windows…

leetcode82. 删除排序链表中的重复元素 II(java)

删除排序链表中的重复元素 leetcode82. 删除排序链表中的重复元素 II题目描述一次遍历代码演示 链表专题 leetcode82. 删除排序链表中的重复元素 II 来源&#xff1a;力扣&#xff08;LeetCode&#xff09; 链接&#xff1a;https://leetcode.cn/problems/remove-duplicates-fr…

1.1 编写一个简单的C++程序

博主介绍&#xff1a;爱打游戏的计算机专业学生 博主主页&#xff1a;夏驰和徐策 所属专栏&#xff1a;夏驰和徐策带你从零开始学C 1.1.0 这段话告诉我们什么&#xff1f; 这段话解释了一个C程序中的main函数的基本结构和功能。 它告诉我们以下几点&#xff1a; 1. C程序的…

Debian11 编译bluez

之前的几篇文章写过如果编译x86和dv300 版本的bluez&#xff0c;不过那都是在 Centos7 上编译的。然而当我从taobao 上买了一个蓝牙适配器后发现无法使用&#xff08;淘宝客服说不支持Centos&#xff0c;只支持ubuntu 和 debian&#xff09;。再者 Centos 现在也停止支持服务了…

头歌网页设计与制作实训答案

我这里已经看不见原题目了&#xff0c;只粘贴了有Begin和End部分的代码&#xff0c;如果题目符合但答案不符合的的&#xff0c;欢迎在评论区找我。如果有帮助&#xff0c;请赞一个。注意看目录里有没有你需要的。 目录 一、HTML——基础 1.初识HTML: 简单的Hello World网页制…

程序员秋招最全Java面试题及答案整理(2023最新版)

前言 大家好&#xff0c;最近一个月&#xff0c;花了不少时间&#xff0c;给大家整理了一套 2023 的技术面试资料 包括各大厂最新面试题以及面经解析涉及JVM&#xff0c;Mysql&#xff0c;并发&#xff0c;Spring&#xff0c;Mybatis&#xff0c;Redis&#xff0c;RocketMQ&a…

Firefly-SRC资产探测平台

前言 Firefly是一个集资产管理、信息收集和漏洞扫描的综合平台。 Firefly-SRC依托于Firefly平台中的信息收集功能&#xff0c;不断收集和整理各大src相关资产数据。希望能为各位白帽子师傅们提供更稳定可靠的src资产数据&#xff0c;减少师傅挖洞前期的信息收集时间&#xff0c…

一体化个人门户Web Portal

什么是 Web Portal ? Web Portal 是一个一体化的 Web 仪表板&#xff0c;提供许多小部件来构建个人门户。具有加载外部插件的能力。对于那些只需要链接仪表板并希望使用 yaml 配置它的人来说&#xff0c;Lite 版是一个精简版本。 构建镜像 如果你不想自己构建&#xff0c;可以…

Qt的基本知识与应用

一、C梳理 1. 面向对象的三大特性 1.1 封装 把类的一些属性和细节隐藏&#xff08;private、protected&#xff09;&#xff0c;根据读写需要重新开放外部调用接口&#xff08;public、protected&#xff09;。 1.2 继承 在已有的类的基础上创建一个新的类&#xff0c;新的类拥…

最新AI创作系统V5.0.2+支持GPT4+支持ai绘画+实时语音识别输入+文章资讯发布功能+用户会员套餐

最新AI创作系统V5.0.2支持GPT4支持ai绘画实时语音识别输入文章资讯发布功能用户会员套餐&#xff01; AI创作系统一、源码系统介绍二、AI创作系统程序下载三、安装教程四、主要功能展示五、更新日志 AI创作系统 1、提问&#xff1a;程序已经支持GPT3.5、GPT4.0接口 2、支持三种…

全网唯一正确的一部:GPT式网页上逐字输出像打字的效果用vue js实现全代码-使用SSE技术

GPT逐字显示效果 开篇 像这种屏幕上逐字输出,像一个机器人自动在屏幕上用传统的打印机或者说像“红警”、“COD”游戏里那种电传打字机逐字输出的效果是不是很酷? 其实,这种输出方式不仅仅只是酷,而是有着其设计原理性的东西存在的。GPT采用“逐字输出”的方式回答用户问…

Linux配置静态IP-包教包会(纯干货)

如有错误&#xff0c;敬请谅解&#xff01; 此文章仅为本人学习笔记&#xff0c;仅供参考&#xff0c;如有冒犯&#xff0c;请联系作者删除&#xff01;&#xff01; 方法一&#xff1a;图形化操作 1 选用NAT模式 打开虚拟机软件VM主页&#xff0c;如图&#xff0c;点击编辑虚…

Python3 OS 文件/目录方法 | 菜鸟教程(十四) 详解!!!

目录 一、os 模块提供了非常丰富的方法用来处理文件和目录。 二、常用的方法如下表所示&#xff1a; 三、常用方法详解 &#xff08;一&#xff09;Python3 os.access() 方法 1、概述 2、语法 3、参数 &#xff08;1&#xff09;path -- 要用来检测是否有访问权限的路径…

你不可不知的HTML优化技巧

如何提升Web页面的性能&#xff0c;很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置&#xff0c;文件压缩或是调整CSS。 很显然HTML 已经达到了一个瓶颈&#xff0c;尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K…

宝塔安装brotli

宝塔安装nginx broli nginxhttps配置&#xff1a; nginx &#xff08;情景&#xff09; 由于需要优化配置nginx宝塔安装版默认安装的是稳定版本。不支持添加第三方模块。&#xff08;之前我不知道brotli安装需要使用编译安装&#xff0c;这里宝塔直接升级nginx没出线问题&…

Java面试题2023(实际面试中遇到的有意思的问题)

问题1&#xff1a;Explain需要关注的指标 需要重点关注type、rows、filtered、extra。 type由上至下&#xff0c;效率越来越高 ALL 全表扫描 index 索引全扫描 range 索引范围扫描&#xff0c;一般条件查询中出现了>、<、in、between等查询 ref 使用非唯一索引扫描或…

实训七:存储过程与触发器 - 数据库实验 存储过程

数据库实验 存储过程 第1关&#xff1a;建立和调用存储过程&#xff08;不带输出参数的存储过程&#xff09;任务描述任务要求建立存储过程调用过程 相关知识建立存储过程设置语句结束符参数列表声明局部变量显示表达式的值 代码参考 第2关&#xff1a;建立和调用存储过程&…

小程序 快速配置https服务接口 - 项目是nodeJS配置本地https服务,不用下载源码不用付费,直接使用Git的openssh功能(亲测有效)

背景 学习网易云音乐小程序开发&#xff0c;用了老师的node JS做后端服务器&#xff0c;上线小程序体验版必须要https接口。 接下来就是配置NodeJs服务https踩的坑跟发现的惊喜。 配置https 下载与配置 密钥生成 1 运行命令 &#xff1a; openssl genrsa -out privatekey.p…

【Pyecharts】| 风电场运维可视化系统 | 文末送书

目录 一. &#x1f981; 摘要二. &#x1f981; 文章结构三. &#x1f981; 所用开发工具与相关技术3.1 PyCharm3.2 Flask3.3 Pyecharts3.4 Jinja2 四. &#x1f981; 设计与实现4.1 系统总体需求4.1.1 数据采集和处理4.1.2 可视化设计4.1.3 后台功能实现 4.2 系统用户模块的实…