java基础加强—HTML&CSS

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

范晓萱123

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

阅读量1k

点赞数

分类专栏： java学习学习日记文章标签： html java input class css

本文链接：https://blog.csdn.net/fanxiaoxuan1234/article/details/8016405

版权

学习日记同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

java学习

14 篇文章 1 订阅

订阅专栏

Html内容

1.特点：1.Html是超文本标记语言的简写，是最基础的网页组成；
2.Html是通过标签来定义的语言，代码都是有标签组成的；
3.不区分大小写；
4.代码由<html>开始</html>结束，里面由头部分<head></head>和体部分<body></body>两部分组成。
常用标签：
<hr/>:分割线，可进行内部闭合；
<br/>:换行(没有分隔线),即回车符；

注意：html中的值可以用"",''和不带符号修饰都可以，但""中能嵌套'';一般都用"".

2.html操作思想：提供标签，封转数据。
3.字体标签：<font>
常用属性：color,size
实例：<font color="red" size="3">内容</font>
注意：颜色单词不易记住，可以用16进制表示，2位表示一种颜色，如"#FF0000"，用#标示以免被解析为单词。
#FF0000——Red #00FF00——Green #0000FF——Blue
#FFFF00——Yellow #FFFFFF——White #000000——Black
#aa77cc——紫色

4.标题标签：<h1>一级标题，字号放大并加粗</h1>
<h2>二级标题</h2>
5.特殊字符：
<—— < >—— >&—— &
"—— “®—— ®©—— ©
™—— ™ —— 空格
如：内容中带 空格,结果效果为：内容中带空格。
6.列表标签：<dl>
<dt></dt>上层项目 <dd></dd>下层项目

示例：选择科目有：
物理
化学
生物

			<dl>
				<dt>选择科目有：</dt>
					<dd>物理</dd>
					<dd>化学</dd>
					<dd>生物</dd>
			</dl>

7.项目编号：
无序编号：<ul></ul>
示例：<ul type="square">
<li>无序一</li>
<li>无序二</li>
</ul>
有序编号：<ol></ol>
示例：<ol type="A">
<li>有序一</li>
<li>有序二</li>
</ol>
注意：1.<dd>,<ul>,<ol>这些标签封装的数据都会自动缩进；
2.html中的注释标签为.

8.图像标签<img/>,内部闭合
<img scr="1.jpg" align="middle" height="300px" width="500px" alt="内容"/>
<img scr="imgs\\1.jpg"/>
属性：align是排列方式；alt是图片说明文字；border是边框。

9.表格<table>:
组成：标题标签：<caption>，给表格提供标题。
表头标签：<th>，一般对表格的第一行或者第一列进行格式化，就是粗体显示。并不常用。
行标签：<tr>
单元格标签：<td>，加载行标签的里面。可以简单理解为，先有行，在行中在加入单元格。
示例：

		<!--表格中无论是否定义tbody标签，默认都有该标签。-->
			<table border="1" bordercolor="#1c9ae6" width=600px>
				<!--定义第一行-->
				<tr>
					<!--定义单元格-->
					<th rowspan="2">单元格一</th>
					<th>单元格二</th>
				</tr>  						
					<!--定义第二行-->
				<tr>
					<!--定义单元格-->
					<td>单元格三</td>
					<!--td>单元格四</td--> 						
				</tr>
						
			</table>

效果：

注意：其实table的下一级标签是<TBODY>，无论是否定义，都是默认存在的。

10.超链接<a>
两种用法：
1.超链接<a href=””>
例：
<a href=”http://www.sina.com.cn” target=”_blank”>新浪</a>

2.定位标记<a name=””>
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注：定位标记要和超链接结合使用才有效。
例：
<a name=”标记”>标记位置</a>
<p>…….
<a href=”#标记”>返回标记位置</a>
注：使用定位标记时一定在href值的开始加入#标记名。

