javaweb之前端html学习笔记

最新推荐文章于 2021-06-10 12:33:18 发布

mocas_wang

最新推荐文章于 2021-06-10 12:33:18 发布

阅读量284

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/mocas_wang/article/details/105661809

版权

javaWeb 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

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

html中常用的标签

1.文字标签和注释标签

文字标签：修改文字样式

<font></font>

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

注释标签：按ctrl+/或者ctrl+shift+/可以快速注释

	<!--这是一个注释-->

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

标题标签

<h1></h1> <h2></h2> <h3></h3>...<h6></h6>
<!--  从h1到h6，大小依次变小，同时会自动换行 -->

水平线标签

<hr size="S" color="bule"/>
<!--  属性：size:1-7  color:颜色 -->

特殊字符（转义）

	< : &lt;
	> : &gt;
    （空格）：&nbsp;
	& : &amp;

3.列表标签

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

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

有序列表

<ol>
	<li> 内容1 </li>
	<li> 内容2 </li>
	<li> 内容3 </li>
</ol>
<!-- 属性 type：设置排列方式，1(默认数字) a i -->

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

无序列表

<ul type="disc">
	<li> 内容1 </li>
	<li> 内容2 </li>
<ul>
<!-- 属性 type：设置特殊符号，空心圆circle，实心源disc(默认)，实心方块square -->

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

4.图像标签

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

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

5.超链接标签

链接资源

<a href="链接到资源的路径"> 显示在页面上的内容 </a>
<!-- 
	属性：href:路径，target:设置打开方式（_blank:在一个新窗口打开，_self:在当前页打开 默认）
	当超链接不需要到任何地址时,href设置为"#",为空会跳出文件选择框
-->

定位资源

<!-- 定义一个位置 -->
<a name="top"> 顶部 </a>
<!-- 回到这个位置 -->
<a href="#top"> 回到顶部 </a>

原样输出标签:<pre></pre>

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

<table border="1" bordercolor="blue" cellspacing="0" whidth="200" height="150"> 
<!-- 
		属性: border-表格线粗细 bordercolor-表格线颜色 cellspacing-单元格之间的距离
		      width-表格的宽度 height-表格的高度
-->
<caption> 表格的标题 </caption>
    <tr align="center"><!-- 表示一行,属性: align-对齐方式(left center right) -->
		<td> </td> <!-- td表示单元格 -->
		<td> </td>
		<td> </td>
    </tr>
    <tr>
		<th> </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"> 
<!-- form属性
	action:提交到的out.html地址,默认提交到当前页面的地址栏，具体地址要加项目名
	method:表单提交方式,常用方式-get和post,默认是get
	  get:请求提交地址栏会携带提交的数据(不安全,且数据大小有限制)
	  post:不会携带提交的数据,而是存在*请求体??*里(数据大小没有限制)
	enctype:做文件上传时才需要设置这个属性,详见后文
-->
<!-- 输入项:输入内容或选择内容,必须有name属性 -->
	<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="图片路径"/>
<!-- 
		input输入项的type属性
		text:普通输入项
		password:密码输入项
		radio:单选输入项(里面需要属性name,属性值必须要相同,还有value值,checked="checked"默认选择)
		checkbox:复选输入项(可以多选)(里面需要属性name,属性值必须要相同,还有value值)
		file:文件输入项(可以实现文件上传)
		hidden:隐藏项
		submit:提交按钮//当在各种输入项写入内容并提交后,数据会以键值对(name=输入的值)提交到action的地址
		image:按钮变为图片来进行提交(需要设置图片路径src)
		reset:重置按钮,使各个输入项变为初始状态(可带value属性)
		button:普通按钮,和js一起使用,能执行按钮事件
-->
<!-- 下拉输入项 -->
		<select name="birth">
			<option value="0">请选择</option>
			<option value="1997" selected="selected">1997</option> <!-- 默认选择1997 -->
			<option value="1998">1998</option>
		</select>
		<!-- 文本域 -->
		<textaread cols="20" rows="5"></textaread>
	</form>

