JavaWeb之HTML与CSS基础学习与总结

最新推荐文章于 2024-04-04 12:25:24 发布

CRUD_CODER_LIN

最新推荐文章于 2024-04-04 12:25:24 发布

阅读量447

点赞数

分类专栏： JavaSE&JavaWeb

本文链接：https://blog.csdn.net/LINHONG_1994/article/details/98884497

版权

JavaSE&JavaWeb 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

笔记大纲

网页的组成
HTML简介
HTMT文件结构
HTMT标签语法
HTMT常用标签
HTML中的表格和表单
CSS的简单样式

1.网页的组成

业界认为“HTMT是名词，CSS是形容词、JS是动词”,我觉得非常形象，日常拿图：

在这里插入图片描述

HTML【结构】:是网页内容的载体。如：网页信息包括了文字、图片等。

CSS:【表现】即是样式，是网页内容的表现。<美化、装修>如：网页指定什么背景颜色，表框大小是多少。

JavaScript、jQuery【行为】：是实现网页上的特效效果。如：图片的轮换（动图），进行交互操作。
一个良好的网页具备结构、表现、行为解耦。

2.HTML简介

①HTML是网页语言；

②HTML是超文本标记语言（Hyper Text Markup Lanuage）;

③HTML不是编程语言，只是一种标记语言（标记标签：用来描述网页）。

说明： HTML编写就直接用浏览器运行，不需要编译,各大浏览器都有内置的html引擎。

3.HTMT文件结构

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!--这是我的第一个html页面！-->
<body>
	这是我的第一个html页面！
</body>
</html>

说明：

A.在HTM页面中，<html></html>是根标签，即所有的HTML标签都在其中；

B.在HTM页面中，<head>标签用于定义文档的头部，相当于一个容器,容器中常见头部元素有<title>、<script>、<style>、<link>、<meta>等；

C.在HTM页面中，<body></body>标签间的内容是网页的主要内容,比如<h1>、<p>、<a>、<img>等；

D.在HTM页面中,<!-- -->即为注释。

4.HTMT标签语法

A.标签由英文尖括号"<>"表示，如：<html>;

B.HTML的标签一般都是成对出现的，分为开始、结束标签。结束标签比开始标签多一个反斜杠“/”。如：<body></body>；

C.HTML的标签分为两类,一类是成对标签，一类是自结束标签，如换行标签：<br/>

D.HTML的标签不区分大小写，通过浏览器引擎解析后的html代码，均为小写。

说明：  F12 /F12+FN键 在浏览器页面进行控制台，可以查看网页的一些请求与响应的参数， 作为开发人员常关注的三个参数是：Elements:浏览器解析后的源码  、 Soures源码    、NetWork监听  。
浏览器一般选择谷歌和火狐，利器必备系列！</font>

E.标签间可以嵌套，但是顺序必须保持一致，如果交叉嵌套，不会报错，浏览器引擎自动补全代码（浏览器有一定的容错能力）
如：<div><p>关注博客：https://coding0110lin.blog.csdn.net/</p></div>

注意：注释不能嵌套！

F.标签要正确关闭，如没正确关闭，浏览器引擎自动补全代码 。
G.属性一定要有值，但是值必须要有引号 。

5.HTMT常用标签

[1]标题标签

 <h1 >...</h1> <h2 >...</h2> <h13>...</h3> <h4 >...</h4> <h5 >...</h5><h6>...</h6>

特点：字体加粗、字号大小从h1到h6递减, 自带换两行的效果。

[2]换行标签（常用两种）

<br/>

[3]div标签

<div>...</div>

特点： div标签无实际语义，主要作用是为了分区与布局,类似一个容器,自带换行效果

[4]转义字符

以“&”开始，以";"结束 普通空格&nbsp;字符空格&emsp; 大于号:&gt;小于号：&lt;版权号：&copy;

[5]段落标签

 <p>...</p>

表示段落，默认换2行

[6]无序列表

<ul><li>....</li></ul>   type:disc(实心圆)、circle(空心圆)、square(实心圆)

自带换行效果

[7]有序列表

<ol><li>....</oi></ul>  A | a | i | I |1

[8]图片标签

<img alt="" src="" title="">