11.框架标签：<frameset>
注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。
例：

		<frameset rows="10%,*">
	  		<frame src="1.html" name="top" />
	  		<frameset cols="30%,*">
	  			<frame src="2.html" name="left" />
	  			<frame src="3.html" name="right" />
			</frameset>
		 </frameset>

这段代码会需要已经存在的3个html页面，分别是：1.html,2,html,3.html
效果：

注：当框架大小不想被鼠标拖动而改变，可以在frame标签中加入noresize属性，这个属性没有属性值，称为标记属性，加上就为固定。在XHTML的规范中，所有的属性都要有属性值，那么标记属性的属性值就是自身，如：noresize=”noresize”

12.画中画标签：<iframe>
<iframe src="1_link.html">这是iframe标签</iframe>

注意：若将iframe的高宽设置为0，则不能再页面上显示；这样就可能被利用，利用一些垃圾资源而用户却什么都不知道。
13.表单标签：<form> ,可进行服务端的交互。
<input>输入标签：接受用户输入信息
其中的type属性指定输入标签的类型。
文本框 text。输入的文本信息直接显示在框中。
密码框 password。输入的文本以原点或者星号的形式显示。
单选框 radio 如：性别选择。
复选框 checkbox 如：兴趣选择。
隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。
提交按钮 submit 用于提交表单中的内容。
重置按钮 reset 将表单中填写的内容设置为初始值。
按钮 button 可以为其自定义事件。
文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。
图像 image 它可以替代submit按钮。
<select>：选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。
<option>：子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。
<textarea>：多行文本框。如：个人信息描述。
<label>：用于给各元素定义快捷键。
for 属性：指定快捷键作用的表单元素。必须与要作用的表单元素的id值相同。
accesskey 属性：指定快捷键，此快捷键需要和alt键组合使用。
示例：

				<form>
					用户名称：<input type="text" name="user" value="haha" /><br/>
					输入密码：<input type="password" name="psw" /><br/>
					选择性别：<input type="radio" name="sex" value="nan" />男
						<input type="radio" name="sex" checked="checked" value="nv" />女<br/>
					喜欢技术：
						<input type="checkbox" name="tech" value="java" />JAVA
						<input type="checkbox"  name="tech" value="html" />HTML
						<input type="checkbox" name="tech" value="css"  />CSS<br/>
								
					选择文件：<input type="file" /><br/>
						<!--不需要客户端知道，但是要给服务端使用的数据，就定义在隐藏框中。-->
					隐藏组件：<input type="hidden" name="version" value="3.9"/><br/>
					
					有个按钮：<input type="button" value="有个按钮" οnclick="alert('有个按钮被弹出')" /><br/>
						
					一个图片：<input type="image" src="1.jpg"/><br/>
						
					选择国家：
						<select name="country" multiple="5">
							<option value="none">--选择国家--</option>
							<option value="cn" selected="selected">中国</option>
							<option value="usa">美国</option>
							<option value="en">英国</option>
						</select>
						
						<br/>
							
					个人留言：
						<textarea name="msg"></textarea>						 				
						<input type="submit" value="提交数据"><input type="reset" value="清除数据"/> 						
				</form>

效果：

表单提交：
1．先定义form表单中的action属性值，指定表单数据提交的目的地(服务端)。
2．明确提交方式，通过指定method属性值。如果不定义，那么method的值默认是get。

get和post这两种最常用的提交方式的区别：
1．get提交将数据显示在地址栏，对于敏感信息不安全。
post提交不显示在地址栏，对于敏感信息安全
2．地址栏中存放的数据是有限，所以get方式对提交的数据体积有限制。
post可以提交大体积数据。
3．对提交数据的封装方式不同：
get：将提交数据封装到了http消息头的第一行，请求行中。
post：将提交的数据封装到消息头后，在请求数据体中。
注意：通常表单使用post提交，因为编码方便。
对于Tomcat服务器端，默认的解码方式是ISO8859-1,那么中文会出现乱码。
通过post提交，可以使用request.setCharacterEncoding(“GBK”);来解决乱码问题，该方法只对数据体有效。
如果是get提交，request.setCharacterEncoding(“GBK”)该方法对乱码解决不了，必须先进行ISO8859-1编码，然后在进行GBK的解码。这种方式虽然对post提交的乱码也通用，但是麻烦。所以建立表单提交使用post。

