网页html

2021/8/21 23:09:22

编程Tag： 滚动 type 标签网页 post html 提交 JavaEE

本文主要是介绍网页html，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、文本标签

1.标题标签

h1-h6:从小到大
<h1>JavaEE</h1>
<h2>JavaEE</h2>
<h3>JavaEE</h3>
<h4>JavaEE</h4>
<h5>JavaEE</h5>
<h6>JavaEE</h6>

2.滚动标签

滚动标签:marquee;
不指定滚动方向,默认从右到左滚动

属性:
behavior:滚动方式
slide:滚动到一边停止
alternate:来回滚动
scroll:(交替滚动碰到边框不会停止)
direction:滚动的方向:默认值 left(右到左)
scrollamount:滚动的速度: 正整数值(越大,速度快)
bgcolor:背景色
<marquee behavior="scroll"direction ="right"scrollamount="22" bgcolor="pink"> hello,html </marquee>

3.段落标签

闭合标签:<p></p>

4.换行标签

非闭合标签:<br />

5.上下标标签

应用场景:在门户系统最后一行注册商品以及版权所有
<sup></sup> 上标签
<sub></sub> 下标签

6.转义字符

版权所有 : © 代表 © 版权所有
注册商品 : &reg 代表 ®
空格 :   一个  代表一个空格
&ensp; 一个转义字符代表两个空格
xxx公司版权所有2021-2022<sup>©</sup> <br/>
xx公司注册商品<sup>®</sup><br/>
中&ensp;&ensp;国<br />

7.加粗标签

加粗标签:strong/b 语义强调的加粗使用b标签,一般通用strong

<strong>阿富汗</strong>

<b>奥拉夫</b><br />

8.倾斜标签

倾斜标签 em/ i
义强调的加粗使用i标签, 一般通用em
<em>毛泽东</em
<i>毛泽东</i>

9.居中标签

<center>HTML</center>

10.原样输出标签

<pre>
举头望明月,低头思故乡.
funciton hello(){
alert("hello") ;
}
</pre>

11.列表标签

无序列表ul li (列表项)
有序列表ol li
   ul:
           type属性 :指定列表项前面的标记disc
-->
<ul type="square">
   <li>高圆圆</li>
   <li>姆巴佩</li>
   <li>赵又廷</li>
</ul>
<hr/>
以下的明星喜欢谁?
<ol type="1">
    <li>高圆圆</li>
    <li>姆巴佩</li>
    <li>赵又廷</li>
</ol>

二、超链接

1.a标签

超链接用a标签来表示;<a></a>
<a href="00_html文本标签.html#ul" target="_self">跳转到指定页面的某个位置</a><br/>

2.href协议请求规则

后面跟统一资源定位符 url 以后本地地址或者服务器地址
                           需要加上协议
                                   http://www.baidu.com

<a href="00_html文本标签.html#ul" target="_self">跳转到指定页面的某个位置</a><br/>

三、表格

1.表格标签

table表格标签(闭合标签)
               属性:显示表格样式必须指定border 边框
                   algin:对齐方式
                   width/height:宽度和高度(px/百分比(占当前系统分辨率权重百分比))
                   bgColor:背景色
                   cellspacing:设置边框线和单元格的距离

2.表格标题标签

capation:表格标题标签
<caption>xxx学校成绩表</caption>

3.子标签

tr:行标签
td:单元格标签
th:表格的表头标签:特殊的单元(自动居中,加粗)

<tr>
   <th>编号</th>
   <th>姓名</th>
   <th>班级</th>
   <th>成绩</th>
</tr>
---------------------------------------
<tr align="center">
               <td>1</td>
               <td>高圆圆</td>
               <td>Java基础班</td>
               <td>98</td>
</tr>

4.单元格合并

合并行: rowspan属性
               占用的单元格数量
合并列:colspan属性
               占用单元格数量
<tr align="center">
               <td>2</td>
               <td>赵又廷</td>
               <td>Java基础班</td>
               <td rowspan="2">89</td>
</tr>
<tr align="center">
               <td>3</td>
               <td>张三丰</td>
               <td>计算机1班</td>
               -------------上面合并下面删除
</tr>

四、表单标签

1.表单标签

表单标签:form
           属性:
               method:提交方式默认get请求(用户直接在浏览器访问)
                                       post

               action:url 本地提交或者提交后台服务器地址
                                       http://localhost:8080/xxx

2.get/post

get方式和post方式的区别
                   get方式
                           1)将用户提交的数据 -----提交到后台地址上地址上
                           url?key1=value1&key2=value2...
                           2)因为提交到地址栏上,提交数据大小有限制的
                           3)不适合提交私密数据,相对post不安全

                   post方式
                           1)不会将用户的数据提交地址上
                               通过浏览器进行查看:
                           f12---network网络部分查看 post提交参数
                               request header 请求头
                               form-data (实体参数)
                               key1=value1&key2=value2
                           2)这种方式不提交到地址栏上,提交大小没有限制
                           3)相对get方式,安全一些

3.input

type="text" 文本输入框
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br />

type="password" 密码输入框
密&ensp;&ensp;码:<input type="password" name="password" placeholder="请输入密码" /><br />

type="radio"单选按钮
性别: 将它同一组信息 name属性值必须一致
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女<br />

type="checkbox"复选框
<input type="checkbox" name="tecknology" value="JDBC" />JDBC
<input type="checkbox" name="tecknology" value="MySQL" />MySQL

type="date"日期格式
出生日期
<input type="date" name="birthday" />

type="eamil" 必须符合邮箱格式@字符

type="hidden":隐藏域(没有效果,可以携带数据)

4.下拉菜单

下拉菜单
select标签:普通下拉菜单选择一个
option:下列选项

<select name="edu" >
<option value="请选择">请选择</option>
<option value="大专">大专</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
</select>

5.文本域

文本域 textarea
属性:rows:文本域中指定多少行内容
cols:一行里面指定多少个字符

<textarea rows="5" cols="20">
优秀!
</textarea><br />

6.按钮

<input type="submit" value="注册" /><input type="reset" value="清空" />

这篇关于网页html的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！