zoukankan      html  css  js  c++  java

  • 前端笔记-html

    前端笔记html

    　　前端三大利器，html（本源），css（着装），js（动作）

    　　html　　学习html就是学习一套规则能够被浏览器识别，在页面中展示，一个页面只能运行一个html

    　　标签　　<>被尖括号包裹的就是标签，不同的标签有不同的含义

    　　　　主动闭合标签　　<title>Title</title>

    　　　　自动闭合标签　　<meta charset="UTF-8">

    　　html分为head，和body

    　　<head>:

    <!--最新html5标签-->
<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
    <!--字符集编码-->
    <meta charset="UTF-8">
    <!--meta标签赋予浏览器一些我们看不见页面的属性-->
    <!--浏览器tab标签名-->
    <title>你好</title>
    <!--打开页面每隔1s自动刷新-->
    <meta http-equiv="refresh" content ="1">
    <!--打开页面后1s跳转到百度-->
    <meta http-equiv="refresh" content ="1;https://www.baidu.com">
    <!--百度检索搜索爬虫会搜索下面关键字，如果你输入关键字，就可以搜索出来了，当然前几名肯定要收钱-->
    <meta name="keywords" content="关键字索引xxx，xxxx，xxx">
    <!--百度检索搜索爬虫会搜索下面描述-->
    <meta name="description" content="描述内容">
    <!--link标签中的rel属性是告诉浏览器作为怎么样的功能，此处是当做网站图标-->
    <link rel="shortcut icon" href="xxxx">
    <!--link还可以引用css样式表-->
    <link rel="stylesheet" href="xxxx">
</head>
<!--主体-->
<body>
</body>
</html>

    　　<body>: 

    <!--标题标签-->
<h1>123</h1>
<h2>123</h2>
<h3>123</h3>
<h4>123</h4>
<h5>123</h5>
<h6>123</h6>
    		 

    

    

    <!--段落标签-->
<p>123</p>
<!--换行标签-->
<br>
<p>123</p>
    

    
    		


    

    


    

    

    <!--块级标签表示自己无论有多大都占满一行,可以设置宽高,默认是父标签100%的宽度-->
 <div>块级标签</div>


<!--行内标签表示自己有多大就占多大,也就是默认大小,不可以设置宽高-->
<span>行内标签</span>


<!--span标签又称为白板标签，没有附着css样式-->


<!--p标签没有加然后定义默认是一个块级标签-->

    <!--行内块标签通过是input标签,img标签,在一行内显示,并能设置宽高-->
    

    
    		
 

    

    
    		

    

    


    

    <em>rainbol</em>
    

    
    		
斜体标签



    

    


    

    <strike>不再使用标签</strike>
    

    
    		




    

    


    

        2<sub>3</sub>
    3<sup>4</sup>
    

    
    		
上下角标标签



    

    


    

     <input type="text" placeholder="请输入用户名">
    

    
    		
 



    

    


    

     <input type="text" placeholder="默认值" value="admin">
    

    
    		
 

    

    


    

     <input type="text" placeholder="请输入用户名" value="admin" name="username">
    

    

    		
 name属性表示跟后端交互的key，value属性是跟后端交互的值












































    

    
 

    

    <input type="password" placeholder="请输入密码" value="password"> 
    

    

    		
 












































    

    


    

     <span>男</span><input type="radio" ><span>女</span><input type="radio" >
    

    
    		
 



    

    


    

    <span>男</span><input type="radio" name="sex"><span>女</span><input type="radio" name="sex">
    

    
    		
 

    当name属性相同时，可以互斥，不然两者都可以点
    
    		

    

    


    

    <input type="checkbox">
    

    
    		


    多选框
    
    		

    

    


    

     <input type="checkbox" checked="checked">
    

    
    		
 

    默认勾选
    
    		

    

    


    

     <input type="file">
    

    
    		
 



    

    


    

     <form action="这是提交地址,接口信息xxx.com" method="post">这是个表单标签</form>
    

    
    		
 表单标签是个整体。在表单标签中写提交的内容，比如写前面的input

    

    


    

     <input type="button" value="登录">
    

    
    		
 button按钮如果想要有操作，只能通过js实现

    

    


    

      <input type="submit" value="登录">
    

    
    		
 submit按钮如果和form表单连用，会直接触发action中的请求

    

    


    

     <input type="reset" value="重置">
    

    
    		
 reset按钮如果和form表单连用，会直接触发form表单中的重置操作

    

    


    

    <label for="asd">密码</label>
