微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 2020年4月2日作业--HTML5基础知识

博主信息

博文 29

粉丝 0

访问量 36219

专题推荐

更多>

HTML基础知识

1.网页的组成部分

序号	内容	描述
1	文字	给用户看的文字
2	其他文件	外部引入的文件如图片，视频，音频、样式表、JS脚本等
3	标记	对文字及引用文件的正确描述

每个页面都有这三个部分，并且都是用纯文本进行描述
任何可以写纯文本的编辑器都可以写HTML页面
现在的主流版本是HTML5

2.HTML设计思想

HTML文档中的一切都是基于标签实现的
HTML是超文本标记语言

术语	描述
超文本	包含有超链接的文本
标记	用来描述内容的固定标签
语言	HTML不是编程语言，只是工具

3.基本的HTML页面

3.1HTML结构源码

<!DOCTYPE html>
<html lang="en">
<head>
<!--头部内容区-->
  <!--定义字符编码集-->
  <meta charset="UTF-8">
  <!--定义网页宽度为显示设备屏幕宽度-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--页面在浏览器中显示的名称-->
  <title>HTML5页面结构</title>
</head>
<body>
  <!--页面主体内容区-->
</body>
</html>

3.2源码逐行分析

代码	解析
`<!DOCTYPE html>`	通知浏览器这是一个HTML5文档，始终写在第一行
`<html>...</html>`	跟标签/根元素，所有HTML元素都要写在这个标签内
`<html lang="en">`	通知搜索引擎网页的编写语言是英语，中文为`<html lang="zh-CN">`
`<head>...</head>`	给浏览器和搜索引擎看的,主要描述字符编码集,视口与页面标题
`<meta>`	解释页面元素的数据，在head中给浏览器和开发者看的
`<meta charset="UTF-8">`	告诉浏览器 html的字符集是`UTF-8`
`<meta name="viewport" content="..." />`	视口/可视区屏幕的设置，下面三行是对它的参数详解
`name="viewport"`	设置属性名name的值为视口/可视区屏幕
`width=device-width`	页面宽度与显示设备的屏幕宽度一样宽,`device-height` 显示设备的屏幕高度
`initial-scale=1.0`	设置页面初始绽放比例,`1.0`表示原样 1:1 显示,不允许有任何绽放
`<title>`	显示在浏览器标签上的文本, 指定当前页面的标题, 这个标签对 SEO 非常重要
`<body>...</body>`	页面主体内容,允许或希望用户的内容都应该写到这里,用户也只对这里的内容感兴趣
`<!-- 注释内容 ->`	注释用来描述标签功能或用途,它的内容不要出现在显示的网页中, 只会出现在 html 源代码中
`<h2>PHP中文网欢迎您...</h2>`	浏览器渲染这个 html 文档时,最终只会呈现这个标题内容与效果,并不显示标签`<h2>`

编写 html 文档的标签字符不区分大小写, 但是推荐全部使用小写字母

4.元素属性与值

4.1元素

元素	标签	语法	描述
非空元素	双标签	`<p>...</p>`	<起始标签>元素内容</结束标签>
空元素	单标签	`<img src="..." alt="">`	<标签引用地址属性 …>

空元素也有用双标签的，如<script>|<video>|<br>...

4.2属性和值

4.2.1基本语法

属性：必须写到元素的起始标签中，由属性名和属性值组成
语法：属性名=”属性值”，属性名推荐小写字母加双引号
案例：<input type="password" maxlength="20" placeholder="至少8个字符" required>

序号	值类型	描述/HTML代码
1	字符串	`<p class="active">...</p>`
2	预定义值	`<input type="text">`
3	指定格式	`<a href="http://php.cn">...</a>`
4	数值	`<table width="200">...</table>`
5	布尔值	`<input type="email" required>`