5页面title样式修改_认识html:实现网站页面是这么简单的一回事

88ea59b169cc86aba41c7566d6a22145.png

互联网时代人们通过上网浏览信息,打开浏览器上网看到丰富的图文、视频、音乐等多媒体信息,一系列信息反馈和视觉冲击之后,您有没有想过,互联网这么发达的时代,您觉得花一点点时间学会做个网站页面不真香?概念须知:超文本标记语言
“超文本标记语言“(HTML)作为文档信息载体。当我们用html创建文档时,它将我们的语言转换成计算机可以理解的语言。这使得计算机能执行特定任务至关重要。人与计算机交互,需要一套编辑规范,编辑者(相对于计算机,这里指写html的人)使用html标签(机器识别的关键字)对内容做排版,填写内容,然后定义板块的样式和动画后的一份字符串文本,发布到远程服务器,最终被机器解析成网络传输报文协议,传输到前端(一般情况下就是我们的浏览器),就能够呈现出大家熟悉的网站页面了。
简单的html

这里有一个小的指导教程,大家可以跟着来学习
一、 准备工具

  1. 编辑器 - windows系统自带的记事本工具(右击鼠标快捷键-> 新建 -> 文本文档 )
  2. 浏览器


二、 实现步骤

  1. 电脑桌面上右击鼠标,新建文本文档,helloword.html,需要注意修改.txt后缀名为.html

1da249d012188926e4bfe1cf652c528a.png

2.输入以下内容

<html> <head> <title>第一个页面</title> </head> <body> <h1>您的成果</h1> <p>hello word!</p> </body></html>

  1. 用浏览器打开这个文档,可以通过修改打开方式也可以把文档拖到浏览器快捷键图标上面选择浏览器打开,预览成果。

f0b26e1325b589129c8bc59727cacdcd.png


三、总结一下您做的事情
使用windows系统的文本文档工具写了一份文本。这是一份主要信息内容(“第一个页面”、“您的成果”、“hello word!”),和信息结构化载体关键字(“html”,“head“,“title“,“body”,“h1”,“p”)的文本,组成了一份带结构的文本。我为什么称之为带结构呢?主要原因是,读者阅读需要清楚知道内容排版、模块、段落信息等等,例如:一份word文档,首行就是一个大标题,其次副标题,然后就是段落内容,其组成成分可能有图片、视频、跳转链接、注释等,它们组成了一个word文档的结构,按word文档结构规范编辑word文档是掌握word的基本要领。掌握html,需要认识html的基本结构。按照教程的html内容,它组成了html的最基本结构,<html> </html>, 可告知浏览器其自身是一个 HTML 文档。<head></head>,可告知浏览器这里是文档的头部。<body></body> 这里是文档的主体。“<>” 告知浏览器,将要用到元素标签,即“<html>”用了html标签。“<>”是标签的开始,“</>”则是标签的结束。标签是HTML语言中最基本的单位,标签的组合使用即是自由组合,也是相互约束的。例如:“<title></title>”标签,告诉浏览器本页的标题,只能在“<head></head>”标签里面使用。掌握html需要知道各种标签的作用范围,定义和用法。以上 “<h1></h1>” 是文档内容大标题,副标题有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 标签定义了段落内容,每一次 “<p></p>”,文本内容将产生一个段落。编写html为了方便阅读,需要有良好的编写格式。每一个子标签需要顶格,“<head>"相对“<html>顶格了,我是通过输入Tab实现的。平级的标签不需要顶格,例如 ,案例中的排版 “<h1>" “<p>" 是相对于“<body>"平级的。

258badf9677c6f6b346bf3a62230895d.png

如何实现网络上常见的html页面效果

  • 充分利用html标签,完成页面内容的布局,需要掌握以下要点
    • 掌握基本的html标签,参考网络学习资源链接: https://www.w3school.com.cn/html/html_basic.asp
    • 掌握html排版技巧,使得页面内容整整齐齐
  • 使用css,层叠样式定义,它主要是负责控制内容展示的形式,并不具有具体信息内容,它能控制html元素的布局、属性、例如在css里面,定义了某类元素的名字(.className = {}),这类元素统一长度为10px( .className = {width:10px} ),之后通过把名字赋予元素(<div class="className" > <div>),拥有class="className"的元素都会显示出长度为10px的样子。参考内容 https://www.w3cschool.cn/css/
  • 使用script,可以控制元素的响应动作,例如移动元素、改变元素的大小,颜色、切换图片、提交表单、校验内容等等。页面常用的是javascript,需要较轻的编程知识,但是由于javascript的出现,使得页面的前端开发技术的进步,永无止境。参考内容 https://www.w3school.com.cn/tags/tag_script.asp