12.其他标签
<b>: 加粗
<i>:斜体
<u>：下划线
<sub>：下标
<sup> ：上标
<marquee behavior="alternate" direction="left">内容</marquee>
效果：从右开始，左右来回移动
behavior的属性值：scroll alternate slide
<div>:封转数据，没有任何效果，其后默认带换行符，即封装正行数据；
<span>:封转一行中的一部分数据，没有换行符；

<p>:段落标签，前后都有空行。

CSS内容
1.CSS:Cascading Style Sheets，层叠样式表，用来定义网页的实现效果，可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性。
2.CSS和HTML的结合的方式：
1.style属性：利用标签中style属性来改变每个标签的显示样式。
例：
<p style="background-color:#FF0000; color:#FFFFFF">
p标签段落内容。
</p>

该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。

2.style标签方式：（内嵌方式）
在head标签中加入style标签，对多个标签进行统一修改。

			<head>
				<style type=”text/css”>
				p { color:#FF0000;}
				</style>
			</head>

该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。

3.导入方式：
前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
例：

			<style type="text/css">
				@import url(css_3.css);
				div { color:#FF0000;}
			</style>

注：url括号后面必须要用分号结束。如果导入进来的样式与本页面定义的样式重复，以本页定义样式为准。

4.链接方式：
通过head标签中link标签来实现，前提也是先要有一个已定好的CSS文件。
例：
<link rel="stylesheet" type="text/css" href="css_3.css" media="screen" />

注：可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

3.样式优先级：
由上到下，由外到内。优先级由低到高。

4.总结CSS代码格式
选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用分号隔开
属性与属性值直接按用冒号连接
如果一个属性有多个值的话，那么多个值用空格隔开。

5.选择器：
就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器共有三种：
a)html标签名选择器。使用的就是html的标签名。
b)class选择器。其实使用的标签中的class属性。
c)id选择器。其实使用的是标签的中的id属性。
每一个标签都定义了class属性和id属性。用于对标签进行标识，方便对标签进行操作。
在定义的中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript中经常用。

6.class选择器：
在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置。
例：
相同标签设置不同样式的时候，用class进行区分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p>
<p class=”pclass_2”>P标签样式</p>

不同标签进行相同设置的时候，用class进行统一定义。
.classname {color:#00FF00;}
<p class=”classname”>P标签样式</p>

<div class=”classname”>DIV标签样式</div>

7.id选择器：
与class选择器类似，但格式不同，选择器的名称为：#id值。
例：
#pid { color:#0000FF;}
<p id=”pid”>P标签样式</p>
注：多个标签同样可以定义相同的id值，但是对于JavaScript对标签元素的获取就会出错。所以形成习惯，确保id值的唯一性对于以后的数据库设计也很有好处。

8.扩展选择器：
a)关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
例：
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>
b)组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注：多个不同选择器要用逗号分隔开。
c)伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态（未点击）。
a:active 点击超链接时的状态。
使用顺序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。

:focus 具有焦点的元素。IE6浏览器不支持，在FireFox中可以看到效果。

范晓萱123

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
java基础加强—HTML&CSS

---------- android培训、java培训、期待与您交流！ ----------Html内容1.特点：1.Html是超文本标记语言的简写，是最基础的网页组成； 2.Html是通过标签来定义的语言，代码都是有标签组成的； 3.不区分大小写； 4.代码由开始结束，里面由头部分和体部分两部分组成。常用标签：:分割线，可进行内部闭合；:换行(没有分
复制链接

扫一扫