A.src:.引入图片的路径
B.alt:引入图片有误时的提示文本信息
C. title:鼠标移入（悬停）时的提示文本
不自带换行效果！
【路径问题】说明：看目标文件与当前文件的位置关系，当前文件与目标文件在同一个包下，此时直接引用当前文件与目标文件不在同一个包下，先找目标文件的父包，再找目标文件。使用 “…/“返回上一个目录(n个，依情况而定)。如src=”…/img/coding0110lin.jpg”。

[9]超链接

<a href="" target="">

语法：使用a标签制作链接, href:链接的路径, target: 目标链接以何种方式打开:
A._self：以当前选项卡（页面）打开
B._blank：以新的的选项卡（页面）打开

作用：链接到目标路径

6.HTML中的表格和表单

⑴表格：

A.使用<table></table>制作表格

B.使用tr制作行

C.使用th(表头)|td制作单元格

自带换行效果！

说明：跨行rowspan、跨列colspan、border边框、width宽、height高、align水平对齐 。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格示例</title>
</head>
<body align="center">
	<h1>四行五列的表格</h1>
	<table border="1" width="300px" height="300px" align="center">
	<tr align="center">
	    <td>11</td>
		<td rowspan="2">12,22</td>
		<td>13</td>
		<td>14</td>
		<td>15</td>
	
	</tr>
	<tr align="center">
	    <td>21</td>
		<!-- <td>22</td> -->
		<td>23</td>
		<td>24</td>
		<td>25</td>
	</tr>
	<tr align="center">
		<td>31</td>
		<td colspan="2">32,33</td>
	<!-- 	<td>33</td> -->
		<td>34</td>
		<td>35</td>
	</tr>
	<tr align="center">
		<td>41</td>
		<td>42</td>
		<td>43</td>
		<td>44</td>
		<td>45</td>
	</tr>
	</table>
</body>
</html>

输出效果：
在这里插入图片描述
⑵表单

A.使用<form></form>制作表格

B.使用input标签制作表单项

  [1]type：表单项的类型：
  
  text、password、radio、checkbox、reset、submit、file（文件域）、hidden(隐藏域)

  [2]name：表单项名称，如果需要将表单项提交到目标路径【get提交方式的地址上】，必须使用name属性

  [3]value：设置表单项值,对于【按钮】alue属性作用即是显示的文本
  
  [4]checked:设置单选框&复选框【默认选中】的状态

  [5]selected：设置下拉框选中的默认状态

C.使用select option标签制作表单项<select><option></option></select>

D.表单的属性：

  [1]action:提交表单、目标路径（进行页面等跳转）

  [2]method:提交方式  ，get(默认)：相对不安全，post:相对安全

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单示例</title>
</head>
<body>
<h4>博客：https://coding0110lin.blog.csdn.net/</h4>
	<form action="success.html" method="post">
	用户名：<input type="text" name="username"><br/><br/>
	密&emsp;码：<input type="password" name="password"/><br/><br/>
	性&emsp;别：<input type="radio" name="gender" value="man" checked="checked">男
	          <input type="radio" name="gender" value="women">女<br/><br/>
	爱&emsp;好：<input type="checkbox" name="hobby" value="Program" checked="checked"/> 编程
	         <input type="checkbox" name="hobby" value="reading" checked="checked"/> 读书
	         <input type="checkbox" name="hobby" value="travel" checked="checked"/> 旅游
	         <br/>
	         <br/>        
	技&emsp;能:<select name="skill">
				<option value="Java">Java</option>
				<option value="MySQL">MySQL</option>
				<option value="Linux">Linux</option>
				</select>
				<br/>
				<br/>
			<input type="reset" value="重置">
			<input type="submit" value="提交"/>
		
	</form>
</body>
</html>

输出效果：
在这里插入图片描述
代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<body>
<div align="center">
	<h2>登录界面</h2>
	<form action="success.html" >
	<table>
		<tr>
			<td>用户名:</td>
			<td><input type="text" name="username" value="lindaxia"></td>
			
		</tr>
		<tr>
			<td>密&emsp;码:</td>
			<td><input type="password" name="password" value="20190808"></td>
		</tr>
		<tr align="center">
			<td colspan="2">
				<input type="reset" value="重置">&emsp;&emsp;
				<input type="submit" value="登录">
			</td>
		</tr>
	</table>
	</form>
</div>
</body>
</html>

输出效果：
在这里插入图片描述

