Javaweb学习笔记day01--HTML、CSS

最新推荐文章于 2024-06-22 16:25:46 发布

Mr.W.code

最新推荐文章于 2024-06-22 16:25:46 发布

阅读量369

点赞数

分类专栏： sql java 笔记文章标签： java 游戏开发算法

本文链接：https://blog.csdn.net/Wynb1020/article/details/121572386

版权

这篇博客介绍了HTML的基础知识，包括书写规范、各种文本标签、图像、列表、超链接和表格的使用。同时，也讲解了CSS的三种结合方式以及选择器、字体和文本属性的应用，帮助初学者入门Web前端开发。

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

HTML

html概述:超文本标记及语言

作用：让开发人员和浏览器交互

超文本：网站上的资源，比如文本、图片、视频、音频、链接、表格、列表等等

标记：也叫标签、元素、结点等，就是用尖括号（<>）括起来的一组内容，例如：

<head> <body> <div> <span> <table>等

HTML是最基础的开发网页的语言。

语言：交流工具

概述
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
官网
HBuilderX-高效极客技巧 (dcloud.io)
安装
解压即可
界面
使用
项目结构说明(记忆)

结构	说明
css	存储css样式文件
img	存储图片、文本、音频、视频等等网站资源
js	存储js脚本文件
index.html	当前项目的欢迎页面

html书写规范

语法

 <开始标签 属性1=“值1” 属性2=“值2”>标签内容</结束标签>

一般情况下，有开始标签，也有结束标签，标签是成对出现
如果只有开始标签，没有结束标签，自关闭标签
一般情况下，标签名称要求小写，前后一致
标签属性，只能放到开始标签中

文件标签

概述
- 一个html的基本组成部分
分类
- html : 声明当前文件是一个html文档
- head : 设置当前页面的属性，往往不可显示
- body : 设置当前页面的内容，往往会显示
代码实现

<!DOCTYPE html>
<!-- 声明当前是一个html文档 -->
<html>
	<!-- 设置当前页面的属性 -->
	<head>
		<!-- 设置字符集 -->
		<meta charset="utf-8" />
		<!-- 设置页面的标题 -->
		<title>欢迎来到前端世界</title>
	</head>
	
	<!-- 设置当前页面的内容 -->
	<body>
		fuck world
	</body>
</html>

注意事项

一个html文件的后缀名是".html"、".htm"

标签属性

body属性
- background、text、bgcolor
- 颜色取值(16进制值、颜色名称
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标签属性</title>
	</head>
	<body text="green" bgcolor="pink" background="img/girl1.jpg">
		hello world
	</body>
</html>

文本标签之br标签

概述
- 插入一个简单的换行符。
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>br标签</title>
	</head>
	<body>
		hello<br/>
		world
	</body>
</html>

文本标签之p标签

概述
- 定义段落。会自动在其前后创建一些空白。
常用属性
- align : 规定段落中文本的对齐方式。
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>p标签</title>
	</head>
	<body>
		<p align="center">hello</p>
		<p>world</p>
	</body>
</html>

文本标签之font标签

概述
- 规定文本的字体、字体尺寸、字体颜色。
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>font标签</title>
	</head>
	<body>
		
		<font face="楷体" color="red" size="7">helloworld</font>
		
	</body>
</html>

文本标签之标题标签

概述
- 可定义标题。
  定义最大的标题。
  定义最小的标题。
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>标题标签</title>
	</head>
	<body>
		<h1 align="center">这是标题 1</h1>
		<h2>这是标题 2</h2>
		<h3>这是标题 3</h3>
		<h4>这是标题 4</h4>
		<h5>这是标题 5</h5>
		<h6>这是标题 6</h6>
	</body>
</html>

img标签

概述
- 向网页中嵌入一幅图像。
- 两个必需的属性：src 属性和 alt 属性。
常用属性
- src、alt、border、width、height
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>img标签</title>
	</head>
	<body>
		<img src="img/girl2.jpg" alt="图片无法显示!!!" width="200px" height="110px" border="10px"/>
	</body>
</html>

列表标签

概述
- ol、ul都是由列表项(li)组成
分类
- 有序列表 : order list (ol)
- 无序列表 : unorder list (ul)
代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>有序列表</title>
	</head>

最低0.47元/天解锁文章

Mr.W.code

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Javaweb学习笔记day01--HTML、CSS

HTMLhtml概述:超文本标记及语言作用：让开发人员和浏览器交互超文本：网站上的资源，比如文本、图片、视频、音频、链接、表格、列表等等标记：也叫标签、元素、结点等，就是用尖括号（<>）括起来的一组内容，例如：<head> <body> <div> <span> <table>等HTML是最基础的开发网页的语言。语言：交流工具概述HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。
复制链接

扫一扫