javaweb(01)HTML&CSS

最新推荐文章于 2024-09-04 23:24:54 发布

跳着迪斯科学Java

最新推荐文章于 2024-09-04 23:24:54 发布

阅读量250

点赞数

文章标签： html css web html5

本文链接：https://blog.csdn.net/weixin_45834777/article/details/107784153

版权

javaweb(01):HTML&CSS

B/S软件架构

B：browser 浏览器

S: server 客户端

网页的组成成分

结构（网页上有什么东西）
- HTML用于描述页面的结构
表现（这些东西长什么样）
- CSS用于控制页面中元素的样式
行为（网页界面和用户交互）
- Javascript用于响应用户操作

HTML

简介

Hyper Text Markup Language （超文本标记语言）简写：HTML

HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

书写规范

表示整个 html 页面的开始
头信息

标题标题

body 是页面的主体内容

页面主体内容

表示整个 html 页面的结束
Html 的代码注释:

示例：

标签介绍

标签的语法

标签不能交叉嵌套

<!-- ①标签不能交叉嵌套 -->
	正确：<div><span>早安，安溥</span></div>
	错误：<div><span>早安，安溥</div></span>

标签必须正确关闭

	<!-- i.有文本内容的标签： -->
	正确：<div>早安，安溥</div>
	错误：<div>早安，安溥
	<hr />
	
	<!-- ii.没有文本内容的标签： -->
	正确：<br />
	错误：<br >
	<hr />

属性必须有值，属性值必须加引号

	正确：<font color="blue">早安，安溥</font>
	错误：<font color=blue>早安，安溥</font>
	错误：<font color=>早安，安溥</font>

注释不能嵌套

正确：

错误：

常用标签

1.br：换行； hr:分割线

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是一个网页</title>
</head>
<body>
    hello,I'm deserts~~<br />
    hello,I'm deserts~~<hr />
    hello,I'm deserts~~
</body>
</html>

效果：

2.font 字体标签

属性：

color 属性修改颜色

face 属性修改字体

size 属性修改文本大小

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.font标签.html</title>
</head>
<body>
	<font color="blue" face="宋体" size="20"> 我是一个字体标签</font>
	<!-- 字体标签 -->
</body>
</html>

效果：

3.特殊字符

常用特殊字符表

示例：把br换行标签变成文本转换成字符显示在页面上

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.特殊字符.html</title>
</head>
<body>
	
	<!-- 特殊字符 -->
	<font size="20" color="red">我是&lt;br&gt;标签</font>

</body>
</html>

效果：

4.标题标签

h1~h6:一级到六级标题

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.标题标签.html</title>
</head>
<body>
	
	<!-- 标题标签 -->
	<h1>我是一级标签</h1>
	<h2>我是二级标签</h2>
	<h3>我是三级标签</h3>
	<h4>我是四级标签</h4>
	<h5>我是五级标签</h5>
	<h6>我是六级标签</h6>

	
</body>
</html>

效果：

5.超链接（重点）

a标签是超链接，href属性设置连接的地址，target 属性设置哪个目标进行跳转

_self 表示当前页面**(默认值)*

_blank 表示打开新页面来进行跳转*

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.超链接.html</title>
</head>
<body>

	<!-- 超链接 -->
	<a href="www.baidu.com" target="_self">_self百度</a><br/>
	<a href="www.baidu.com" target="_blank">_blank百度</a><br/>
</body>
</html>