前端笔记-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 本文欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则视为侵权。 






 


 






		

		
posted @ 
2018-09-23 22:26 
RainBol 
阅读(127) 
评论(0) 
编辑 
收藏 
举报


	

	
	








    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    







	

	


	
	

	

	

	





    

        




    
    Live2D