前端笔记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. Npcap.资料
			
    1.ZC:Npcap 是 WinPcap停更之后的继承者.我尝试了 Win7中发送raw tcp syn,它的代码和 使用WinPcap的基本一致. Developing software with  ...
    
			
    2. 
						
  2. 华为eNSP上的NAT地址转换配置
			
    NAT是将IP数据报文报头中的IP地址转换为另一个IP地址的过程,主要用于实现内部网络(私有IP地址)访问外部网络(公有IP地址)的功能. 1.实验拓扑 地址表: 1.完成各个接口基本配置之后使用pi ...
    
			
    3. 
						
  3. java如何获取当前日期和时间
			
    System.currentTimeMillis() 获取标准时间可以通过System.currentTimeMillis()方法获取,此方法不受时区影响,得到的结果是时间戳格式的.例如: 15431 ...
    
			
    4. 
						
  4. golang 中 map 转 struct
			
    golang 中 map 转 struct package main import ( "fmt" "github.com/goinggo/mapstructure&qu ...
    
			
    5. 
						
  5. 7个步骤让PC网站自动适配手机网页
			
    传统的网站如何完成向移动设备的快速转型? 通过移动适配技术可以实现,切图网是国内首家基于web技术服务的公司,而移动适配主要通过底层的web技术开发手段来完成,下面切图网将从技术角度来告诉你通过7个步 ...
    
			
    6. 
						
  6. TypeScript symbol类型
			
    自ECMAScript 2015(ES6)起,symbol成为了一种新的原生类型,就像基本类型number和string一样. ⒈介绍及使用方式 TypeScript中使用symbol类型和JavaS ...
    
			
    7. 
						
  7. Erlang:[笔记三，构建工具rebar之使用依赖]
			
    概述 类似Java中的Maven,Gradle,在Erlang中同样也有包管理的工具,Rebar提供Erlang依赖(包)管理机制,开发人员可以重复使用已有的模块,通过rebar引入自己的项目直接使用 ...
    
			
    8. 
						
  8. Python_OpenCV视频截取并保存
			
    在图像处理之前,我们需要对拿到手的数据进行筛选,对于视频,我们需要从中截取我们需要的一段或几段 整体思路比较简单,通过设定截取视频的起止时间(帧数),可以将该时间段内的图像保存为新的视频 直接上代码: ...
    
			
    9. 
						
  9. 第3章：LeetCode--算法：strStr KMP算法
			
    https://leetcode.com/problems/implement-strstr/  28. Implement strStr() 暴力算法: int ViolentMatch(char* ...
    
			
    10. 
						
  10. 【Pandas数据分析案例】2018年北京积分入户情况分析
			
    据说,北京落户的难度比加入美国国籍还高.而北京2018年首次实行积分入户制,让我们来分析一下首批通过积分入户拿到北京户口的数据. 首先从北京积分落户官网下载公示名单: 根据表格中的信息,我们主要从以下 ...
    
			
    11.