关闭页面特效

HTML

1|0HTML


<!DOCTYPE html> <!--html5声明--> <html> <head> <title> </title> <meta charset="utf-8" /> <!--设置字符集--> <meta name="description" content=""/> <!--告诉搜索引擎你的站点的主要内容--> <meta name="keywords" content=""/> <!--向搜索引擎说明你的网页的关键词--> <meta http-equiv="refresh" content ="5; url=http://www.baidu.com/ " /> <!--定时让网页在指定的时间内,跳转到页面--> </head> <body>哈哈</body> </html>

2|0java和mysql和html注释区别


2|1java


// /**/ /***/

2|2mysql


-- /**/

2|3html


<!--注释内容-->

2|4音频标签


<!DOCTYPE HTML> <html> <body> <audio src="/i/horse.ogg" controls/> <!--单双标签都可以--> <!--属性名和属性值相同,属性值可以省略--> controls 显示播放按钮控件 width 设置播放器宽度 height 设置播放器高度 loop 重复播放 muted 静音 </body> </html>

2|5视频标签


<!DOCTYPE HTML> <html> <body> <video src="/i/movie.ogg" controls/> </body> </html>

2|6加粗标签


<!DOCTYPE HTML> <html> <body> <b>加粗</b> <strong>加粗</strong> <!--代码语义化:b文本加粗,strong文本加粗,语气加重--> </body> </html>

2|7斜体标签


<!DOCTYPE HTML> <html> <body> <em>斜体</em> <i>斜体</i> <!--代码语义化:i文本斜体,em文本斜体,浏览器警示--> </body> </html>

2|8下划线标签


<!DOCTYPE HTML> <html> <body> </hr> <!--下划线--> </body> </html>

2|9上标签和下标签


<!DOCTYPE HTML> <html> <body> x<sup>2</sup><!--上标签--> x<sub>0</sub><!--下标签--> </body> </html>

2|10居中标签


<!DOCTYPE HTML> <html> <body> <center>您好</center> </body> </html>

2|11换行标签


<!DOCTYPE HTML> <html> <body> </br> <!--换行--> </body> </html>

2|12标题标签


<!DOCTYPE HTML> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>

块状元素

独占一行,可以改变宽高

内联元素

不独占一行,不能改变宽高

2|13常用的字符实体


HTML 原代码 显示结果 描述
&lt; < 小于号或显示标记
&gt; > 大于号或显示标记
&amp; & 可用于显示其它特殊字符
&quot; 引号
&reg; ® 已注册
&copy; © 版权
&trade; 商标
&ensp; 半个空白位
&emsp; 一个空白位
&nbsp; 不断行的空白

2|14超链接


<!DOCTYPE HTML> <html> <body> <a href="www.baidu.com">测试</a> <!--href:要跳转的页面--> <a href="test02.html">测试</a> <!--同路径--> <!--href:要跳转的页面--> <!--上一级目录../--> <a href="test02.html" target="_self">测试</a> <!--target打开链接的位置,默认为自身_self,新窗口_blank--> </body> </html>

2|15锚链接


必须大于一屏

<!DOCTYPE HTML> <html> <body> <a href="#test1">测试1</a> ...... <a name="test1">测试1</a> ...... </body> </html>

2|16空链


<!DOCTYPE HTML> <html> <body> <a href="#">空链</a> </body> </html>

2|17图片标签


<!DOCTYPE HTML> <html> <body> <img src="/i/tu.jpg" alt="" title="" width="100px" height="100px"/> <!--alt属性,图片不能展示时的提示文字--> <!--title属性,鼠标放到图片上的提示文字--> <!--width属性,宽度--> <!--height属性,高度--> <!--宽高属性调整会导致图片变形--> </body> </html>

2|18列表标签


