二.HTML
1.HTML
1.
<head></head>标签
<!DOCTYPE html> <!--统一规范--> <!---->
<html lang="en"> <!--html标签开始，只能有一个头标签，html是主动闭合标签，内部属性-->
<head>
<meta charset="UTF-8" /> <!--meta是自闭标签，charset指定编码-->
<!-- <meta http-equiv="Refresh" content="3"/> #3秒后自动跳转-->
<!-- <meta http-equiv="Refresh" content="3;Url=http:\\www.51job.com" /> #默认3秒后跳转到某个网站-->
<!-- <meta name="keywords" content="汽车，汽车之家"/> #搜索引擎，即关键字-->
<!-- <meta name="description" content="为你提供最新技术"/> #描述本网站是干什么的-->
<!-- <meta http-equiv="X-UA-Compatible" content="IE=IE9"/> IE兼容-->
<link rel="shortcut icon" href="image/ship.bmp"/> <!--前面link属性，后面地址。title页面标题前的小图标-->
<!-- <style />-->
<!-- <script />-->
<title>初来乍到</title> <!--页面标题-->
</head>
<body> <!---->
<a href="http:\\www.baidu.com">百度一下</a>
</body>
</html> <!--html标签结束-->
2.
<input />标签
<!DOCTYPE html> <!--标签不区分大小写--> <!---->
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="shortcut icon" href="image/ship.bmp"/> <!--前面link属性，后面地址。title页面标题前的小图标-->
<title>body部分</title>
</head>
<body>
<a href="http:\\www.baidu.com">百 度 一下<a> </a> <!--只能加一个空格，可以用  ,一个对应一个空格，< > 是<>-->
<p>123<br />456</p> <!--段落标签,<br>标签是换行，但还是一个段落-->
<p>123</p>
<h1>你好</h1> <!--字体从大到小，一个块级标签占一行：p标签(段落和段落之间有间距) ，h标签系列(加大加粗)-->
<h2>你好</h2> <!--字体从大到小，一个块级标签占一行：p标签(段落和段落之间有间距) ，h标签系列(加大加粗)-->
<h3>你好</h3> <!--字体从大到小，一个块级标签占一行：p标签(段落和段落之间有间距) ，h标签系列(加大加粗)-->
<h6>你好</h6>
<span>hello</span> <!--行内标签也叫内联标签，span（白板）-->
<span>hello</span> <!--行内标签-->
<span>hello</span> <!--行内标签-->
<div>1</div> <!--div也是块级标签，白板-->
<div>2</div>
<div>3</div>
<div> <!--标签可以嵌套，标签存在的意义：定位，css操作，js操作-->
<div>1</div>
<span>2</span>
</div>
</body>
</html>
3.
<form></form>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初试牛刀</title>
<link rel="shortcut icon" href="image/ship.bmp"/>
</head>
<body>
<p>123<br />456</p> <!---->
<h1>123</h1>
<span>123</span>
<span>456</span>
<div>qwe</div>
<div>asd</div>
<a href="http:\\www.baidu.com">百度一下</a>
<form action="http://localhost:8888/index" method="POST"> <!--表单，跟属性提交到哪,默认get方式，会把数据拼接到url(表头)上再提交，post会放到内容(body)里方法-->
<input type="text" name="user"/> <!-- name生成字典形式才提交到指定地址，{"user":"用户输入的用户","email","xx","pwd":"xx"} 生成字典提交到后台-->
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<input type="button" value="登录1"/> <!--type不对 不能跳转提交-->
<input type="submit" value="登录2"/> <!--可以跳转提交-->
</form>
<br />
<form > <!--没有属性地址，没法提交-->
<input type="text"/> <!--没有name不能提交-->
<input type="password"/>
<input type="button" value="登录1"/> <!--type不对，不能提交跳转-->
<input type="submit" value="登录2"/>
</form>
</body>
</html>
4.
<input /> <select><option></option><select>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初试牛刀</title>
<link rel="shortcut icon" href="image/ship.bmp"/>
</head>
<body>
<p>123<br />456</p> <!---->
<h1>123</h1>
<span>123</span>
<span>456</span>
<div>qwe</div>
<div>asd</div>
<a href="http:\\www.baidu.com">百度一下</a>
<form action="http://localhost:8888/index" method="POST"> <!--表单，跟属性提交到哪,默认get方式，会把数据拼接到url(表头)上再提交，post会放到内容(body)里方法-->
<input type="text" name="user"/> <!-- name生成字典形式才提交到指定地址，{"user":"用户输入的用户","email","xx","pwd":"xx"} 生成字典提交到后台-->
<input type="text" name="email"/>
<input type="password" name="pwd"/>
<input type="button" value="登录1"/> <!-- 提交按钮type不对 不能跳转提交-->
<input type="submit" value="登录2"/> <!--可以跳转提交-->
</form>
<br />
<form > <!--没有属性地址，没法提交-->
<input type="text"/> <!--没有name不能提交-->
<input type="password"/>
<input type="button" value="登录1"/> <!--type不对，不能提交跳转-->
<input type="submit" value="登录2"/>
</form>
<form>
<input type="text" name="query" value="请输入"/> <!--输入文本框默认值，password也一样-->
</form>
<form enctype="multipart/form-data">
<div>
<select name="city" size="5" multiple="multiple"> <!--下拉框,size默认=1，multiple="multiple"多选
-->
<option value="1">北京</option> <!--下拉框内容-->
<option value="2" selected="selected">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">苏州</option>
</select> <p>请选择性别</p>
男：<input type="radio" name="gender" value="1" checked="checked"/> <!--radio圆框，相同name互斥，value区分，checked="checked"默认值-->
女：<input type="radio" name="gender" value="2"/>
<br/>
<p>爱好</p>
篮球：<input type="checkbox" name="favor" value="1"/> <!--checkbox复选框-->
足球：<input type="checkbox" name="favor" value="2"/>
排球：<input type="checkbox" name="favor" value="3"/>
<p>技能</p>
游泳：<input type="checkbox" name="skill" value="1"/> <!---->
散步：<input type="checkbox" name="skill" value="2"/>
代码：<input type="checkbox" name="skill" value="3"/>
<p>提交文件</p>
<input type="file" name="fname"/> <!--file上传文件，form必须有里的enctype="multipart/form-data" ,把文件一点一点提交给服务器-->
</div>
<textarea name="meno">默认值</textarea> <!--多行文本标签，后台要数据还是要name--> <input type="submit" value="提交"/>
<input type="reset" value="重置"/> <!--reset 把填写的重置即清除-->
</form>
</body>
</html>
5.<a></a>超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初级HTML</title>
</head>
<body>
<a href="http:\\www.baidu.com" target="_blank">百度一下</a> <!--1.做超链接,target打开另一个网页-->
<a href="#i1">第一章</a> <!--2.做錨-->
<a href="#i2">第二章</a>
<a href="#i3">第三章</a> <!---->
<div id=i1 style="height:600px;">第一章内容</div> <!--style="height:600px;"高度600px-->
<div id=i2 style="height:600px;">第二章内容</div> <!--id不能重复-->
<div id=i3 style="height:600px;">第三章内容</div>
I
</body>
</html>
6.<img /><ul></ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title> <!---->
</head>
<body>
<a href="http:\\www.baidu.com">
<img src="data:image/ship.bmp" style="height:200px;width:200px" title="百度一下" alt="请直接点击"/> <!--图片跳转，title把鼠标放到图片上显示的字体，alt无法加载时显示的-->
</a>
<ul> <!--在前加点-->
<li>你好</li>
<li>
<input type="text" name="user"/>
</li> <div>hello</div> <!--ul和li必须组合才能加点-->
</ul>
<ol>
<li>a</li> <!--在前面从1开始排序-->
<li>b</li>
<li>c</li>
</ol>
<dl>
<dt>标题</dt>
<dd>内容</dd>
<dt>标题</dt>
<dd>内容</dd>
</dl> </body>
</html>
7.<table></table> 列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"> <!--不规范操作，列表，border="1"外面加框-->
<tr>
<td>主机号</td>
<td>端口</td> <!---->
<td>操作</td> <!---->
</tr>
<tr>
<td>192.186.1.1</td>
<td>6688</td>
<td>
<a href="http:\\www.baidu.com">百度一下</a>
</td>
</tr>
</table>
<table border="1"> <!--正常操作-->
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="2">2</td> <!--colspon 占两列 合并单元格-->
</tr>
<tr>
<td rowspan="2">4</td> <!--rowspan 占两行-->
<td>5</td>
<td>6</td> <!---->
</tr>
<tr>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table> </body>
</html>
8.<label></label>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<label for="username">用户名：</label>
<input id="username" type="text" name="user"/> </body>
</html>
9.<fieldset></fieldset>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!---->
<label for="username">用户名：</label> <!--点击用户名也可以输入-->
<input id="username" type="text" name="user"/>
<fieldset> <!-- 在外面建个大框-->
<legend>登录</legend> <!--缺口内容-->
<label for="username1">用户名：</label> <!--点击用户名也可以输入-->
<input id="username1" type="text" name="user"/>
<br />
<label for="passwd">密码： </label> <!--点击用户名也可以输入-->
<input id="passwd" type="password" name="pd"/>
</fieldset> </body>
</html>
2.css
1.标签里写style
2.在head里写id选择器
#i1{
}
id=i1
3.class选择器
class=c1
.c1{
}
4.标签选择器
div{
}
所有div都应用样式
5.关联(层级)选择器
span div{
}
span下的div才应用样式；
.c1 .c2 div{
}
class=c1 下的 class=c2下的div才应用样式
6.组合选择器
#i1,i2,i3{
}
.c1, .c2,.c3{
}
7.属性选择器：根据标签下的属性来选择
input[type="text"]{
}
input tupe="text" 的应用样式；
.c1[type="text"]{
}
class=c1 下的type=“”text“”的应用样式
8.引用CSS文件
<link rel="styleshet" href="css样式目录" />
9.边框
style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="border:1px solid red">dd</div> <!--border边框,border-left左边框等，1px粗细,solid实体，dotted虚体，red颜色-->
<!-- 字体大小： font-size:30px ; 水平居中text-align:center ；上下居中 line-height:50px ；字体加粗 font-weight:bold -->
<div style="height:50px;width:80%;border:1px solid red;font-size:30px;text-align:center;line-height:50px;font-weight:bold">sss</div>
<div></div> </body>
</html>
10.
float 和 style属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="margin:0 auto;"> <!--margin:0 auto 与顶部距离为主动为0-->
<div style="border:1px solid red">dd</div> <!--border边框,border-left左边框等，1px粗细,solid实体，dotted虚体，red颜色-->
<!-- 字体大小： font-size:30px ; 水平居中text-align:center ；上下居中 line-height:50px ；字体加粗 font-weight:bold -->
<div style="height:50px;width:80%;border:1px solid red;font-size:30px;text-align:center;line-height:50px;font-weight:bold">sss</div>
<div></div> <div style="width:20%;background-color:red;float:left">aa</div> <!--让标签飘起来，可以堆叠-->
<div style="width:80%;background-color:green;float:left">bb</div>
<span style="width:500px;background-color:green;display:inline-block" >aaa</span> <div style="clear:both;"></div> <!--父边框不显示时用它-->
</body>
</html>
11.
display 标签转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="display:inline;background-color:red">qqqqq</div> <!--display:inline 把行标签变为块标签-->
<span style="display:block;background-color:red"></span> <!--display:block 把块变为行标签-->
<!----><!--行内标签无法设置高度和宽度，可以用display:inline-block; 让它拥有两种功能-->
<!--display:none 让标签隐藏-->
</body>
</html>
12
position 和 返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head> <!---->
<body>
<div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto"> <!--position:absolute，绝对定位+ relative-->
<div style="position:absolute;left:0px;bottom:0px;width:50px;height:50px;border:1px solid red;">qqqq</div>
</div>
<div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto">
<div style="position:absolute;right:0px;bottom:0px;width:50px;height:50px;border:1px solid red;">qqqq</div>
</div>
<div style="position:relative;width:500px;height:200px;border:1px solid red;margin:0 auto">
<div style="position:absolute;right:0px;top:0px;width:50px;height:50px;border:1px solid red;">qqqq</div> </div> </body>
</html>
13.
分多层
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--top:50%;left:50% 以框的左上角定位，-->
<div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-250px;background-color:white;height:400px;width:500px"></div>
<div style="z-index:9;background-color:black;position:fixed;
top:0;
bottom:0;
left:0;
right:0;
opacity:0.2
"> <!-- top:0;bottom:0;left:0;right:0;形成第二层 z-index:10,谁大谁在上面--> <!--opacity:0.2 设置透明度，0-1 -->
</div>
<div style="background-color:pink;height:5000px;"> </div> </body>
</html>
14.
返回顶部？？？？？？？？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <!--在我电脑上不支持-->
</head>
<body>
<div onclick="GoTop();" style="background-color;height:50px;width:50px;position:fixed;right:10px;bottom:25px;color:white">返回顶部</div>
<div style="height:5000px;background-color:pink">3333333333</div> <!--position:fixed固定在某个位置，top 上，bottom 下，-->
<!--position:absolute，绝对定位+ relative-->
<script>
function GoTop(){
document.body.scrollTop=0
}
</script>
</body>
</html>
15.
图片太大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height:200px;width:300px;overflow:auto"></div> <!--overflow:auto 太大则出现滚动条,或者style-->
<img src=""> </body>
</html>
16.
变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
position:fixed;
right:0;
left:0;
top:0;
height:48px;
background-color:#2459A2;
line-height:48px;
}
.pg-body{
margin-top:5opx;
}
.w{
width:980px;
margin:0 auto;
}
.pg-header .menu{
display:inline-block;
padding:0 100px 0 100px;
color:white;
}
.pg-header .menu:hover{
background-color:blue;
}
</style>
</head> <!-- .pg-header .menu:hover 中间有空格啊 -->
<body>
<div class="pg-header">
<div class="w">
<a class="logo">LOGO</a>
<a class="menu">全部</a>
<a class="menu">爱好</a>
<a class="menu">登录</a>
</div>
</div>
<div class="pg-body">
<div class="w">a</div>
</div>
</body>
</html>
3 . javascript 基础
1.弹窗+定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--定时器-->
<script>
setInterval("alert(123);",2000);
</script>
</body>
</html>
2.基本语法
name = "alex" 默认全局变量
var name= "alex" 声明局部变量
i = parseInt(age) 变为整数
i = parseFloat(age) 变为浮点数
a.charAt(1) 切片
a.substring(1,3) 位置切片
a.length 获取长度
3.在console中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--setInterval() 里加执行函数或命令+ 时间间隔，function后加函数名和函数内容-->
<script>
function f1(){
console.log("你好")
}
setInterval("f1();",5000);
</script>
</body>
</html>
4.滚动字条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="i1">欢迎各位朋友们</div>
<script>
function func(){
var tag = document.getElementById("i1");
var content = tag.innerText;
var f = content.charAt(0);
var l = content.substring(1,content.length);
var new_content = l + f;
tag.innerText = new_content;
}
setInterval("func()",500);
</script> </body>
</html>
5.
1
二.HTML的更多相关文章
- 【小程序分享篇 二 】web在线踢人小程序，维持用户只能在一个台电脑持登录状态
最近离职了, 突然记起来还一个小功能没做, 想想也挺简单,留下代码和思路给同事做个参考. 换工作心里挺忐忑, 对未来也充满了憧憬与担忧.(虽然已是老人, 换了N次工作了,但每次心里都和忐忑). 写写代 ...
- 前端开发中SEO的十二条总结
一. 合理使用title, description, keywords二. 合理使用h1 - h6, h1标签的权重很高, 注意使用频率三. 列表代码使用ul, 重要文字使用strong标签四. 图片 ...
- 【疯狂造轮子-iOS】JSON转Model系列之二
[疯狂造轮子-iOS]JSON转Model系列之二 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 上一篇<[疯狂造轮子-iOS]JSON转Model系列之一> ...
- 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新
上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- MIP改造常见问题二十问
在MIP推出后,我们收到了很多站长的疑问和顾虑.我们将所有疑问和顾虑归纳为以下二十个问题,希望对大家理解 MIP 有帮助. 1.MIP 化后对其他搜索引擎抓取收录以及 SEO 的影响如何? 答:在原页 ...
- 如何一步一步用DDD设计一个电商网站（二）—— 项目架构
阅读目录 前言 六边形架构 终于开始建项目了 DDD中的3个臭皮匠 CQRS(Command Query Responsibility Segregation) 结语 一.前言 上一篇我们讲了DDD的 ...
- ASP.NET Core 之 Identity 入门（二）
前言 在 上篇文章 中讲了关于 Identity 需要了解的单词以及相对应的几个知识点,并且知道了Identity处在整个登入流程中的位置,本篇主要是在 .NET 整个认证系统中比较重要的一个环节,就 ...
- MVVM模式和在WPF中的实现（二）数据绑定
MVVM模式解析和在WPF中的实现(二) 数据绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- Key/Value之王Memcached初探：二、Memcached在.Net中的基本操作
一.Memcached ClientLib For .Net 首先,不得不说,许多语言都实现了连接Memcached的客户端,其中以Perl.PHP为主. 仅仅memcached网站上列出的语言就有: ...
随机推荐
- nodejs，npm 安装配置步骤
http://xiaoyaojones.blog.163.com/blog/static/28370125201351501113581/ 参照上述网址中的方法 特别强调一下,在第三步的时候,在命令行 ...
- 浏览器bug html 底部
- eclipse---之Console窗口命令行输入
在 Eclipse 中使用 Windows 命令行. 第一步:设置一个新的外部配置工具 在 Eclipse 中,选择 “Run -> External Tools -> External ...
- Cantor表-（模拟）
链接:https://ac.nowcoder.com/acm/contest/1069/I来源:牛客网 题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一 ...
- 导入数据任务（id:373985）异常， 错误信息：解析导入文件错误，请检查导入文件内容，仅支持导入json格式数据及excel文件
小程序导入,别人导出的数据库json文件,错误信息如下: 导入数据库失败, Error: Poll error, 导入数据任务(id:373985)异常,错误信息:解析导入文件错误,请检查导入文件内容 ...
- ESA2GJK1DH1K升级篇: 升级STM32 预热: 单片机每隔一定时间 使用 http 获取天气
前言: 实现功能概要: STM32使用AT指令控制Wi-Fi以TCP方式连接服务器(YY天气Web服务器),然后使用http的get协议获取今天的天气数据 单片机提取今天的温度和湿度数据,把温湿度数据 ...
- Python实现电子词典（图形界面）
Python实现电子词典(图形界面) 终端电子词典:https://www.cnblogs.com/noonjuan/p/11341375.html 文件一览: .├── client.py├── d ...
- C#中的Queue集合
Queue<T>集合 特点:先进先出,简单来说,就是新添加的元素是顺序添加在集合尾部,但是,移除的时候是从顶部开始移除元素. 三个方法: Enqueue(T obj);//顺序添加一个值到 ...
- Kafka中的HW、LEO、LSO等分别代表什么？
HW . LEO 等概念和上一篇文章所说的 ISR有着紧密的关系,如果不了解 ISR 可以先看下ISR相关的介绍. HW (High Watermark)俗称高水位,它标识了一个特定的消息偏移量(of ...
- 《HeadFirts设计模式》笔记
定义 在某种情境下,针对某些问题的某种解决方案. 设计模式 1.可拓展性强,方便维护,能够应付变化. 何时使用设计模式 设计之前,还有在重构的时候. OOP 可复用,可扩充,可维护 设计模式原则 1. ...