码迷,mamicode.com
首页 > 编程语言 > 详细

『JavaWeb前端』一、HTML-精炼-易懂

时间:2021-07-05 17:08:45      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:复选框   get   用户信息   大小   选项   复杂   word   效果   页面跳转   

一、HTML

<!DOCTYPE html> <!--告诉浏览器网页所使用的文档类型(DOCTYPE)-->
<html>		-- 文档的开始标签
<head>		-- 文档头的开始标签
    <title>标题</title>	-- 文档标题,显示的浏览器标题栏中
</head>		-- 文档头的结束标签
<body>		-- 文档内容的开始标签
    内容
</body>		-- 文档内容的结束标签
</html>		-- 文档的结束标签

<!--注释内容-->

块级标签:

就像标题、段落一样,需要在页面上占据一块的位置的标签

  • <h1>---<h6>

    标题

  • <p>

    段落标签(无格式)

  • <div>

    块标签

  • <pre>

    用于显示想要格式化显示的文本(代码)

内联标签:

  • <em> / <i>

    斜体

  • <strong> / <b>

    黑体

  • <sub>

    下标

  • <sup>

    上标

  • <br>

    换行

  • <hr>

    水平线

  • <span>

    普通内联标签

  • <code>

    标示一段代码

常用实体字符:

  • &nbsp;

    空格

  • &lt;

    <

  • &gt;

  • &amp;

    &

  • &quot;

1 - <a> 标签:

属性 属性作用
href 指定超链接目标的 URL 任何有效文档的相对或绝对 URL / 绝对路径(http/https/mailto/ftp)
name 记录页面跳转位置 设置页面锚点 top(顶部)/middle(中部)
target 指定打开位置 _blank:新页面打开;_self:当前页面打开;targetname:指定窗口或Frame中打开链接
_parent:父窗口中打开;_top:最顶层父窗口中打开;

2 - <img>标签:

若图片有边框,用style="borde:0px;"属性去掉边框

图片地图<map>

设置点击图片不同位置,触发不同的连接

属性 作用
alt alt="无法加载" 规定图像的替代文本
src src="图片地址" 规定显示图像的 URL
height height=200px 定义图像的高度
width width=400px 设置图像的宽度
usemap usemap="#earthmap" earthmap<map>标签的name属性值
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<img alt="earth" src="./stady.jpg" usemap="#earthmap"/>

	<map name="earthmap">

		<area shape="rect" coords="0,0,20,20" href="baidu" href="https://www.baidu.com" target="_blank">
		<area shape="circle" coords="80,80,20" href="google" href="https://www.google.com" target="_blank">
	
	</map>

</body>
</html>

3 - <input>标签:

属性 作用
alt alt="text" 定义文本
type type=button 定义可点击按钮
type=text 定义单行的输入字段,用户可在其中输入文本(默认宽度为 20 个字符)
type=password 定义密码字段
type=hidden 定义隐藏的输入字段
type=radio 定义单选按钮
type=checkbox 定义复选框
type=reset 定义重置按钮,清除表单中的所有数据
type=submit 定义提交按钮,把表单数据发送到服务器
value value=" " 规定 input 元素的值

4 - 表格标签<table>

<table border="1" align="center" cellspacing="7" cellpadding="20">
		<tr>
			<td rowspan="2">1-1</td>
			<td>1-2</td>
			<td colspan="2">占两列(1-4)</td>
			<td >1-4</td>
		</tr>
		<tr>
			<td>2-1</td>
			<td>2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>
</table>

技术图片

4 - 1 <table>标签:

属性 作用
border 规定表格边框的宽度
width 规定表格的宽度
cellpadding 规定单元边沿与其内容之间的空白(单元格内边距)
cellspacing 规定单元格之间的空白(单元格边框的宽度)

4 - 2 <th>,<td>,<tr>标签:

标签 作用 属性 作用
<th> 表头
<td> colspan colspan=2 规定单元格可横跨的列数(占两列)
rowspan rowspan=2 规定单元格可横跨的行数(占两行)
align left,right,center 规定单元格内容的水平对齐方式
<tr> colspan
rowspan
align

5 - 表单标签<form>

表单:用来搜集用户信息并提交给服务器

一般按钮要提交表单:JavaScript

	<form method="post"  >
		用户名:<input type="txt" name="username"><br>
		密码:<input type="password" name="password"><br>
		<a><input type="submit" value="登录"></a>
	</form>

技术图片

5 - 0 标签的输入提示

list属性搭配<datalist>标签来使用 输入提示

<datalist>标签中的提示项由<option>标签包裹

<datalist id="fruit">
		<option>梨</option>
		<option>西瓜</option>
		<option>苹果</option>
		<option>菠萝</option>
		<option>火龙果</option>	
</datalist>
请输入水果名:<input list="fruit">

