JavaWeb——HTML课堂笔记

最新推荐文章于 2024-08-05 17:22:58 发布

花如锦X-D

最新推荐文章于 2024-08-05 17:22:58 发布

阅读量290

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/a2228273211/article/details/107033940

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML的基础知识，包括超文本标记语言的概念，HTML文档的语法，如围堵标签、自闭合标签和属性的使用。此外，还讲解了HTML中的关键标签，如文本、图片、列表、链接、div、span以及语义标签在HTML5中的应用。

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

HTML课堂笔记

- web概念概述
- HTML

web概念概述

JavaWeb:
 	使用Java语言开发基于互联网的项目
 软件架构
 	1. C/S:Client/Server 客户端/服务器端
	 	在用户本地有一个客户端程序 ，在远程有一个服务器端程序 
 		优点：1.用户体验好
 		缺点：1.安装，开发，维护，部署麻烦
 	2. B/S:Browser/Server 浏览器/服务器    
 		只需要一个浏览器，用户通过不同的网址（url），客户访问不同的服务器端程序 
 		优点：1.开发，安装，部署，维护简单
 		缺点：1.如果应用过大，用户的体验可能会受到影响
 		2.对硬件要求过高
 	B/S架构详解
 		资源分类：
 			1.静态资源：
 				使用静态网页开发技术发布的资源
 				特点：所有用户访问，得到的结果是一样的。如：文本，图片，音频，视频，HTML,CSS,JavaScript。如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
 			2.动态资源：
 				使用动态网页及时发布的资源
 				特点:所有用户访问，得到的结果可能不一样。如：Jsp/servlet,php,asp...    如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
 		我们要学习动态资源，必须先学习静态资源！
 		静态资源：
 			HTML:用于搭建基础网页，展示页面的内容
 			CSS:用于美化页面，布局页面
 			JavaScript:控制页面的元素，让页面有一些动态的效果

HTML

1.概念：是最基础的网页开发语言
Hyper Test Markup Language 超文本标记语言

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

标记语言:由标签构成的语言。<标签名称>如 html,xml

标记语言不是编程语言。
2.快速入门
语法：
1.html文档后缀名 .html 或者 .htm
2.标签分为：
围堵标签：有开始标签和结束标签。如
自闭合标签：开始标签和结束标签在一起。如

3.标签可以嵌套：需要正确嵌套，不能你中有我，我中有你
错误例子：

<a><b></a></b>

正确例子：

<a><b></b></a>

4.在标签中可以定义属性，属性是由键值对构成，值需要用引号(单双引都可)引起来。
5.html的标签不区分大小写，但是建议小写。
代码：

<html>

	<head>
	
		<title>this is a title</title>
		
	</head>

	<body>
		<font color = 'red'>Hello World</font><br/>
		<font color = 'green'>Hello World</font>
	</body>
</html>

3.标签学习
文件标签：构成html最基本的标签

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
HelloWorld
</body>
</html>
<!--
	html:html文档的根标签。
	head:头标签。用于指定html文档的一些属性。引入外部的资源。
	title:标题标签。
	body:体标签。
	<!DOCTYPE>：html中定义该文档是html文档
	
-->

文本标签：和文本有关的标签

	<!-- 注释内容 -->
	<h1> to <h6><!--  标题标签   h1~h6字体大小逐渐递减 -->
	<p><!-- 段落标签  -->
	<br><!--  换行标签 -->
	<hr><!--  展示一条水平线  属性：color(颜色),width(宽度),size(高度)，align(对齐方式 center,left,right)-->
	<b><!--  字体加粗 -->
	<i><!-- 字体斜体 -->
	<font><!-- 字体标签 属性：color(颜色),size(大小),face(字体)-->
	<center><!-- 文本居中 -->
	<!-- 属性定义: 
	属性定义：
	color:
 		1. 英文单词：red,green,blue
 		2. rgb(value1,value2,value3):value 范围:0~255 如 rgb(0,0,255)
 		3. #value1value2value3:00~FF 如：#FF00FF
 		4. 
	width:
		1. 数值：width='20' , 数值的单位，默认是px（像素）
		2. 数值%：占比相对于父元素的比例