<!DOCTYPE HTML> <html> <body> <ul type="disc"> <li>语句1</li> <li>语句2</li> </ul> <!--无序列表--> <!--type属性默认为disc,可更改square,circle无序列表项目符号--> <ol> <li>语句1</li> <li>语句2</li> </ol> <!--有序列表--> <!--type属性默认为数字,可更改A,a,i有序列表项目符号--> <dl> <dt>属性</dt> <dd>信息1</dd> <dd>信息2</dd> </dl> <!--<dl>标签用于结合 <dt>(定义列表中的项目)和<dd>(描述列表中的项目)--> <table border="1" cellpadding="10" cellspacing="0" bgcolor="red"> <tr> <td>1.1</td> <td>1.2</td> <td>1.3</td> </tr> <tr> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> </table> <!--两行三列的表格--> <!--属性border="1"边框宽度为10--> <!--属性cellpadding="10"单元格和内容之间的空格为10--> <!--cellspacing="0"单元格和单元格之间的空格为10--> <!--bgcolor="red"背景颜色为红色--> <!--<td>属性 colspan属性规定单元格可横跨的列数> <!--<td>属性 rowspan属性规定单元格可横跨的行数> </body> </html>

2|19表单


表单标签

<form>是在页面中创建出一个表单,表单标签在HTML中是没有效果展示的,能展示的是表单中的各种标签。如果数据需要提交给服务器,负责收集数据的标签必须放在表单之中。

属性解析:

属性名 属性说明
action 数据提交的路径,指向数据提交的服务器地址
method 数据提交的方式,常用取值:get、post
enctype 规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式:1. application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候,使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2. multipart/form-data:指定传输数据为二进制类型,比如图片,mp3,文件。3. text/plain:纯文本的传输。空格转换为"+"号,但不对特殊字符编码。

输入域标签

<input>标签用于获取用户输入信息,通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。

input属性:

属性名 属性说明
id 为当前组件提供一个唯一的标识
type 定义表单输入项input的组件类型 详见下一个表格type属性值说明
name 为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据
value 为当前组件设置值。value属性的设置策略:①文本框、密码框这样的表单输入项,可以不强制指定value,因为用户可以自由输入②单选框、复选框这样的表单输入项,必须强制指定value,因为用户无法输入,只能选择,如果不指定value,那么提交上去的只有on
checked 设置单选框/复选框的默认选中状态(全选、反选)
readonly 设置该标签的参数值只读,用户无法手动更改。但是数据是可以正常提交
disabled 设置该标签不可用(禁用),参数值无法更改,且参数值也无法提交
size 组件的长度
maxlength 设置允许输入的最大的长度
placeholder 输入框的提示信息

input-type属性值说明:

属性值 说明
text 文本框(默认),单行的输入字段,用户可在其中输入纯文本。
password 密码框。 内容为非明文
radio 单选框。 必须将其设置为同一组(name的名字必须相同)
checkbox 复选框。 必须将其设置为同一组(name的名字必须相同)
file 附件框。用于文件上传。multiple="multiple" 上传多个文件
hidden 隐藏域。数据可以通过表单发送至服务器,但是浏览器不会显示。
submit 提交按钮。用于控制表单提交数据。name属性一般不用设置,设置value属性 将按钮起一个名字
reset 重置按钮。 用于将所有的 表单输入项恢复到 默认状态
image 图形提交按钮
button 普通按钮。 需要和JavaScript事件一起用
<!DOCTYPE HTML> <html> <body> <form action="" method="get" > <p>First name:<input type="text" name="fname"/></p> <p>Last name:<input type="password" name="lname"/></p> <input type="submit" value="Submit"/> </form> </body> </html> <!--action触发事件--> <!--method提交方法--> <!--value按钮上为按钮文字,输入框为默认文字--> <!-- button:按钮 checkbox:复选框 file:选择文件 hidden:隐藏 image:图片提交按钮 password:密码框 radio:单选(name在一个组) reset:重置按钮 submit:提交按钮(通过action提交数据) text:文本框 -->

下拉列表标签

提供一个下拉列表框,让用户进行选择。 <select>

属性解析:

属性值 说明
name 下拉列表框的名字。
属性selected选中项、value为当前下拉项的值
multiple multiple 属性规定输入字段可选择多个值
<!DOCTYPE HTML> <html> <body> <form action="" method="get"> <select name="" id=""> <option value="Volvo">Volvo</option> <option value="Saab">Saab</option> <option value="Opel">Opel</option> <option value="Audi">Audi</option> <!--value为表单提交文字,标签中为页面文字--> </select> </form> </body> </html>

