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">我是<br>标签</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>