前端笔记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机器学习课程13
			
    Andrew Ng机器学习课程13 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 引言:主要从一般的角度介绍EM算法及其思想,并推导了EM算法的收敛性.最后 ...
    
			
    2. 
						
  2. Nginx+PHP(FastCGI)高性能服务器加载redis+memcache模块
			
    1)Nginx+FastCGI安装配置: yum install  openssl openssl-devel pcre-devel pcre zlib zlib-devel –y #下载Nginx源 ...
    
			
    3. 
						
  3. Qt 和 Boost关于信号和槽的对比说明
			
    对比 无论是 Qt 的实现方式还是 Boost 的实现方式,除了必须的定义信号和槽的类之外,都不需要额外的类. 两种实现都解决了类爆炸的问题.下面让我们对照着来看一下我们前面的分析. 两个不同的术语以 ...
    
			
    4. 
						
  4. js 实现数字格式化（货币格式）几种方法
			
    // 方法一 function toThousands(num) { var result = [ ], counter = 0; num = (num || 0).toString().split( ...
    
			
    5. 
						
  5. 日常工作问题解决：rhel7下使用teamd配置双网卡绑定
			
    目录 1.情景描述 2.准备工作 2.1 确认网卡信息 2.2 删除原有网卡配置信息 3.配置网卡绑定 3.1 配置千兆网卡双网卡热备用作心跳 3.2 配置网兆网卡双网卡负载均衡用作业务 1.情景描述 ...
    
			
    6. 
						
  6. ORA-01078: failure in processing system parameters LRM-00109: could not open parameter file '/u01/app/oracle/product/19.2.0/db_1/dbs/initsanshi.ora'报错
			
    本人是在Linux安装Oracle19C之后,启动数据库时,XSHELL命令行窗口报的该错误,看了几个解决方案之后,总结如下 从字面的意思来看,是在dbs目录当中没有这个initsanshi.ora文 ...
    
			
    7. 
						
  7. Linux下安装redis 3.0及C语言中客户端实现demo
			
    1.获取安装文件 wget http://download.redis.io/redis-stable.tar.gz 2.解压文件 tar xzvf redis-stable.tar.gz 3.进入目 ...
    
			
    8. 
						
  8. Turn.js 实现翻书效果(自适应单双页)
			
    来源:https://www.cnblogs.com/hellman/p/10683492.html在上面的来源基础上增加页码显示,自适应单双页PC端效果: 移动端展示: 源码下载地址:http:// ...
    
			
    9. 
						
  9. Python中datetime库的用法
			
    datetime模块用于是date和time模块的合集,datetime有两个常量,MAXYEAR和MINYEAR,分别是9999和1. datetime模块定义了5个类,分别是 1.datetime ...
    
			
    10. 
						
  10. linux 安装xdebug
			
    一.安装了 xdebug php -m | grep 'xdebug' 如果没有安装就执行 首先根据 phpinfo() 信息 下载对应的版本,具体看参数: 下载地址:https://xdebug.o ...
    
			
    11.