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>
文档结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> </body>
</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导入到当前文件中使用
html-前端内容初识的更多相关文章
- 【风马一族_Android】Android 前端内容1
Android 前端内容 4.1 View 类概述 4.1.1 关于 View //类型说明 view(视图)指的是用户界面组件的基本构建基块.一个视图占据屏幕上的矩形区域,负责绘图和事件处理.视图是 ...
- 【风马一族_Android】Android 前端内容
Android 前端内容 4.1 View 类概述 4.1.1 关于 View //类型说明 view(视图)指的是用户界面组件的基本构建基块.一个视图占据屏幕上的矩形区域,负责绘图和事件处理.视图是 ...
- 前端---JQuery初识
---恢复内容开始--- BOM JQuery认识 JQuery基本选择器 JQuery高级选择器 1.javascript基础部分包括三个部分: ECMAScript:JavaScript的语法标准 ...
- 前端内容安全策略(csp)
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源( ...
- 总结day7 ---- 函数的内容 ,初识,返回值,进阶(一)
内容大纲: 一: 函数识别 二: 函数的结构 三: 函数的返回值, 四: 函数的参数 五: 动态参数 六: 形参的顺序 七: 名称空间 八: 作用域 九: 加载顺序和取值顺序 十: 内置函数 十一: ...
- python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建
前端回顾: 整体: - HTML - CSS - JavaScript - 基本数据类型 - for,while.. - DOM - obj = document.getElementById('.. ...
- 前端基础 & 初识HTML
WEB 服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bin ...
- Python 学习第十六天 html 前端内容总结
一,css知识总结 1, css属性 css的属性包括以下内容 position:规定元素的定位类型 background:属性在一个声明中设置所有的背景属性 可以设置的如下属性: (1)back ...
- web前端基础——初识HTML DOM编程
1 HTML DOM编程概述 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...
随机推荐
- sql server 批量备份数据库及删除N天前的备份数据
很多时候,我们都需要将数据库进行备份,当服务器上数据库较多时,不可能一个数据库创建一个定时任务进行备份,这时,就需要进行批量的数据库备份操作,好了,废话不多说,具体实现语句如下: 1 2 3 4 5 ...
- 解决Spring Cloud中Feign第一次请求失败的问题
在Spring Cloud中,Feign和Ribbon在整合了Hystrix后,可能会出现首次调用失败的问题 com.netflix.hystrix.exception.HystrixTimeoutE ...
- 聊聊Runloop
1.什么是Runloop 在开始聊RunLoop之前,我们先来了解一下程序的执行原理.一般来说,程序是在线程中执行,一个线程一次只能执行一个任务(关于GCD,可看上篇文章介绍),执行完成后线程就会退出 ...
- Ethics
1.What are Ethics? Ethics describe a code of behaviour 2.Why Ethics in Data Science is important? da ...
- 如何同时在Isilon的所有网卡上抓取网络包?
命令行如下: cd /ifs/data/Isilon_Support/ mkdir $(date +%m%d%Y) isi_for_array 'for i in `ifconfig | grep - ...
- 奥展项目笔记02--一个bat文件运行多个java jar包
奥展项目中后端微服务有很多jar包,一个一个启动又费时间效率又低,怎么才能一下让所有的jar包一块运行呢?我们可以编写.bat文件来一键启动. 1.我们将.bat文件放到jar包的同一级目录文件夹中: ...
- Appium+python自动化(四)- 如何查看程序所占端口号和IP(超详解)(番外篇)
简介 这篇博文和分类看似没有多大关系,但是也是从上一篇衍生出来的产物,因为涉及到FQ工具Lantern,就算是给关注和支持的小伙伴们拓展一下眼界和知识面.而且好多人都阅读了上一篇没发现那个参考博客点不 ...
- Debian CentOS修改时区
Debian修改时区: dpkg-reconfigure tzdata https://wiki.debian.org/TimeZoneChanges CentOS修改时区: timedatectl ...
- Blockstack: A Global Naming and Storage System Secured by Blockchains
作者:Muneeb Ali, Jude Nelson, Ryan Shea, and Michael Freedman Blockstack Labs and Princeton University ...
- mvc视图双下拉框联动
html部分的代码 <tr class="trs"> <td class="item1"><div class="ite ...