HTML标签（中）

最新推荐文章于 2024-01-20 23:45:21 发布

糊糊67

最新推荐文章于 2024-01-20 23:45:21 发布

阅读量350

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_43249530/article/details/90582591

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、HTML列表标签

无序列表
是⼀个项目的列表，此列项目使⽤用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于<ul> 标签。每个列表项始于 <li>，<ul><li>标签</li></ul>

type属性：指定列表项的标记类型
<ul type="circle">圆的空心
   <li>性格</li>
   <li>character/li>
</ul>
<ul type="disc">  圆的实心
<ul type="square">  方的实心

有序列表
有序列表也是⼀列项⽬，列表项⽬使⽤数字进⾏标记。
有序列表始于 <ol>标签。每个列表项始于<li>标签，<ol><li>标签</li></ol>
和无序一样都有type属性，但是类型有限，有5种
定义列表
⾃定义列表不仅仅是⼀列项⽬，⽽是项⽬及其注释的组合，也叫项目组织架构列表，⾃定义列表以 <dl> 标签开始。每个⾃定义列表项以<dt>开始。每个⾃定义列表项的定义以 <dd> 开始。

<！--dl   dt   dd-->
<dl>
		<dt>学生</dt>
		<dd>学生</dd>
		<dd>学生</dd>
		<dd>学生</dd>
</dl>

在这里插入图片描述

<dl>
	<dt>一个列表</dt>
		<ul type="disc"><li>咖啡</li></ul>
		<ul type="disc"><li>茶</li></ul>
		<dd><ul type="circle"><li>呜呜</li></ul></dd>
		<dd><ul type="circle"><li>呜呜</li></ul></dd>
		<ul><li>蛋糕</li></ul>
</dl>

在这里插入图片描述

二、HTML表格

table标签
属性：

border	边框大小，厚度
align	表格对齐方式
cellspacing	单元格和边框之间的空隙
bgcolor	背景色
widht/height	宽高
colspan	列合并
rowspan	行合并

		子标签：
		   tr:行标签
		   th：表头标签：自动居中并且加粗
		   td：单元格
		   		   
		单元格的合并：
			行合并：rowspan:占了几个单元格
			列合并:colspan：占了几个单元格

1.表格

表格由<table>标签来定义。每个表格均有若⼲⾏（由<tr>标签定义），每⾏被分割为若⼲单元格（由 <td>标签定义）。如果不定义边框属性(border属性)，表格将不显示边框。

2.表格的表头

表格的表头使⽤<th> </th>标签进⾏定义，⼤多数浏览器会把表头显示为粗体居中的⽂本

3.带有标题的表格

caption 标签必须紧随 table 标签之后。只能对每个表格定义⼀个标题。通常这个标题会被居中于表格之上。

<table border="1">
<caption>我的标题</caption>
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在这里插入图片描述

三、HTML链接

使⽤ <a>标签在 HTML 中创建链接。

<body>
<a href="https://blog.csdn.net/weixin_43249530">我的博客</a>
</body>

href：指定的url资源地址（统一资源定位符）

target属性：表示打开资源文件的方式，可以定义被链接的⽂档在何处显示。_blank在新窗口中打开链接<a href="new_file.html" target="_blank">die</a>，_self默认的方式,在当前窗口打开链接；还可以指定在某个框架frame中打开
name属性：<a href name=""></a>
可以使⽤ name 属性创建 HTML ⻚⾯中的书签。书签不会以任何特殊⽅式显示，它对读者是不可⻅的。当使⽤命名锚（named anchors）时，我们可以创建直接跳⾄该命名锚（⽐如⻚⾯中某个⼩节）的链接，这样使⽤者就⽆需不停地滚动⻚⾯来寻找他们需要的信息了。
超链接两个作用：
（1）跳转资源文件：<a href="https://blog.csdn.net/weixin_43249530"target="_blank">我的博客``
（2）作为锚链接使用

