前端笔记-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标签没有加然后定义默认是一个块级标签--> |
![]() |
<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>    密码:</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> |
//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="鼠标悬浮显示的文案" |
![]() |
<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 本文欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。 |