<input id="asd" type="password" placeholder="请输入密码" value="">
    

    
    		


     功能扩展，当点击前面密码时可以时光标定位到输入密码处
    

    

    		

    

    


    

    <span>用户名:</span><input minlength="6" value="admin" readonly size="100"><br>
<span>&nbsp&nbsp&nbsp&nbsp密码:</span><input type="password" maxlength="8" minlength="6">
    

    
    		


    readonly只读不能输入，maxlength，minlength最大最小长度
    

    size文本长度，在表单提交中，基本都是要有id和name
    
    		

    

    


    

     <span><input type="button" onclick="alert('警告框')" value="你好啊"></span>
    

    
    		


    

    		

    

    


    

     <textarea>复文本标签</textarea>
    

    
    		
 



    

    


    

    <select>
<option value="1">你好</option>
<option value="2">你不好</option>
<option value="3">你真好</option>
</select>
    

    
    		
 



    

    


    

    <select>
<option value="1">你好</option>
<option value="2">你不好</option>
<option value="3" selected="selected">你真好</option>
</select>
    

    
    		


     
    


    默认你真好
    
    		

    

    


    

    <select>
<optgroup label="上海">
<option>嘉定</option>
<option>青浦</option>
<option>闵行</option>
</optgroup>
<optgroup label="北京">
<option>海淀</option>
<option>顺义</option>
<option>朝阳</option>
</optgroup>
</select>
    

    
    		
 

    

    


    

     <a href="www.baidu.com">直接跳转到百度</a>
    

    
    		


     <a href='www.baidu.com' target='_blank'>在新增网页打开并直接跳转</a>
    

    　　　　　　　　　　　　//target='_self' 默认是在当前页面打开,而_blank是新增一个网页
    
    		

    

    


    

    <a href="#top">返回顶部</a>
    

    
    		
a标签自带锚

    

    


    

    <a href="#aaa">到底部</a>
<a name="aaa"></a>
    

    
    		
 自定义锚，在底部定义一个name=aaa的隐形锚，在头部#name等于aaa引用下面这个锚，就可以实现自定义链接了

    

    


    

     <img src="C:/Users/www/Desktop/H[K_981P569OK@_FHL5V3LE.png" alt="图片加载失败的文案" title="鼠标悬浮显示的文案"
     align="top" height="500px" width="500px"    >
    

    
    		
 

    

    


    

    <ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
    

    
    		
 

    　　列表
    
    		

    

    


    

    <table border="1">
    <!--表头-->
    <thead>
    <!--行-->
        <tr>
            <!--列-->
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
    </thead>
    <!--表体-->
    <tbody>
        <tr>
            <th>4</th>
            <th>5</th>
            <th>6</th>
        </tr>
    </tbody>
</table>
    

    
    		


    合并单元格2行 rowspan="2"跨行属性
    

    colspan跨列属性
    
    		

    

    


    

     <hr size="20" width="100%" color="red">
    

    
    		


    
    		

    

    


    

    

    

    <pre>
预格式标签
xxxx:xxx
xxxx:xxx
xxx
xx
x
</pre>
    

    

    
    		


    

    


    

    <marquee scrolldelay="100" direction="right" onmouserover="this.stop()" onmousrout="this.start()">
<h2>123</h2>
<h3>123</h3>
<h4>123</h4>
<h5>123</h5>
<h6>123</h6>
</marquee>
    

    
    		


     滚动标签（比方说弹幕）
    

    scrolldelay滚动延迟
    

    direction滚动方向，up，down，right，left
    

    onmouseover当鼠标指向目标停止
    

    onmouseout当鼠标离开目标继续运行
    
    		

    

    


    

    


    
     		

    

    
 版权声明：本文原创发表于 博客园，作者为 RainBol 本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。 

    
    

    

     
    


    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  MySQL
                    
    Date和String转换
                    
    Spring-test事务自动回滚
                    
    java多线程:生产者和消费者模式(wait-notify) : 单生产和单消费
                    
    制作ISO文件 与 提取ISO文件
                    
    windows10 更换密码
                    
    win 添加网络位置共享 && win 实用快捷键
                    
    ubuntu16 安装mysql5.7
                    
    ubuntu16 中chkconfig 命令不能使用
                    
    mysql 5.7 初始化密码或随机密码
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/RainBol/p/9693997.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看