-->

 <font color="FF00FF" size="16" face="楷体">颜色展示</font>

3.图片标签：

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!-- img 图片标签 -->
    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
    <!-- 相对路径
        以.开始的路径
            ./:代表当前目录    ./image/jingxuan_2.jpg
            ../:代表上级一目录-->
    <img src="./image/jiangxuan_1.jpg"/>
</body>
</html>

4.列表标签：
有序列表：

<ol>
	<li>xxx</li>
</ol>

无序列表

<ul>
	<li>xxx</li>
</ul>

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--    有序列表 ol-->
    早上起床干的事情
    <ol type="A" start="5"><!-- type:序号类型  start:序号起始 -->
        <li>睁眼</li>
        <li>看手机</li>
        <li>穿衣服</li>
        <li>洗漱</li>
    </ol>
<!--    无序列表 ul-->
早上起床干的事情
<ul >
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
早上起床干的事情
<ul type="circle">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
早上起床干的事情
<ul type="square">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>
</body>
</html>

5.链接标签：

<a></a>

<!-- 定义一个超链接
	属性
	href:指定访问资源的url(统一资源定位符)
	target:指定打开资源的方式
		_self:默认值，在当前页面打开
		_blank:在空白页面打开
-->

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<!--    超链接 a-->
    <a href="http://www.baidu.com">点我</a>
    <br>
    <a href="http://www.baidu.com" target="_self">点我</a>
    <a href="http://www.baidu.com" target="_blank">点我</a>
    <br>

    <a href="./5_列表标签.html">列表标签</a>
    <a href="mailto:xxxxxxx@XXXX.XX">联系我们</a>

    <br>
    <a href="http://www.baidu.com"><img src="image/jiangxuan_1.jpg"/></a>
</body>
</html>

6.div和span(块标签):

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>块标签</title>
</head>
<body>
<!--
    div:每一个div占满一整行。块级标签
    span:文本信息在一行展示，行内标签 内联标签

    -->
    <span>XXXXX</span>
    <span>XX</span>
    <br>
    <div>XXXXXX</div>
    <div>XX</div>
</body>
</html>

7.语义标签:
html5中为了提高程序的可读性，提供了一些标签

<header></header><!-- 页眉 -->
<footer></footer><!-- 页脚 -->

8.表格标签：

<table></table><!-- 定义表格 
	width:宽度
	border:边框
	cellpadding:定义内容和单元格的距离。
	cellspacing:定义单元格之间的距离。如果指定为0，则单元格的线会合为一条。
	bgcolor:背景色。
	align:对齐方式
-->
<tr></tr><!-- 定义行 
	bgcolor:背景色
	align:对齐方式
-->
<td></td><!-- 定义单元格 
	colspan:合并列
	rowspan:合并行
-->
<th></th><!-- 定义表头单元格
-->
<caption><!-- 表格标题 -->
<thead></thead><!-- 表示表格的头部分 -->
<tbody></tbody><!-- 表示表格的体部分 -->
<tfoot></tfoot><!-- 表示表格的脚部分 -->

花如锦X-D

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb——HTML课堂笔记

HTML课堂笔记web概念概述HTMLweb概念概述JavaWeb: 使用Java语言开发基于互联网的项目软件架构 1. C/S:Client/Server 客户端/服务器端在用户本地有一个客户端程序，在远程有一个服务器端程序优点：1.用户体验好缺点：1.安装，开发，维护，部署麻烦 2. B/S:Browser/Server 浏览器/服务器只需要一个浏览器，用户通过不同的网址（url），客户访问不同的服务器端程序优点：1.开发，安装，
复制链接

扫一扫

专栏目录