总结
html如此简单,只要您不被标签内容影响了您对超文本的阅读理解,了解html标签对内容做了结构化,掌握起来,便能够进入互联网的大舞台时代了!
获得精彩内容,记得关注哦!

v2-f9aeeffc7ea22076e9c6b83a18b0f4d1_b.png

9290b82fc70e0ffbf3c6a7853914e9b7.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/372938.shtml

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

相关文章

iOS指南针

前言&#xff1a; 这个小项目使用到了CoreLocation框架里面的设备朝向功能&#xff0c;对CoreLocation感兴趣的可以翻一下之前的文章 在另一个博客站有朋友发现一个尴尬的问题&#xff08;图片的东西2个方向是不对的&#xff09;&#xff0c;原谅我的大意&#xff0c;赶时间就直…

jq的链式调用.end();

jq的链式调用.end(); 先上code <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>li{list-style: none;width: 100px;height:20px;border:1px solid #ff0000;display: …

程序如何在两个gpu卡上并行运行_深度学习分布式训练相关介绍 - Part 1 多GPU训练...

本篇文章主要是对深度学习中运用多GPU进行训练的一些基本的知识点进行的一个梳理文章中的内容都是经过认真地分析&#xff0c;并且尽量做到有所考证抛砖引玉&#xff0c;希望可以给大家有更多的启发&#xff0c;并能有所收获介绍大多数时候&#xff0c;梯度下降算法的训练需要较…

系统英伟达gpu驱动卸载_绕过CPU,英伟达让GPU直连存储设备

英伟达最近发布了一个新的GPUDirect Storage&#xff0c;暂且叫做GPU直连存储&#xff0c;让GPU直接连到NVMe存储设备上。这一方案用到了RDMA设备来把数据从闪存存储转移到GPU本地的内存里&#xff0c;无需经过CPU还有系统内存。如果这一举措顺利的话&#xff0c;英伟达就能摆脱…

嘲弄和存根–了解Mockito的测试双打

介绍 我遇到的一件事是使用模拟框架的团队假设他们在模拟。 他们并不知道Mocks只是Gerard Meszaros在xunitpatterns.com上归类的“测试双打”之一。 重要的是要意识到每种类型的测试双精度在测试中都扮演着不同的角色。 用与您需要学习不同模式或重构的方式相同&#xff0c;您…

【代码笔记】iOS-首页3张图片变化

一&#xff0c;效果图。 二&#xff0c;工程图。 三&#xff0c;代码。 RootViewController.h #import <UIKit/UIKit.h>interface RootViewController : UIViewController {NSTimer *timer;UIImageView *imageView1;UIImageView *imageView2;UIImageView *imageView3;UIV…

使用Eclipse在Amazon Ec2中部署Java Web应用程序的完整指南

嗨&#xff0c;读者们&#xff0c; 今天&#xff0c;我将向您展示如何使用Eclipse IDE在Amazon EC2中部署简单的Java Web应用程序。 在我们开始之前&#xff0c;我们需要一些必需的东西&#xff0c; Eclipse Java EE IDE –您可以从http://www.eclipse.org/downloads/下载&…

Spring 3和Java EE 6 –不公平和不完整的比较

这篇小文章的初稿标题为“ Spring&#xff06;Java EE –比较苹果和橙子”。 在撰写本文时&#xff0c;我了解到可以比较Spring Framework和Java EE&#xff0c;但这始终是不公平且不完整的工作。 Java for Enterprise和Spring Framework的发展紧密地联系在一起。 两者相互依存…

xml配置文件推荐方式

1.XML帮助类 /// <summary>/// Xml帮助类/// </summary>public class XmlHelper{/// <summary>/// 保存xml/// </summary>/// <typeparam name"T"></typeparam>/// <param name"path"></param>/// <p…

AFNetWorking https SSL认证

一般来讲如果app用了web service , 我们需要防止数据嗅探来保证数据安全.通常的做法是用ssl来连接以防止数据抓包和嗅探 其实这么做的话还是不够的 。 我们还需要防止中间人攻击&#xff08;不明白的自己去百度&#xff09;。攻击者通过伪造的ssl证书使app连接到了伪装的假冒的…

查看环境列表_Xfce 4.14桌面环境正式发布,想要图形界面又想节省内存?就它了...

1. Xfce 4.14桌面环境正式发布&#xff0c;它有什么新特性&#xff1f;本文主要讲解Xfce 4.14桌面环境正式发布&#xff0c;它有什么新特性。Xfce已经开发了4年多&#xff0c;但是这个周末终于看到了期待已久的Xfce 4.14的发布。Xfce 4.14是这个轻量级桌面环境的最新稳定版本&a…

卷积神经网络语音识别_用于物体识别的3D卷积神经网络

本文提出了一种基于CNN的3D物体识别方法&#xff0c;能够从3D图像表示中识别3D物体&#xff0c;并在比较了不同的体素时的准确性。已有文献中&#xff0c;3D CNN使用3D点云数据集或者RGBD图像来构建3D CNNs&#xff0c;但是CNN也可以用于直接识别物体体积表示的体素。本文中&am…

#获得请求来源ip_以太网数据包TCP、IP、ICMP、UDP、ARP协议头结构详解

以太网首部目地MAC地址(8字节)源MAC地址(8字节)类型(2字节)1、IP头的结构版本(4位)头长度(4位)服务类型(8位)封包总长度(16位)封包标识(16位)标志(3位)片断偏移地址(13位)存活时间(8位)协议(8位)校验和(16位)来源IP地址(32位)目的IP地址(32位)选项(可选)填充(可选)数据(1)字节和…

c# ef报错_C# EF调用MySql出现“未将对象引用设置到对象的实例”错误解决方案

C# EF调用MySql出现“未将对象引用设置到对象的实例”错误解决方案---修改步骤---1.打开Nuget管理包&#xff0c;把Mysql.Data替换为6.10.0以下任意版本。这里选择的是6.8.82.修改完毕后&#xff0c;继续把Mysql.Data.Entity也修改为对应版本6.8.8。3.安装完成后可以看到App.Co…

ServletRequest startAsync()的有用性有限

前段时间我遇到了Servlet 3.0中AsyncContext.start&#xff08;…&#xff09;的目的是什么&#xff1f; 题。 引用上述方法的Javadoc &#xff1a; 使容器调度线程&#xff08;可能从托管线程池中&#xff09;运行指定的Runnable 。 提醒大家&#xff0c; AsyncContext是Servl…

mysql所支持的比较运算符_mysql比较运算符有哪些?Mysql比较运算符详解

比较运算符可用于比较数字和字符串。今天发一篇Mysql比较运算符详解&#xff0c;希望对初学者有所帮助&#xff0c;虽然现在流行NoSQL&#xff0c;但是MYSQL还是很有用的&#xff0c;数字作为浮点值进行比较&#xff0c;字符串以不区为例进行比较&#xff0c;运算符用于比较表达…

Http Invoker的Spring Remoting支持

Spring HTTP Invoker是Java到Java远程处理的重要解决方案。 该技术使用标准的Java序列化机制通过HTTP公开服务&#xff0c;并且可以被视为替代解决方案&#xff0c;而不是Hessian和Burlap中的自定义序列化。 而且&#xff0c;它仅由Spring提供&#xff0c;因此客户端和服务器应…

学习后缀自动机想法

小序&#xff1a;学习后缀自动机是要有耐心的&#xff0c;clj的论文自己看真心酸爽&#xff01;&#xff08;还是自己太弱&#xff0c;ls&#xff0c;oyzx好劲啊&#xff0c;狂膜不止&#xff09; 刚刚在写博客之前又看了篇论文&#xff0c;终于看懂了&#xff0c;好开心 正文&…

mysql 分组top_MySQL:如何查询出每个分组中的 top n 条记录?

问题描述需求&#xff1a;查询出每月 order_amount(订单金额) 排行前3的记录。例如对于2019-02&#xff0c;查询结果中就应该是这3条&#xff1a;解决方法MySQL 5.7 和 MySQL 8.0 有不同的处理方法。1. MySQL 5.7我们先写一个查询语句。根据 order_date 中的年、月&#xff0c;…

利用jenkins的api来完成相关工作流程的自动化

[本文出自天外归云的博客园] 背景 1. 实际工作中涉及到安卓客户端方面的测试&#xff0c;外推或运营部门经常会有很多的渠道&#xff0c;而每个渠道都对应着一个app的下载包&#xff0c;这些渠道都记录在安卓项目下的一个渠道列表文件中。外推或运营部门经常会有新的渠道产生&a…