其他常用标签

字体加粗：
下划线：
斜体：
删除线：<s></s>
原样输出：<pre></pre>
段落标签：//比br标签多空一行
下标：
上标：
自动换行：<div></div>
在一行显示：

html的头标签的使用

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

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

属性	值	描述
http-equiv	content-type expires refresh set-cookie	把 content 属性关联到 HTTP 头部。
name	author description keywords generator revised others	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

<!-- 当前页面3秒后自动跳转至01-hello.html -->
<meta http-equiv="refresh" content="3;ur1=01-hello.html" />

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

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

base标记是一个基链接标记，是一个单标记。用以改变文件中所有连结标记的参数内定值。它只能应用于标记<head>与</head>之间。重要属性：

href设定前缀的链接地址你网页上的所有相对路径在链接时都将在前面加上基链接指向的地址。

target设定文件显示的窗口,同a标记中的target

<html> 
<head> 
<base href="http://www.baidu.com" target="_blank"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>base标记</title> 
<link rel="Shortcut Icon" href="ani.CUR"> 
</head> 
<body> 
<a href="77.htm" target="_self">77</a> 
<a href="88.htm">88</a> 
</body> 
</html>

当点了链接后，跳出的文件是http://www.baidu.com/77.htm或http://www.baidu.com/88.htm，它就是在这些相对路径的文件前加上基链接指向的地址。如果目标文件中的链接没有指定target属性，就用base标记中的target属性。
常在框架结构中用，如左右两个框架，把左边的框架中文件里的连接都显示在右边的框架里。只要用base标记，把其target属性值写为右框架名称，这就不用再为左框架里的文件中的每一个连接都指定target属性。当使用时，BASE 元素必须出现在文档的 HEAD 内，在任何对外部源的引用之前。
这个标签的用处是解决编程时候的相对路径问题，比如有的cms，因为每页路径不一样，他就给你生成<a href="/sdsd/dsd

.html">sddsds</a>之类的，如果我在本地调试，肯定会在本地开一个目录的，这样就乱了，你可以把它生成相对路径，如<a href="sdsd/dsd.html">sddsds</a>，只要在head部分加上<base href=http://localhost/abc/>即可。

<!-- body中的超链接都被设置了target属性，即打开方式 -->
<base target="_blank" />

link：引入外部文件（CSS）

当然，这个base还有一个用法，如在head部分加上这么一行： <base href="_blank"> ，就是默认所有链接在新窗口打开。
 还可以这么理解：
 这是设置基础路径的,basepath为变量
 简单的静态网页的话你设置比如:<base href="http://www.baidu.com">,那你下面的href属性就会以你上面设的为基准,如:<a href="http://www.baidu.com/xxx.htm"></a>你现在就只需要写<a href="xxx.htm"></a>

语法

<base target="value">

属性值

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

利用framename打开页面

比如：
<a href="index.htm">首页</a>
这个链接度没有指定目知标窗口（target），那么点击的时候本来是在本窗口打道开的，但如果加了<base target="main">这一版句，就会转到main窗口打开。
如果是：
<a href="index.htm" target="_blank">首页</a>
那么就不受<base标签的影响，会强制权在新窗口中打开连接。

框架标签

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

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

<frame>
引入具体显示的页面

<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”

mocas_wang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaweb之前端html学习笔记

HTML目录HTMLhtml的规范html的操作思想：html中常用的标签1.文字标签和注释标签2.标题标签，水平线标签和特殊字符3.列表标签4.图像标签5.超链接标签6.表格标签:可以对数据进行格式化,使数据显示更加清晰7.表单标签:将数据提交到服务器其他常用标签html的头标签的使用框架标签html：HyperText Marku...
复制链接

扫一扫