26-HTML5基础

最新推荐文章于 2024-07-25 11:52:08 发布

哥，你好猛

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量500

点赞数

分类专栏：前端三件套+jQuery 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/wy1511861159/article/details/120054469

版权

HTML5基础

第0节：

本节目标：

理解软件运行常见的2中模式

了解网页三大核心

本章其他说明

软件常见的运行模式

C/S模式 Client/Server 客户端和服务端程序

如：QQ 王者荣耀 LOL…

特点：1、每一个软件需要运行必须安装客户端程序

2、每次软件更新的是的时候每一个客户端需要分别进行更新

3、将一些运算的需求分摊的各个客户端（游戏页面渲染）

B/S模式 Browser/Server 浏览器和服务端程序

如：淘宝京东蜗牛官网

特点： 1、每次运行的时候不需要安装软件，只需要有浏览器就可以

2、每次更新的时候只需要更新服务端

3、使用的对比C/S模式比较方便

4、所有的数据都来自于服务器（页面渲染后台逻辑处理），如果软件过大或者软件页面渲染的需要比较高，对服务器的压力是非常大。

总结：2中模式没有绝对好与不好，各种有各自的特点。如果软件对于计算要求比较则采用C/S，如果软件追求方便，快捷采用B/S比较。

网页制作的三大核心

结构：指定一个网页当中哪些地方该显示什么内容–人的骨架–HTML语言 用于构建WEB页面的基础显示架构。

表现：称为样式，指定页面上内容该以哪些形势展现出来–人的肉体–CSS

行为：页面上交互的动作–动作–JavaScript

注意：JavaScript和Java之间的关系，类似周杰和周杰伦之间的关系。

第一节：HTML基础

本节目标：

了解HTML的含义及作用

掌握HTML标准文档结构

掌握标签的基本语法规则

掌握常见标签的分类

掌握HTML中注释的书写

什么是HTML

Hyper text Markup Language 超文本标记语言

https://www.w3school.com.cn/

作用：用于构建WEB页面的基础显示架构。

发展历史：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oH50zlip-1630547459497)(https://raw.githubusercontent.com/li573925122/image/master/img/20210809114808.png)]

HTML的文档标准

1.所有的HTML文档都是以.html结尾
2.所有的HTML文档中必须包含head标签和body标签其中head标签用于属性网页的配置信息，body是直接展示在浏览器的窗口的内容
3.所有的标签都应该放在html标签中
4.往往每一个HTML页面的第一句是声明文档

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZsdlwWMs-1630547459499)(https://raw.githubusercontent.com/li573925122/image/master/img/20210809152417.png)]

HTML标签的通用语法：

标签必须成对的出现有一个开始标签，有一个结束标签
标签与标签之间是可以嵌套
标签都用小写
注释的写法

<!-- 注释的内容 -->

关于编辑器

1、文本编辑器

2、NotePade++

3、HBilder ，Idea ，webStorm

使用HBilder创建一个WEB项目：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YbAwbh8g-1630547459500)(https://raw.githubusercontent.com/li573925122/image/master/img/20210809155610.png)]

###第二节：head中标签介绍

本节目标

掌握head中标签的作用及使用

理解页面编码的作用及设定方式

掌握常见的编码格式

<!DOCTYPE html>
<html>
	<!--HBuilder中快捷键说明
		注释： ctrl+shift+/
		补全标签  tab
		< 会自动提示 -- 回车会自动补全
		运行当前页面：ctrl+R
	-->
	<!--head标签
		head标签往往书写一些配置信息
		
	-->
    <head>
    	<title>百度一下 你就知道</title><!--声明该网页的标题-->
    	<!--<meta charset="utf-8"/>--><!--设置编码信息-->
    	<!--<meta  http-equiv="content-type" content="text/html; charset=utf-8"/> 编码的第二种写法-->
    
    	<!--
    		keywords
    		author
    		description
    		用于被搜索引擎发现
    	-->
    	<meta name="keywords" content="蜗牛  JAVA  前端  网络安全"/>
    	<meta name="author" content="马云"/>
    	<meta name="description" content="【蜗牛学苑】专注IT与互联网领域中高端人才培养，开设Java开发、软件测试、UI设计、Web前端、网络安全、Python开发、物联网、人工智能等多门IT与设计类培训课程及服务，学院汇聚了国内IT及互联网行业顶尖高手，集合了目前流行IT领域的所有成熟技术和思想，致力于为国内IT及互联网企业提供最符合企业人才需求的专门人才，最具技术含量和实战经验的内训课程，帮助各个企业及员工快速突破技术瓶颈，成就团队价值"/>
    	
    </head>
    <body>
    	我的第一个HTML页面
    </body>
</html>

第三节：文本标签介绍

本节目标

掌握常见文本标签的使用

掌握常见权重标签的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--文本标签
			作用：用于显示文本
			
			标题标签：<h1></h1>---<h6></h6>
			作用：用于显示标题 ,浏览器在渲染的时候会加黑加粗显示，随着h1-h6加黑加粗的程度逐渐降低
			段落标签：p
			作用：显示一个段落,段落与段落之间会换行<br />
			行内标签:span
			作用：HTML没有特殊的作用，主要作用要结合CSS来生效
			横线标签：hr
			作用：浏览器会渲染一根横线
			换行标签: br
			缩进标签：&nbsp;
			
			属性：h1  align  设置对齐方式
			     hr   width HTML中指定大小  直接给数值 px   可以通过百分比（参照父元素）
				HTML中设置颜色：3种
				              1.直接给指定颜色单词
				              2.rgb()
				              3.16进制的数值
			权重标签
			加粗：strong
			斜体：i
			中划线:del
			注意：权重标签之间可以嵌套使用
		-->

###第四节：图片标签的使用

本节目标

掌握图片标签常见的属性

掌握常见路径设定的2中方式

本节练习：

1、自我介绍页面制作

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wLvPdZJh-1630547459502)(https://raw.githubusercontent.com/li573925122/image/master/img/20210809112344.png)]

第五节：超链接标签的使用

本节目标

掌握超链接标签常见的属性及值

掌握锚点的使用

超链接标签：

作用：用于链接到其他页面或者其他站点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接标签的学习</title>
	</head>
	<body>
		<h3>超链接标签的学习</h3>
		<hr />
		<!--超链接标签
			a  作用：用于连接至其他页面或者其他站点
			href :目标地址      相对页面地址
							 网络地址
			target:指明开启新页面的时候开启的方式
				 _self :在当前页面中刷新新页面(默认)
				 _blank:在新窗口中显示页面
				 _top:在最顶层显示
				 _parent:在父级页面中显示
			注意：超链接标签中间必须有文字或者图片，用于点击
		-->
		<a href="http://www.baidu.com">百度一下</a>
		<a href="http://www.baidu.com"><img

最低0.47元/天解锁文章

哥，你好猛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
26-HTML5基础

HTML5基础第0节：本节目标：理解软件运行常见的2中模式了解网页三大核心本章其他说明软件常见的运行模式C/S模式 Client/Server 客户端和服务端程序如：QQ 王者荣耀 LOL…特点：1、每一个软件需要运行必须安装客户端程序 2、每次软件更新的是的时候每一个客户端需要分别进行更新 3、将一些运算的需求分摊的各个客户端（游戏页面渲染）B/S模式 Browser
复制链接

扫一扫

专栏目录