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






 
												


											
前端笔记-html的更多相关文章
	

    
						
  1. 2.前端笔记之css
		
    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...
    
		
    2. 
						
  2. 1.前端笔记之html
		
    title: 1.前端笔记之HTML date: 2016-04-04 23:21:52 tags: Python categories: Python --- 作者:刘耀 **出处:http://w ...
    
		
    3. 
						
  3. 写给后端的前端笔记：浮动（float）布局
		
    写给后端的前端笔记:浮动(float)布局 这篇文章主要面向后端人员,对前端有深刻了解的各位不喜勿喷. 起因 前一阵子我一个后端的伙伴问我,"前端的左飘怎么做?",我立马就懵了,& ...
    
		
    4. 
						
  4. 写给后端的前端笔记：定位（position）
		
    写给后端的前端笔记:定位(position) 既然都写了一篇浮动布局,干脆把定位(position)也写了,这样后端基本上能学会css布局了. 类别 我们所说的定位position主要有三类:固定定位 ...
    
		
    5. 
						
  5. 前端笔记知识点整合之JavaScript（三）关于条件判断语句、循环语句那点事
		
      一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
    
		
    6. 
								
  6. 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法  （ 摘自zdwzdwzdw）
		
    笔者接触移动前端快一年了,特将平时的一些笔记整理出来,希望能够给需要的人一些小小的帮助.同时也由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜 ...
    
		
    7. 
						
  7. 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
		
    一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
    
		
    8. 
						
  8. 前端笔记之ES678&Webpack&Babel（下）AMD|CMD规范&模块&webpack&Promise对象&Generator函数
		
    一.AMD和CMD规范(了解) 1.1传统的前端开发多个js文件的关系 yuan.js中定义了一个函数 function mianji(r){ return 3.14 * r * r } main.j ...
    
		
    9. 
						
  9. 前端笔记之ES678&Webpack&Babel（上）初识ES678&Babel&let和const&解构&语法
		
    一.ES版本简介和调试运行方法 1.1 ECMAScript简介 MDN手册:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript JavaS ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Andrew Ng机器学习课程17(1)
			
    Andrew Ng机器学习课程17(1) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:主要介绍了强化学习与监督学习的设定上的区别,以及强化学习的框架 ...
    
			
    2. 
						
  2. 计数器+打卡+习惯+目标APP推荐
			
    目录 一.计数器类APP推荐 1.1. Thing Counter - Google Play 上的应用 1.2. Counter - Apps on Google Play 1.3. Counter ...
    
			
    3. 
						
  3. controller中获取当前项目物理绝对路径
			
    用HttpServletRequest request获取 request.getSession().getServletContext().getRealPath(""); 上面 ...
    
			
    4. 
						
  4. 批量添加删除Windows server DNS服务 恶意域名 * A记录 指向 127.0.0.1（2019年6月5日更新）
			
    下载链接:https://pan.baidu.com/s/1OUHyvnIfXYF0PdiT-VRyHw  密码:7gjj 注意!本解决方案在本地的Windows server服务器上把恶意域名指向1 ...
    
			
    5. 
						
  5. Java基础---Java 开发工具IntelliJ IDEA 快捷操作
			
    IDE中快捷编写函数的方法 public static void main(String[] args) ===> psvm System.out.println(); ====> sou ...
    
			
    6. 
						
  6. Java Socket 的工作机制
			
    转载,请加上原文链接: 目录 socket 对象的创建时间 socket 通信可能会造成死锁 socket 对象的创建时间 这里需要一点TCP的知识, TCP状态分析请看 --> TCP转态转换 ...
    
			
    7. 
						
  7. 无线网卡SP-WL450U的驱动问题
			
    修改win10的设备驱动为需要的驱动,SP-WL450U的驱动问题 解决SP-WL450U的驱动问题,在电脑上安装无线网卡后,总是用不上5G信号,只能选择2.4G.重新安装程序后也不行,在反复试用后发 ...
    
			
    8. 
						
  8. 使用Duilib开发Windows软件（2）——控件的基本介绍
			
    XML 先学习xml https://www.w3cschool.cn/xml/xml-xml-tutorialhc4o1t5m.html 控件 上图是我们下载的NIM_Duilib_Framewor ...
    
			
    9. 
						
  9. T100——错误信息提示传入参数显示
			
    LET l_str1 = l_xccc.xccc901LET l_str2 = l_inat015LET l_str = l_str1.trim(),'|',l_str2.trim() CALL cl ...
    
			
    10. 
						
  10. asp.net core-10.Http请求的处理过程
			
    左边是一个普通的网页请求过程,右边是.net core请求过程 这是大致请求流程图:
    
			
    11.