html-前端内容初识

HTML解释:

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记)。相当于定义统一的规则(W3C),大家都来遵守他,这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式,呈现给用户!

网页的组成:

一个网页一般由两部分组成即:

  • HTML(Hypertext Markup Language)
  • 和CSS(Cascade Style Sheets)

HTML负责描述网页的结构和内容(如标题,导航栏等) CSS则负责网页的表现(外观)(如背景颜色,字体样式等)。

<head>和</head>之间的内容,是元信息和网站的标题 元信息一般是不显示出来的,但是记录了你这个HTML文件的很多有用的信息
<body>和</body>之间的内容,是浏览器呈现出来的,用户看到的页面效果。也就是说这里是网页的主体。也就是body的身体之意
<html></html>是说明这个是一个网页。告诉浏览器这个网页的开始和结束。他包含了之后的两个元素。<head>和</head>|<body>和</body>

文档结构如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8
 9 </body>
10 </html>

以下是各个内容的详细说明

一、DOCTYPE部分  ---<!DOCTYPE html>

HTML语言需要一个标准,当我们在第一行指定了<!DOCTYPE html>的时候,当浏览器去访问我们的代码的时候就就按照HTML代码里指定的标准去读取和渲染给我们展现的页面。

二、head部分

1、Meta(metadata information)

提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

1.1、定义编码格式

<meta charset="UTF-8">  #定义编码为utf-8

1.2、刷新和跳转页面

<meta http-equiv="refresh" content="2">  #2秒刷新
<meta http-equiv="refresh" content="1;Url=http://www.baidu.com/"/> #1秒跳转到百度首页

1.3、关键字

关键字的作用:一般是让爬虫之类的收录程序,当他们在爬你的网站的时候,如果你有关键字,那么他们会优先把关键字收录到他们的记录中,比如百度:如果他们收录之后,他们搜索你的关键字的时候,就能找到百度的网站。

<meta name="keywords" content="前端,html,网页">

1.4、描述

例如博客园的描述如下:

<meta name="description" content="博客园是一个面向开发者的知识分享社区。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。">

1.5、设置网页title信息

    <title>这是做的第一个网页</title>

图示:

1.6、设置网页图标Link

<link rel="icon" href="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" type="image/x-icon"/>

图示:

1.7、导入CSS类似python中导入模块类似

<link rel="stylesheet" href="css/css_model.css">

1.8、style

  1、在当前文件中写Css样式

  2、在其他文件中写Css样式类似python的模块导入的方式把Css样式导入到当前文件中使用

1.9、script

  1、在当前文件中写JS

  2、在其他文件中写JS类似python的模块导入的方式把JS导入到当前文件中使用

原文地址:https://www.cnblogs.com/june-L/p/11828233.html

时间: 2024-11-04 16:54:11

html-前端内容初识的相关文章

使用js实现前端内容实时搜索

本文主要基于项目的一个基本搜索功能,前端显示所有用户的在线评论信息:用户可以 根据需要在搜索框中输入搜索关键字,实时搜索出相应的显示结果,并高亮显示. 实现代码: /** * @brief 搜索一条房间中的符合要求的发言 * @param $keyword 搜索的关键字 */ var isSkip = false; $('.search-icon').click(function() { showSearch(); }); function showSearch() { $('.search-c

python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建

前端回顾: 整体: - HTML - CSS - JavaScript - 基本数据类型 - for,while.. - DOM - obj = document.getElementById('..') - obj.innerHtml - BOM: - setInterval... ----> 可以完成所有操作 <---- - jQuery: - 选择器 $('#') $('.') - 筛选器 $('#').find('') - 内容或属性 - $('#i1').val() input系列,

前端开发初识

一,前端开发的概念 Web前端开发是从网页制作演变而来(以前称为网页制作),名称上有很明显的时代特征.在互联网的演化进程中,网页制作是Web1.0时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主.随着互联网技术的发展和HTML5.CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大. 1.1 web1.0时代的网页制作 web1.0时代是一个群雄并起,逐鹿网络的时代,虽然各个网站采用的手段和方法不同,但第一代互联网有诸多共同的特征,表现在技术创新主导

前端内容介绍

编程:处理数据.存储数据.使用(展示)数据 1.前端是做什么的? 在浏览器上展示数据的, 2.前端都有哪些内容? HTML.CSS.JavaScirpt,这是前端的基础. (1)HTML 网页上的内容文字,都是用html来呈现的.用来做内容的 (2)CSS 用来改变网页内容的样式的.用来做外观的 CSS框架我们学bootstrap (3)JavaScript 网页上点击后有反应.交互的动态效果都是用JS来做的.用来做动作.效果.人机交互的.JavaScript和java没有关系,只是名字上有关系

前端内容之HTML:HTTP协议、HTML中重要的标签、表格、表单等

什么是前端: 与用户直接打交道的,例如:手机电脑的界面 什么是后端: 幕后操作者,不直接与用户打交道的 WEB服务的本质: 浏览器中输入网址回车发送了几件事? 1.浏览器朝服务端发送请求 2.服务端接收请求 3.服务端返回响应 4.浏览器接收响应            按照相应的规则渲染给用户看. HTTP协议: 超文本传输协议 规定了浏览器与服务端传输数据的格式 四大特性: 1.基于请求响应 2.基于TCP/IP之上的作用于应用层的协议 3.无状态(服务端不保存用户状态,即使同一用户每次来都当

前端内容整理(一)

正文前: 前端是和用户直接交互的界面的称呼. web是基于B/S,本质上是基于C/S.为什么用一个浏览器,可以访问百度,访问博客园....等等服务器?因为都遵循着HTTP协议 HTTP协议 ? HTTP协议全称叫超文本传输协议.规定了浏览器与服务端之间数据传输的格式. 一.四大特性 基于请求响应.一次请求对应一次响应 基于TCP/IP作用于应用层上的协议 无状态,不保留客户端的状态.(cookies,session,token来源) 无连接(长连接 websocket---类似于http协议的大

Python 学习第十六天 html 前端内容总结

一,css知识总结 1, css属性 css的属性包括以下内容 position:规定元素的定位类型 background:属性在一个声明中设置所有的背景属性 可以设置的如下属性:   (1)background-color (2)background-position (3)background-size (4)background-image text-align:规定元素中的文本的水平对齐方式 margin:在一个声明中设置所有的外边距属性 padding:在一个声明中设置所有的内边距属性

前端内容缓存技术:CSI,SSI,ESI

一.CSI (Client Side Includes)   含义:通过iframe.javascript.ajax  等方式将另外一个页面的内容动态包含进来. 原理:整个页面依然可以静态化为html页面,不过在需要动态的地方则通过iframe,javascript或ajax来动态加载! 例子:<iframe src='http://abroad.e2bo.com/index.php' border='0'></iframe> 优点:相对比较简单,不需要服务器端做改变和配置: 缺点

前端内容转译html

其他地方采集过来的可以转译下,试试这个:var returnReg = /\n/g; detail = detail.replace(returnReg,""); var reg = /&amp;amp;gt;|&amp;gt;|&gt;|&gt/g; detail = detail.replace(reg,">"); reg = /&amp;amp;lt;|&amp;lt;|&lt;|&lt/g