HTML学习

dai _ tu

已于 2022-11-10 10:50:07 修改

阅读量151

点赞数 1

文章标签： html 学习前端

于 2022-07-27 23:53:09 首次发布

本文链接：https://blog.csdn.net/qq_57862276/article/details/126015914

版权

HTML

meta标签

概述：网页的关键字，作者的信息，使用语言等；
属性：name 和http-equiv

name:

keywords: 关键字例如：

<meta name="keywords" content="html,前端,CSS">

description：主要内容描述,例如：

<meta name="descrption" content="前端学习">

viewport: 常用于移动端

http-equiv:

content-equiv :用于设定网页字符集，便于浏览器渲染，例如：

<meta http-equiv="content-equiv" content = "text/html;charset=utf-8">

expires: 设定网页到期时间，到期后网页必须到服务器上重新传输，例如：

<meta http-equiv="expires" content = "Thursday 28  2022 00:00 GMT">

refresh:网页自动刷新的时间，并自动转入某网页，例如：

<meta http-equiv="refresh" content="3 ;URL=https://blog.csdn.net/qq_57862276?spm=1000.2115.3001.5343">

/————————————————————————————————————————————————\

1.表单与表格

1.1.1基本格式

<table>
<tr>
<td> </td>
<td> <td>
</tr>
</table>

1.1.2 表格相关标记的说明

元素	说明
table	表格最外层标记，代表一个表格
tr	一行
td	一列
th	与td的作用类似，但一般作为行的开头
thead	表头分组
tbody	表体分组
tfoot	表尾分组
caption	表的标题

1.1.3属性的相关说明

属性	说明
align	表格对齐的方式，一般为：center, left, right
border	边框
bordercolor	边框颜色
bgcolor	背景颜色
background	背景图片
cellspacing	单元格之前的间距
cellpadding	单元格的内容与其边框的内边距
height	高
wdith	宽

1.1.4合并

rowspan
colspan

1.2表单 `<form></form>`

1.2.1属性：

action:表单数据接受的服务器或地址，可以是一个URL或者电子邮件地址
method: method=“get” 或者 post, post 安全性高，get可操作数据更多
entype: 规定在发送到服务器之前，应如何对表单的数据进行编码
target：在提交数据给服务器之后，服务器返回的文档结果的显示的位置

_blank: 在一个新的窗口显示
_self: 当前窗口
_top: *****
_parent: *****

1.2.2表单相关的标签：

input的属性值	说明
text	文本显示
password	密码形式显示
radio	单选
checkbox	多选
submit	提交
reset	重置
button	按钮

实例说明：

<!DOCtype html>
<html>

<head>
<title>表单实例演示</title>
<meta charset="utf-8" http-equiv="refresh" content="3">
</head>

<body>
 <form  method="post" align="center">
    姓名:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    blog主页<input type="text" name="blogaddress" value="http://"><br>
    <input type="submit" value="submit">
    <input type="reset" value="reset">
    
 </form>
</body>
</html>

效果：
请添加图片描述

其中，若想设定某input的最大长度,可用 maxlength 进行设置,例如：

设定密码(最大18位)<input  type="password" name="password" maxlength="18">

1.2.3 select标记

语法格式：

  <select name="" size="" multiple>
         <option value="选项1">1 
         <option value="选项2">2
        <option value="选项3">3   
    </select>

select 常用标记：

name
size：浏览器窗口在菜单选项的显示条数
multiple: 设置用户一次是否可以选择多个选项

默认选择属性：selected

1.2.4 textarea 标签

若在一个表格中，需要大量的文字及换行，，可使用textarea标签
基本语法：

 <textarea name="" cols="" rows="" wrap="off/physical/virtual">
 </textarea>

属性：
name: 用于服务器端收集数据所查找的索引
cols: 设置行的最大显示字数，若为60,可现实60个字符串，30个汉字
rows：显示框中，能显示的最大行数，超过行数需要滚动查看
wrap：off/physical/virtual ,physical 和 virtual 自动换行，off默认
实例演示：

<!DOCtype html>
<html>

<head>
<title>textarea演示</title>
<meta charset="utf-8" http-equiv="refresh" content="3">
</head>

<body align="center">
    个人说明:<br>
    <textarea name="self_infor" cols="60" rows="40" wrap="physicla">
    </textarea>
 </form>
</body>
</html>

效果：
在这里插入图片描述

3.HTML5 新增标记

1.datalsit（提示性选择输入），例如：

<!DOCTYPE html>
<html>
    <head>
        <title>datalist 演示</title>
        <meta charset="utf-8">
    </head>

    <body align="center">
        <label>选择编译器</label>
        <input type="text" id="txt_ide" list="ide"/>

        <datalist id="ide">
            <option value="cgg" />
            <option value="c" />
            <option value="c#" />
            <option value="java" />
            <option value="python" />
        </datalist>
    </body>
