Day80.html的基本内容 -HTML和CSS、JS_f 08q.html t.html # y.css r.html w.hthtml> body-CSDN博客

本文链接：https://blog.csdn.net/qq_43284469/article/details/109251591

本文介绍了HTML和CSS的基础知识，包括前端BS软件结构、开发流程和网页的三大组成部分：内容、表现和行为。讲解了HTML的常用标签、文件书写规范，并通过创建HTML文件及浏览器执行来实践。此外，还提及了HTML代码注释和一些基本标签的使用，如button的onclick事件。

摘要由CSDN通过智能技术生成

Html和CSS

Javase → C/S模式 → Client / Server

Javaweb→B/S模式 → Browser / Server

1. 前端BS软件结构

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nJulwsj1-1603466470829)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023165928635.png)]$

2. 前端的开发流程

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VOzOJLQi-1603466470833)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023170022960.png)]$

3. 网页的组成部分

页面组成:

内容(结构)、表现、行为。

内容(结构)、表现、行为

内容(结构): 是我们在页面中可以看见的数据。我们称之为内容。		  一般使用html技术展示实现
表现: 这些内容在页面上的展示形式。比如，布局、颜色、大小等。		 一般使用CSS技术实现
行为: 页面中元素与输入设备交互响应。						  	一般使用JavaScrip技术实现

4. HTML简介

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zGiFYriO-1603466470835)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023220212557.png)]$

5… 创建HTML文件

创建一个web工程(静态的web工程)

在这里插入图片描述

在工程下创建html页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UETxy5LO-1603466470844)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023221426689.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D8dmm6dm-1603466470847)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023221908670.png)]$

编写页面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    hello
</body>
</html>

选择浏览器执行页面

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c0MsHclS-1603466470849)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023222157534.png)]$

6. HTML文件的书写规范

<html>						 -表示整个html页面的开始
	<head>					 -头信息
		<title>标题</title>   -标题
	</head>
	<body>					 -body是页面的主体内容
	页面主体内容
	</body>	 
</html>						 -表示整个html页面的结束

Html的代码注释: <!--这个是html注释,可以在页面右击查看源代码中看到此注释 -->

7. HTML标签介绍

1. 标签的格式：
	<标签名>封装的数据</标签名>
2. 标签名大小写不敏感
3. 标签拥有自己的属性。
	①基本属性: bgcolor = "red"				 -可以修改简单的样式效果
	②事件属性: onclick = "alert('你好!');"	-可以直接设置事件响应后的代码	
4. 标签又分为:单标签、双标签
	①单标签格式: <标签名 />				br换行、hr水平线
	②双标签格式: <标签名> ...封装的数据...</标签名>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TS3rfNiF-1603466470852)(C:\Users\PePe\AppData\Roaming\Typora\typora-user-images\image-20201023225751036.png)]$

<!DOCTYPE html>              <!-- 约束,声明  -->
<html lang="zh_CN">          <!-- html标签表示html的开始   lang="zh_CN"表示中文  html标签中一般分为两部分，分别是:head和body  -->
<head>                       <!--  表示头部信息，一般包含三部分内容，title标签，css样式，js脚本代码 -->
    <meta charset="UTF-8">   <!--  表示当前页面使用UTF-8字符集  -->
    <title>某某宝</title>     <!-- 表示标题  -->
</head>
<!--bgcolor是背景颜色属性
    onclick表示单击(点击)事件

    alert() 是javaScrip语言提供的一个警告框函数，他可以接收任意参数;参数就是警告框的提示信息
-->
<body>                       <!-- body标签是整个html页面显示的主体内容 -->
    hello
<button onclick="alert('阿昌好帅')">按钮</button> 今天天气<br>真好
<hr>
呀
</body>
</html>