MOKE_XR
MOKE_XR

JavaWeb学习笔记之HTML&CSS

文章目录

  • HTML
      • html的规范：
      • html的操作思想：
      • html中常用的标签
      • 其他常用标签
      • html的头标签的使用
      • 框架标签
  • CSS
      • CSS和html的四种结合方式
      • CSS的选择器
      • CSS的盒子模型
      • CSS的布局

相关知识： https://blog.csdn.net/mokexfdgh/article/category/8092196

HTML

html：HyperText Markup Language->超文本标记语言->网页语言
超文本->超出文本的范畴，可以对文本实现更多的操作
标记->html所有的操作都是通过标记实现，标记就是标签，<标签名称>
例如：

	<font size="S" color="red">这是我的第一个html程序!font>

html的规范：

	<html>
		<head>
			<title>这是一个标题title>
		head>
		<body>
			<font size="S" color="red">这是我的第一个html程序!font> <br/>
			<hr/>
		body>
	html>

 (1)一个html文件具备开始的标签和结束的标签…
 (2)html包含两部分内容

	<head>设置相关信息head>  
	<body>显示在页面上的内容都写在body里面body>

 (3)html的标签有开始标签，也要有结束标签

	<head>head>

 (4)html的代码不区分大小写
 (5)有的标签，没有结束标签

	换行：<br/>   分割线：<hr/>

html的操作思想：

网页中有很多数据，不用的而数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据封装起来。通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以容器内数据样式的变化

html中常用的标签

1.文字标签和注释标签
文字标签：修改文字样式

	<font>font>

 属性：
 size->文字的大小，取值范围1-7，超过7还是7
 color->文字的颜色，两种表示方式：英文单词，red,green,blue,black,white,yellow/十六进制数表示，RGB

注释标签：

2.标题标签，水平线标签和特殊字符
标题标签：

	<h1>h1> <h2>h2> <h3>h3>...<h6>h6>

水平线标签

	<hr size="S" color="bule"/>

特殊字符（转义）

	< : <
	> : >
	  ： 
	& : &

3.列表标签

	<dl>
		<dt> 上层内容 dt>
		<dd> 下层内容 dd>
		<dd> 下层内容 dd>
	dl>

显示效果如下：
 上层内容
   下层内容
   下层内容

有序列表

	<ol>
		<li> 内容1 li>
		<li> 内容2 li>
		<li> 内容3 li>
	ol>

显示效果如下：
1.内容1
2.内容2
3.内容3

无序列表

	<ul type="disc">
		<li> 内容1 li>
		<li> 内容2 li>
	<ul>

显示效果如下：
·内容1
·内容2

4.图像标签

	<img src="图片的路径" width="宽度" height="长度" alt="图片上的文字"/>

补：路径
绝对路径：**
相对路径（三种情况）：
 图片在同一路径下，直接用过名称使用：“name.jpg”
 图片在html的下层目录（img文件夹中）：“img\name.jpg”
 图片在html的上层层目录（img文件夹中）："…/name.jpg"

5.超链接标签
链接资源

	<a href="链接到资源的路径"> 显示在页面上的内容 a>

定位资源

	
	<a name="top"> 顶部 a>
	
	<a href="#top"> 回到顶部 a>

原样输出标签:



6.表格标签:可以对数据进行格式化,使数据显示更加清晰


	<table border="1" bordercolor="blue" cellspacing="0" whidth="200" height="150"> 
		
		<caption> 表格的标题 caption>
		<tr align="center">
			<td> td> 
			<td> td>
			<td> td>
		tr>
		<tr>
			<th> th> 
			<th> th>
			<th> th>
		tr>
	table>



上面表示为两行,每行三个单元格的表格
 合并单元格:跨行合并(rowspan)/跨列合并(colspan)


	<td rowspan="3"> td>
	<td colspan="3"> td>
	



7.表单标签:将数据提交到服务器


	<form action="out.html" method="post"> 
	
		
		<input type="text" name="phone"/><br/> 
		<input type="radio" name="sex" value="female" checked="checked"/>女 <input type="radio" name="sex" value="male"/>男<br/> 
		<input type="submit" value="注册"/><br/>
		<input type="image" src="图片路径"/>
		
		
		<select name="birth">
			<option value="0">请选择option>
			<option value="1997" selected="selected">1997option> 
			<option value="1998">1998option>
		select>
		
		<textaread cols="20" rows="5">textaread>
	form>



其他常用标签


字体加粗：
 下划线：
 斜体：
 删除线：
 原样输出：

 段落标签：
//比br标签多空一行
 下标：
 上标：
 自动换行：

 在一行显示：


html的头标签的使用


title：浏览器标签页上显示的内容
 meta：提供有关页面的基本信息


	
	<meta http-equiv="refresh" content="3;ur1=01-hello.html" />



base：设置超链接的基本设置


	
	<base target="_blank" />



link：引入外部文件（CSS）


框架标签



 属性：rows->按照行进行划分   cols：按照列进行划分


	<frameset rows="80,*">
	<frameset cols="80,*">




 引入具体显示的页面


	<frame name="lower_left" src="b.html">



注：使用框架标签时，不能写在body里，且需要把body去掉


	<frameset rows="80,*">//把页面划分成上下两部分
		<frame name="top" src="a.html">上面页面
		<frameset cols="150,*">//把下面部分再划分长左右两部分
			<frame name="lower_left" src="b.html">//左页面
			<frame name="lower_right" src="c.html">//右页面
		frameset>
	frameset>



实现点击左页面的超链接后，使其在右页面显示，则需在b.html设置超链接属性target=“lower_right”




CSS


CSS：层叠样式表用来定义网页的显示效果（解决html代码对样式定义的重复）
 将网页内容和显示样式进行分离，提高了显示功能


CSS和html的四种结合方式


1.每个html标签上都有一个style属性


	<div style="background-color:red;color:green;">这是演示语句div>



2.使用html的