前端笔记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. spring boot 单选按钮
			
    jsp代码 性别: <form:radiobutton path="xb" value="男"/>男 <form:radiobutton pa ...
    
			
    2. 
						
  2. zookeeper 操作命令
			
    简介 查阅了网上相关资料,介绍zookeeper客户端命令并不是非常全面,大多数都是简单介绍ls.get.set.delete.stat这几个简单命令的,下面我把help中的所有命令简单介绍一下以供参 ...
    
			
    3. 
						
  3. 扩展Asp.Net Core中的IdentityUser类
			
    虽然Asp.Net Core.Identity提供了IdentityUser类,但是在有些情况下我们需要一些额外的用户信息,比如性别,年龄等,这时候就需要来扩展IdentityUser类以达到我们的需 ...
    
			
    4. 
						
  4. 【转帖】一文看懂docker容器技术架构及其中的各个模块
			
    一文看懂docker容器技术架构及其中的各个模块 原创 波波说运维 2019-09-29 00:01:00 https://www.toutiao.com/a6740234030798602763/  ...
    
			
    5. 
						
  5. [转帖]新一代IBM Z14主机技术介绍
			
    新一代IBM Z14主机技术介绍 https://cloud.tencent.com/developer/news/268909 IBM最新的已经有IBM Z15 主机了.. 文章来源:企鹅号 - 云 ...
    
			
    6. 
						
  6. 内网环境下搭建maven私服小技巧
			
    背景 最近接手一个其他公司的项目,因为工程中使用了maven,而且里面有很多他们自己封装很多自己的构件(就是jar.war等等),需要将他们maven私服迁移到我们的私服上去,因为网络环境不通,所以不 ...
    
			
    7. 
						
  7. 关于 磁盘 I/O 的工作机制那些事
			
    总有一些你我看不见的东西,存在与你我周围 <深入分析 javaW 技术内幕> 读书感悟 作者 :淮左白衣 写于2018年4月11日19:35:06 写在前面的话 字节与字符的转换桥梁 用户 ...
    
			
    8. 
						
  8. Bean的三种实例化方式
			
    在面向对象程序中,如要使用某个对象,就需要先实例化这个对象.同样的,在Spring中,要想使用容器中的Bean,也需要实例化Bean.实例化Bean有三种方式,分别是:构造器实例化.静态工厂实例化.实 ...
    
			
    9. 
						
  9. python3 获取自建gitlab用户提交信息
			
    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019-12-03 14:20 # @Author : Anthony # @Emai ...
    
			
    10. 
						
  10. Python 中文件操作
			
    上代码: import os import os.path rootdir = "d:/code/su/data" # 指明被遍历的文件夹 for parent,dirnames, ...
    
			
    11.