5 - 1 <form>标签:

属性 作用
method get (提交数据的方式)收集少量的用户信息,url长度限制为4KB
post 收集大量用户信息,信息保存在HTTP请求消息的正文,提交后不能使用刷新按钮
action 地址(form.html) 提交表单时转到的url地址

5 - 2 <input>标签:

属性 作用
type type=button 可点击按钮,已弃用,一般按钮,,由button标签中的button替代
type=text 单行的输入字段,用户可在其中输入文本(默认宽度为 20 个字符)
type=password 密码字段
type=date 日期输入框
type=time 时间输入框
type=hidden 隐藏输入框(用户不可见,但输入框的值会随表单一起提交,用与多页面收集用户信息)
type=radio 单选按钮,name相同的一组只能选一个
type=checkbox 复选框
type=reset 重置按钮,清除表单中的所有数据,已废弃由button标签中的reset替代
type=submit 提交按钮,把表单数据发送到服务器,已废弃由button标签中的submit替代
value 文本框的值
name(必须包含) 提交表单时,文本框的值value存储在name变量中
maxlength 文本框允许输入的最多的字符数
readonly 只读文本框
disabled 只读文本框,文本框显示为灰色,文本框的值不会发送到服务器

5 - 3 <textarea>标签

多行文本输入框

没有字符数的限制

属性 作用
rows 行数 内容过长时自动显示滚动条
cols 列数

5 - 4 <select>标签

下拉列表框

标签 属性 作用
select name 下拉框的名称
size 显示行数(>1) 显示多少行,以平铺的形式显示
multiple multiple 可以多选
option value 选项代表的值 提交以后会将value的值存储到name中
selected selected 是否选中此选项
optgroup labal 分组名称(此名称不可选中) 用来对选项进行分组
<select name="country">
	<optgroup label="北美洲">
		<option value="America">美国</option>
    </optgroup>
	<optgroup label="亚洲">
		<option value="China" selected="selected">中国</option>
		<option value="India">印度</option>
		<option value="Russia" >俄罗斯</option>
    </optgroup>
</select>	

技术图片

<select name="country" size="5" multiple="multiple">
		<option value="America">美国</option>
		<option value="China" selected="selected">中国</option>
		<option value="India">印度</option>
		<option value="Russia" >俄罗斯</option>
</select>	

技术图片

5 - 5 <lable>标签、<fieldset>标签

<lable>标签:实现点击按钮旁边与点击选项框的效果相同

<fieldset>标签:实现分组框

标签 属性 作用
lable for <input>标签中id的值 点击按钮旁边与点击选项框的效果相同
fieldset style width:200px 设置分组框的大小
<fieldset>/<legend> 分组框的名称
<fieldset style="width: 200px">
    	<legend>选择颜色</legend>

    	<label for="blue">蓝色</label>
        <input type="radio" id="blue" name="color" ><br>

    	<label for="red">红色</label>
        <input type="radio" name="color" id="red"><br>

    	<label for="white">白色</label>
        <input type="radio" name="color" id="white">
    	
    </fieldset>

技术图片

6 - 框架<frameset>(了解)

此标签不能写在<html>标签中,因为它是集成了多个html

可以将很多页面组合成一个页面

常见应用场景:(部分刷新)

? 一个 frame 中放置页面导航,另一个 frame 中放置页面内容,当点击页面导航时,只刷新页面内容。

标签 属性 作用
<frameset> cols px;%;* 垂直分栏的各的宽度(*表示占用剩余全部空间)
rows px;%;* 水平分栏的各的宽度(*表示占用剩余全部空间)
frameborder 0 不显示分割条
<frame> noresize noresize 分割条不可拖动
scrolling no 不显示滚动条
<!-- <frameset cols="33%,33%,*">
   	<frame src="1.html"></frame>
   	<frame src="2.html"></frame>
  	<frame src="3.html"></frame>

</frameset> -->

<frameset rows="33%,33%,*">
   	<frame src="1.html"></frame>
   	<frame src="2.html" ></frame>
  	<frame src="3.html"></frame>
</frameset>		

6 - 1 框架之间的导航

框架中的链接可以在框架之间导航,通过设置 标签的 target 属性

<a> target 属性和 <frame>name 属性相对应

6 - 2 <frameset>的缺点

  • 无法正确显示页面的url地址
  • 通过URL打开单独的一个内容页面时,看到的不是完整的页面
  • Frame之间的导航有点复杂,可能出现不一致的情况
  • 刷新页面后载入的页面和用户期望的可能不一致

『JavaWeb前端』一、HTML-精炼-易懂

标签:复选框   get   用户信息   大小   选项   复杂   word   效果   页面跳转   

原文地址:https://www.cnblogs.com/carrybircks/p/14965089.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!