7.CSS的简单样式

CSS简称：层叠样式表（Cascading Style Sheets）,作用是美化页面。

(1)CSS基本语法

选择符（选择器）以及声明

p{属性：属性值;属性2：属性值2；}   属性间用分号隔开！

(2)常见的CSS选择器

①标签选择器
如：p{}、h2{}、div{}

p{属性：属性值;属性2：属性值2；}

②类选择器

定义：.类名{属性：属性值;属性2：属性值2；}

调用： <p class="类名">http://coding0110lin.blog.csdn.net</p>

③ID选择器

定义：#id名{属性：属性值;属性2：属性值2；}

调用： <p id ="id调用">http://coding0110lin.blog.csdn.net</p>

优先级：ID选择器>类选择器>标签选择器

☛CSS嵌入方式

A.行内样式表：书写在style属性中    如：<p style="0000FF;"></P>

B.内部样式表：书写在<style>标签中

	如：<style>
	    div{color="0000ff;"}
	  </style>
	  
	  <div></div>

C.外部样式表：书写xxx.css文件中

   引入外部样式表：<link href=-"样式路径" rel="stylesheet"> <!--stylesheet是引入关系-->

优先级：行内>内部>外部（就近原则）

代码示例：
CSS选择器测试html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS选择器测试</title>
<style type="text/css"> <!--内部样式表 -->

</style>
<link href="test.css" rel="stylesheet"> <!--外部样式表 -->
</head>
<body>
<div align="center">
	<h2>你知道吗？</h2>
	<p class="test_color">表白-520</p>
	<p>自从那次不经意间把你导入我的心。</p>
	<p id="font_size">就从此再也无法导出了。</p>
	<p>真的希望从此你便是我私有的。</p>
	<p>别人无论如何也无法访问你的心。</p>
	<p>不过你放心，我会精心的保护它。</p>
	<p>我能抽象出整个世界。</p>
	<!--行内样式表  优先级：行内>内部>外部（就近原则） -->
	<p style="color:green;" class="test_color">但是我不能抽象你。</p> 
	<p class="test_color">因为你在我心中是那么的具体。</p>
</div>
</body>
</html>

样式css文件

@charset "UTF-8";
.test_color{color:red}<!--类选择器 调用： <p class="类名"></p>-->
#font_size{<!--id选择器 调用： <p id ="id调用"></p>-->
	font-size: 24px;
}

输出效果：
在这里插入图片描述
(3)CSS颜色

可用以下方法来规定 CSS 中的颜色：(常用十六进制色和RGB颜色)
十六进制色
RGB 颜色
RGBA 颜色
HSL 颜色
HSLA 颜色
预定义/跨浏览器颜色名

文档参考：
在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS中的颜色</title>
<style type="text/css">
	p{
		color:rgb(0,255,0);<!-- 标签选择器   绿 -->
	}
	.fontcolor{
		color:rgb(255,0,0); <!--类选择器    红 -->
	}
	#font_color{
		color:rgb(0,0,255);<!--ID选择器   蓝-->
	}
</style>
</head>
<body>
	<!-- 输出结果是 蓝色的“光学三原色”字体，ID选择器优先级高-->
	<p  id="font_color" class="f_c">(RGB)光学三原色</p>
</body>
</html>

☝上述分享来源个人总结，如果分享对您有帮忙，希望您积极转载；如果您有不同的见解，希望您积极留言，让我们一起探讨，您的鼓励将是我前进道路上一份助力，非常感谢！我会不定时更新相关技术动态，同时我也会不断完善自己，提升技术，希望与君同成长同进步！

☞本人博客：https://coding0110lin.blog.csdn.net/ 欢迎转载，一起技术交流吧！

CRUD_CODER_LIN

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之HTML与CSS基础学习与总结

对于一名合格Java开发工程师来说，我们不仅要扎实后端技术，而且还要学习与掌握前端的基础知识，这样在工作开发中，我们才能更好的配合前端人员迅速完成开发任务（解决Bug效率高），这也是我们走向全栈、架构师的必备技能，所以从基础做起、从总结做起，基础学习打卡走起来！1.网页的组成业界认为“HTMT是名词，CSS是形容词、JS是动词”,我觉得非常形象，日常拿图： HTML:是网页内容的...
复制链接

扫一扫

专栏目录