第一种：在同一个html页面中使用
首先设置锚点(跳转标记)<a name="锚点名称"> </a>，其次创建跳转链接<a href="#锚点名称">执行跳转</a>，点击这个链接调转到锚点位置

    <a href="#ii"><font color=aqua>跳到底部</font></a>
	<a name="top"></a>
	<a href="#top"><font color="red">跳转到上面</font></a>
    <a name="ii"></a>

第二种：在不同html页面中使用
首先在另一个页面某个位置设置锚点，其次设置从当前页面跳转到指定资源文件的文字<a href="url地址#锚点名称">执行跳转</a>

在buypage.html页面中有<a name="oo"></a>
在当前页面中有<a href ="buypage.html#oo">调到另一个页面</a>

常见的协议：
file://本地文件协议
http:// :在系统盘hosts文件中查询域名对应ip
https://
mail:邮件协议
thunder://迅雷协议
jdbc:mysql://jdbc协议
ftp:

四、HTML图像

格式需要注意，字段名=“有关图片的属性”，中间用空格分开

<img src="boat.gif" alt="Big Boat">,alt替换文本属性，当图像显示不出来的时候就会显示alt的内容
背景属性：<body background="Java课件/⼗元1.jpg">，如果图像⼩于⻚⾯，图像会进⾏重复。
图片的显示和隐藏

css的display属性：none 操作图片的隐藏
<img style="display: none;" src="hao/ad.jpg" width="100%" >

title：鼠标悬浮到图片上的文字提示

<img  title="广告"  src="hao/ad.jpg" width="100%" >

 onclick点击button时显示onclick的内容
 在head中写
<script >
		function hide(){
		//通过id=“i”来获取对象
		var im=document.getElementById("i");
		//通过im标签对象操作style属性 的dispaly属性
		im.style.display="none";
		}	
		function show
		var ig=document.getElementById("i");
		ig.style.display="block";//显示图片
		}
	</script>
<img id= "i" src="hao/small01.jpg" alt="这是一个图片"/>
<button id="show" onclick="show()">显示</button>
<button id="hide"  onclick="hide()">隐藏</button>
还有一种方法：<input type="button" value="点击" onclick="alert('hello')"/>dianji
	</body>

五、HTML表单

一、`<input>`元素

该有很多形态，根据不同的 type 属性，表单本身并不可见。还要注意⽂本字段的默认宽度是 20 个字符，input必填name属性，给系统后台进行标记，使用submit的时候若想正确的被提交，每个字段必须设置一个name属性

使用单选按钮：有限数量的选项中选择其中之⼀

<html>
<body>
<form>
<p>请选择性别</p>

需要指定相同name属性，加上checked的话就是默认男的，只能选择一个

<input type="radio" name="sex" value="男" checked>男
<br>
<input type="radio" name="sex" value="⼥">⼥
</form> 
</body>
</html>

使用文本输入

<body>
<form>
userName:<br/>
	<input type="text" name="userName" placeholder="输入用户名"/>
	<br/>
password:<br/>
	<input type="password" name="password" placeholder="输入密码"/><br/>
	<input type="submit" value="提交" />
</form>
</body>

提交表单按钮：提交到后台url地址，如果省略 action 属性，则 action 会被设置为当前⻚⾯。

<form action="服务器的页面地址">
 名字：<br>
<input type="text" name="mingzi" value="ywh"><br>
  性别：<br>
<input type="text" name="sex" value="nan">
<br><br>
提交按钮
<input type="submit" value="submit">
</form>

使用复选按钮，可以选多个

<input type="checkbox" value="足球" name="hobit" />足球
<input type="checkbox" value="篮球球" name="hobit" />篮球
<input type="checkbox" value="跑步"  name="hobit"/>跑步
<br />