文本输入控件

HTML提供了多行输入的文本控件:<textarea>

属性解析:

属性值 说明
cols 设置文本域的列数
rows 设置文本域的行数
<!DOCTYPE HTML> <html> <body> <textarea rows="3" cols="20"> 文本文字输入位置 <!--rows 和 cols 属性,用于声明 <textarea> 的精确尺寸--> <!--readonly只读属性--> <!--style="resize:none;"不可拉伸--> </textarea> </body> </html>

按钮标签

<button> 标签定义一个按钮。 在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。 <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button></button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

代码示例:

<body>     <!-- button按钮 -->     <button>按钮</button> </body>

2|20表格


HTML中一个表格由<table>标签及一个或多个<tr>加若干<td>标签组成。

常用标签:

标签名 作用
table 父标签,相当于表格的容器
tr 用来定义行,写在标签内标签内
td 用来定义列(单元格),写在
th 表格的列标题: 加粗,居中
caption 表格的标题

属性解析:

属性名 属性说明
border 表格边框的宽度(粗细)
width 表格的宽度
height 表格的高度
align 可以用在标签中,表示表格相对于整个浏览器窗口的居中对齐;也可用在或
标签中,设置单元格内容的对齐方式取值:left 居左、right 居右、center 居中
bgcolor 表格的背景颜色
rowspan 合并行
colspan 合并列
cellspacing 单元格之间的空白
cellpadding 表格边缘与内容之间的空白
thead 标签定义表格的表头
tbody 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容
tfoot 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。
案例代码1:定义3*2表格
<body>     <!-- 定义3*2表格 -->     <table border="1px" width="500px" cellpadding="0px" cellspacing="0px">         <tr>             <td>第一行第一列</td>             <td>第一行第二列</td>         </tr>         <tr>             <td>第二行第一列</td>             <td>第二行第二列</td>         </tr>         <tr>             <td>第三行第一列</td>             <td>第三行第二列</td>         </tr>     </table> </body>
用来定义<table>表格的表头信息,是<tr>的子标签,写在<th>标签中的内容会自动加粗。

代码示例:

<body>     <table border="1px" width="500px" cellpadding="0px" cellspacing="0px">         <tr>             <th>表头1</th>             <th>表头2</th>         </tr>         <tr>             <td>第二行第一列</td>             <td>第二行第二列</td>         </tr>         <tr>             <td>第三行第一列</td>             <td>第三行第二列</td>         </tr>     </table> </body>

效果演示:

<body>     <table border="1px" width="500px" height="200px" cellspacing="0px" cellpadding="0px" align="center">         <caption>             <h2>学生信息表</h2>         </caption>         <tr>             <th>学号</th>             <th>姓名</th>             <th>性别</th>             <th>个人简介</th>         </tr>         <tr align="center">             <td>1001</td>             <td>柳岩</td>             <td></td>             <td>我大, 我骄傲</td>         </tr>         <tr align="center">             <td>1002</td>             <td>刘涛</td>             <td></td>             <td rowspan="2">我是一名演员</td>         </tr>         <tr align="center">             <td>1003</td>             <td>宝强</td>             <td></td>         </tr>         <tr align="center">             <td>1004</td>             <td colspan="2">张艺兴</td>             <td>小绵羊</td>         </tr>     </table> </body>

2|1meta标签


<meta charset="utf-8"/><!--设置页面编码--> <meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--设置页面内容类型和编码方式--> <meta name="keywords" content="html,second"/><!--搜索关键字--> <meta name="description" content="这是我们开发的第二个前端页面"/><!--网页描述--> <meta http-equiv="refresh" content="时间;url=地址"/><!--几秒跳转-->

__EOF__

作  者YXH
出  处https://www.cnblogs.com/YxinHaaa/p/17366592.html
关于博主:编程路上的小学生,热爱技术,喜欢专研。评论和私信会在第一时间回复。或者直接私信我。
版权声明:署名 - 非商业性使用 - 禁止演绎,协议普通文本 | 协议法律文本
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!

posted @   YxinHaaa  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
0
0
关注
跳至底部
点击右上角即可分享
微信分享提示