</html>

效果：在这里插入图片描述

2.data时间输入

基本语法：

<input type="date" value=" " min=" " max=" " step=" ">

其中，type为 date/year/month/week等
实例演示：

<!DOCTYPE html>
<html>
    <head>
        <title>data 演示</title>
        <meta charset="utf-8">
    </head>

    <body align="center">
        出生年月日：<input type="month" name="birth_data" value="2003-01"  min="2000-01" max="2022-07">
    </body>
</html>

在这里插入图片描述

3.color

实例演示：

<!DOCTYPE html>
<html>
    <head>
        <title>color 演示</title>
        <meta charset="utf-8">
    </head>

    <body align="center">
        选择颜色：<input type="color" name="color" value="red">
    </body>
</html>

在这里插入图片描述

4.button演示：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>button演示</title>
</head>

<body align="center">
     <button style="border:1;width:20;height:10;"onclick="alert('跳转dai_tu博客');window.open('https://blog.csdn.net/qq_57862276?spm=1000.2115.3001.5343')">按键名字</button> 
</body>

</html>

效果：
在这里插入图片描述

5.detail & summary

**实例：**
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>summary & detials演示</title>
</head>

<body align="left">
    <details open>
        <summary>显示所学内容</summary>
        <ul>
            <li>c++</li>
            <li>html</li>
            <li>cnn</li>
            <li>python</li>
            <li>算法</li>
            <li>sw,cad</li>
            <li>pr,ps,ae</li>
        </ul>
    </details>
</body>
</html>

效果：
请添加图片描述
/_________________________________________________________\

在这里插入图片描述

6.progress

实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>progress 演示</title>
</head>

<body align="center">
   加载中：<progress value="22" max="100"></progress>
   注意：ie9之前的版本不支持progress标签
</body>
</html>

效果：
在这里插入图片描述
7.meter
代码实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>meter 演示</title>
</head>

<body align="center">
   剩余磁盘空间：<meter min="0" max="99" low="0" high="100" optimum="0" value="60"></meter>
</body>

</html>

效果：
请添加图片描述

表单综合练习：
请添加图片描述
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="keywords" content="html">
    <title>表单综合练习</title>
    <meta name="descrption" content="前端xuex">
    <meta http-equiv="refresh" >
</head>



<body align="center" bgcolor="" >
    个人说明
    <form action=""  method="post">
        <table border="1" width="500" height="500" align="center" >
          <tr>
            <td width="100" height="100">Name:<input type="text" name="uername"></td>
            <td rowspan="3">
                头像<br>
                <input type="file"> 
            </td>
          </tr>

        
          <tr>
            <td width="100" height="100">出生年月日：<input type="month" min="2000-01" max="2022-07"></td>
            
          </tr>
          <tr>
            <td width="100" height="100">身高：<input type="text"></td>
            
          </tr>  
          <tr>
            <td width="100" height="100">性别 : </td>
            <td><input type="radio" name="sex">男<br>  <input type="radio" name="sex">女</td>
          </tr>  

          <tr>
            <td>级别</td>
            <td>
                <input type="text" id="txt_jb" list="jb"/>

        <datalist id="jb">
            <option value="下忍" />
            <option value="中忍" />
            <option value="上忍" />
            <option value="暗部" />
            <option value="特级上忍" />
            <option value="影" />
        </datalist>
            </td>
          </tr> 


          <tr>
            <td colspan="2">家族:
               <select size="4">
                <option value="1">漩涡</option>
                <option value="2">日向</option>
                <option value="3">宇智波</option>
                <option value="4">袁飞</option>
                <option value="5">山野</option>
            </td>
          </tr> 


          <tr>
            <td colspan="2" align="left">  喜好:
                <input type="checkbox" name="hobby">唱跳
                <input type="checkbox" name="hobby">rap
                <input type="checkbox" name="hobby">篮球
            </td>
            
          </tr> 
          <tr>
            <td colspan="2">自我评价:<br>
                <textarea name="infor" cols="60" rows="20" wrap="physical"></textarea>
            </td> 
          </tr>  
        </table>
        <input type="submit" name="submit" value="提交">
        <input type="reset" name="reset" value="重置">

    </form>
   

</body>

</html>

mood:Some people just stand and win
在这里插入图片描述

dai _ tu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML学习

概述：网页的关键字，作者的信息，使用语言等；属性：name 和http-equivdescription：主要内容描述,例如：viewport: 常用于移动端http-equiv:content-equiv :用于设定网页字符集，便于浏览器渲染，例如：expires: 设定网页到期时间，到期后网页必须到服务器上重新传输，例如：refresh:网页自动刷新的时间，并自动转入某网页，例如：/——————————————————————————————————————
复制链接

扫一扫