前端笔记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. CF C.Ivan the Fool and the Probability Theory【思维·构造】
			
    题目传送门 题目大意: 一个$n*m$的网格图,每个格子可以染黑色.白色,问每个格子最多有一个相邻格子颜色相同的涂色方案数$n,m<=1e5$ 分析: 首先,考虑到如果有两个相邻的格子颜色相同, ...
    
			
    2. 
						
  2. canvas画箭头demo
			
    效果图: 代码: <!DOCTYPE html> <html> <title>canvas画箭头demo</title> <body> &l ...
    
			
    3. 
						
  3. mysql  表字段部分替换
			
    update user set `ph` = REPLACE(`ph`,'shenji.osnt.me','60.210.113.147:555');
    
			
    4. 
						
  4. cv2---imread---error
			
    when I use the cv2.imred() which is absolute path  path = r'C:\\Users\\hp\\Desktop\\常用Python代码\\mycv ...
    
			
    5. 
						
  5. [转帖]ASP.NET Core 中间件（Middleware）详解
			
    ASP.NET Core 中间件(Middleware)详解   本文为官方文档译文,官方文档现已非机器翻译 https://docs.microsoft.com/zh-cn/aspnet/core/ ...
    
			
    6. 
						
  6. Netty框架原理
			
    用这张图表示的就是一个基本的Netty框架 通过创建两个线程池,一个负责接入, 一个负责处理 public class Start { public static void main(String[] ...
    
			
    7. 
						
  7. Linux精简版系统安装网络配置问题解决
			
    参考文档:https://www.jianshu.com/p/7579a2ad1c92 通过链接中的文档配置linux系统的时候,在执行命令yum install net-tools的这里提示错误,是 ...
    
			
    8. 
						
  8. Word 查找替换高级玩法系列之 -- 给数字批量添加空格和下划线
			
    Word中的查找和替换是一个很强大的功能,很多人都在使用这项功能.查找和替换,顾名思义就是说,查找到符合条件的内容,然后将那些内容替换成我们所需要的内容.下面,我们就通过实例来了解一下查找和替换功能, ...
    
			
    9. 
						
  9. 利用Python进行数据分析 第4章 NumPy基础-数组与向量化计算（3）
			
    4.2 通用函数:快速的元素级数组函数 通用函数(即ufunc)是一种对ndarray中的数据执行元素级运算的函数. 1)一元(unary)ufunc,如,sqrt和exp函数 2)二元(unary) ...
    
			
    10. 
						
  10. go 结构的方法总结
			
    方法可以与命名类型或命名类型的指针关联. 刚刚看到的两个 Abs 方法.一个是在 *Vertex 指针类型上,而另一个在 MyFloat 值类型上. 有两个原因需要使用指针接收者.首先避免在每个方法调 ...
    
			
    11.