在这里插入图片描述
5. method 属性
method 属性规定在提交表单时所⽤的 HTTP ⽅法（GET 或 POST）
get方式的特点
如果未指定的话就默认get方式
（1）提交的数据会显示在地址栏上
url?key1(name属性的参数值)=value1&key2=value2
（2）提交的数据大小有限制
（3）不适合提交私有（敏感）数据，比如密码会显示出来
post方式特点
（1）不会将用户数据提交到地址栏上
（2）提交的数据大小没有限制
格式：请求头、响应头
实体参数：formData
username=lisi&password=123456
（3）适合提交敏感数据：后面(web)密码加密
6. name 必填属性
如果要正确地被提交，每个输⼊字段必须设置⼀个 name 属性，给系统后台进行标记
7. <fieldset>元素组合表单中的相关数据
<legend> 元素为<fieldset> 元素定义标题。

<body>
		<form action="url地址">
		<fieldset>
			<legend align="center">表单</legend>
			密码<input type="password " name="password" />
			<br />
			性别<input type="radio" name="sex"/>man<input type="radio" name="sex" />girl
		</fieldset>	
		</form>		
	</body>

form属性

二、`select`元素（下拉列表）

<option> 元素定义待选择的选项, 列表通常会把⾸个选项显示为被选选项。可以通过添加 selected 属性来定义预定义选项。

学历	
<select name="学校">
<!--<option value="请选择" selected>请选择</option>-->
	<option value="请选择">请选择</option>
	<option value="小学">小学</option>
	<option value="初中">初中</option>
	<option value="高中">高中</option>
	<option value="大学">大学</option>
</select>
<br/>

三、textarea元素

定义多行输入字段，文本域

自我描述：
<textarea  rows="2" cols="2" name="description">大学初中</textarea><br/>
<input type="reset" value="重置"  />

四、其他元素

button元素： <button type="button" onclick=alert('hello')>点击</button><br />，onclick当按钮被点击是会发生，函数alert内时单引号，最左边写input和button出来的结果都一样
文件上传：<input type="file" name="ph"/><br/>
邮箱：<input type="email" name="email" /><br />
datalist元素：该元素为 <input>元素规定预定义选项列表，⽤户会在他们输⼊数据时看到预定义选项的下拉列表，<input>元素的 list 属性必须引⽤ <datalist> 元素的 id
==和那个select元素特别像

直接下拉列表可以看到
<input list="cars"/> 
	<datalist id="cars">
		<option value="a">
		<option value="b">
		<option value="c">
	</datalist>

number输入，对数字做出限制

 数量（1 到 5 之间）：
 <form>
 <input type="number" name="quantity" min="1" max="5">
 <input type="submit">
 </form>
 当输入错误是会提示

date输入：日 期 <input type="date" name="riqi" max=" 2010-02-02" /><br/>
电话输入： ,电 话 <input type="tel" name="电话" />
value 属性规定输⼊字段的初始值
readonly 属性规定输⼊字段为只读（不能修改）<input type="text" value="nn" readonly />，放在后面
disabled 属性规定输⼊字段是禁⽤的。被禁⽤的元素是不可⽤和不可点击的。被禁⽤的元素不会被提交。<input type="text" value="nn" disabled />
maxlength 属性规定输⼊字段允许的最⼤⻓度： <input type="text" name="firstname" maxlength="5">
隐藏域：input type="hidden"，也会提交到后台
color输入： <input type="color" value="#ff0000">，默认是红色，可以自己在框内选择
email属性：<input type="email">⽤于应该包含电⼦邮件地址的输⼊字段。根据浏览器⽀持，能够在被提交时⾃动对电⼦邮件地址进⾏验证。

糊糊67

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML标签（中）

一、HTML列表标签1. 无序列表⽆序列表是⼀个项⽬的列表，此列项⽬使⽤粗体圆点（典型的⼩⿊圆圈）进⾏标记。⽆序列表始于<ul> 标签。每个列表项始于 <li>。2.有序列表有序列表也是⼀列项⽬，列表项⽬使⽤数字进⾏标记。有序列表始于 <ol>标签。每个列表项始于<li>标签。3.定义列表⾃定义列表不仅仅是⼀列项⽬，⽽是项⽬及其注释的组...
复制链接

扫一扫